甘肃龙网

  1. 首页 > 生活 > >

刷官方中文angularJs手册例子

生活百科angularjs指令

刷搭建学习环境
Hello World
="http://code.angularjs.org/angular-1.0.1.min.js">Hello {{'World'}}!
注意事项：HelloWorld!
="http://code.angularjs.org/angular-1.0.1.min.js">Your name: Hello {{yourname || 'World'}}!
注意事项：应用的解析 模板（） 注意事项：应用程序逻辑（Logic）和行为（） 注意事项：模型数据（Data） 注意事项：此外，还提供了一些非常有用的服务特性： 注意事项：搭建学习环境
需要安装Node.js和来运行本项目
安装Node.js后运行
node --version
安装运行以下代码
npm install -g testacular
安装Git工具 clone项目
git clone git://github.com/angular/angular-phonecat.git
app/index.html
My HTML File="lib/angular/angular.js">Nothing here {{'yet' + '!'}}

注意事项：引导应用 应用引导过程有3个重要点：更改表达式内容
1 + 2 = {{ 1 + 2 }}

结果
模板
...="lib/angular/angular.js">="js/controllers.js">

  • {{phone.name}}{{phone.snippet}}

注意事项：模型和控制器
在控制器里面初始化了数据模型
app/js/.js
function PhoneListCtrl($scope) {$scope.phones = [{"name": "Nexus S","snippet": "Fast just got faster with Nexus S."},{"name": "Motorola XOOM? with Wi-Fi","snippet": "The Next, Next Generation tablet."},{"name": "MOTOROLA XOOM?","snippet": "The Next, Next Generation tablet."}];}
注意事项：测试
test/unit/.js:
describe('PhoneCat controllers', function() {describe('PhoneListCtrl', function(){it('should create "phones" model with 3 phones', function() {var scope = {},ctrl = new PhoneListCtrl(scope);expect(scope.phones.length).toBe(3);});});});
注意事项：
刷官方中文angularJs手册例子

文章插图
{{phone.name}}{{phone.snippet}}

注意事项：路由与多视图
多视图，路由和布局模板
布局模板
路由
关于依赖注入（DI），注入器（）和服务提供者（）
注意事项：
APP的路由规则
angular.module('phonecat', []).config(['$routeProvider', function($routeProvider) {$routeProvider.when('/phones', {templateUrl: 'partials/phone-list.html',controller: PhoneListCtrl}).when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).otherwise({redirectTo: '/phones'});}]);
控制器
angular.module('phoneList').component('phoneList', {templateUrl: 'phone-list/phone-list.template.html',controller: ['$http', function PhoneListController($http) {var self = this;self.orderProp = 'age';$http.get('phones/phones.json').then(function(response) {self.phones = response.data;});}]});


上一篇：老龙头门票

下一篇：濮阳市华龙区