刷官方中文angularJs手册例子
刷 搭建学习环境
Hello World
<!doctype html>
<html ng-app><head><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script></head><body>Hello {{'World'}}!</body>
</html>
注意事项： Hello World!
<!doctype html>
<html ng-app><head><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script></head><body>Your name: <input type="text" ng-model="yourname" placeholder="World"><hr>Hello {{yourname || 'World'}}!</body>
</html>
注意事项： 应用的解析 模板（） 注意事项： 应用程序逻辑（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
<!doctype html>
<html lang="en" ng-app>
<head><meta charset="utf-8"><title>My HTML File</title><link rel="stylesheet" href="css/app.css"><link rel="stylesheet" href="css/bootstrap.css"><script src="lib/angular/angular.js"></script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
注意事项： 引导应用 应用引导过程有3个重要点： 更改表达式内容
<p>1 + 2 = {{ 1 + 2 }}</p>
结果
模板
<html ng-app>
<head>...<script src="lib/angular/angular.js"></script><script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl"><ul><li ng-repeat="phone in phones">{{phone.name}}<p>{{phone.snippet}}</p></li></ul>
</body>
</html>
注意事项： 模型和控制器
在控制器里面初始化了数据模型
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);});});
});
注意事项：
没看懂······没找到.//test.sh或者bat文件·····
迭代器
<div class="container-fluid"><div class="row-fluid"><div class="span2"><!--Sidebar content-->Search: <input ng-model="query"><h1>Google Phone Gallery: {{query}}</h1></div><div class="span10"><!--Body content--><ul class="phones"><li ng-repeat="phone in phones | filter:query">{{phone.name}}<p>{{phone.snippet}}</p></li></ul></div></div>
</div>
使用的[$]函数来处理[]指令的输入
这样允许用户输入一个搜索条件，立刻就能看到对电话列表的搜索结果
注意事项：
test
在index.html模板中添加一个{{query}}绑定来实时显示query模型的当前值
页面正加载的时候它们已经显示给用户看了。一个更好的解决方案是使用[]或者[]指令，它们在页面加载时对用户是不可见的
没看懂。。。。。
双向绑定
模板
<body ng-controller="PhoneListController">Search: <input ng-model="query">Sort by:<select ng-model="orderProp"><option value="name">Alphabetical</option><option value="age">Newest</option></select><ul class="phones"><li ng-repeat="phone in phones | filter:query | orderBy:orderProp">{{phone.name}}<p>{{phone.snippet}}</p><p>{{phone.age}}</p></li></ul></body>
控制器
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {$scope.phones = [{"name": "Nexus S","snippet": "Fast just got faster with Nexus S.","age": 2},{"name": "Motorola XOOM™ with Wi-Fi","snippet": "The Next, Next Generation tablet.","age": 1},{"name": "MOTOROLA XOOM™","snippet": "The Next, Next Generation tablet.","age": 3}];$scope.orderProp = 'age';
});
注意事项： XHR和依赖注入
app/js/.js
function PhoneListCtrl($scope, $http) {$http.get('phones/phones.json').success(function(data) {$scope.phones = data;});$scope.orderProp = 'age';
}//PhoneListCtrl.$inject = ['$scope', '$http'];
为了使用的服务，你只需要在控制器的构造函数里面作为参数声明出所需服务的名字
function PhoneListCtrl($scope, $http) {...}
参数名字非常重要，因为注入器会用他们去寻找相应的依赖。
’$'前缀命名习惯
内建服务，作用域方法，以及一些其他的 API都在名字前面使用一个‘ ’ 前 缀 。 不 要 使 用 ‘ ’前缀。不要使用‘ ’前缀。不要使用‘’前缀来命名你自己的服务和模型，否则可能会产生名字冲突。
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;});}]});
链接与图片模板
json片段
[{..."id": "motorola-defy-with-motoblur","imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg","name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",...},
...
]
app/index.html
<ul class="phones"><li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail"><a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a><a href="#/phones/{{phone.id}}">{{phone.name}}</a><p>{{phone.snippet}}</p></li></ul>
注意事项： 路由与多视图
多视图，路由和布局模板
布局模板
路由
关于依赖注入（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;});}]});
控制器
function PhoneDetailCtrl($scope, $routeParams) {$scope.phoneId = $routeParams.phoneId;
}
路由规则如下
angular.module('phonecatApp').config(['$routeProvider',function config($routeProvider) {$routeProvider.when('/phones', {template: '创建模块注入$服务提供配置路由规则
注意事项：
为了让我们的应用引导我们新创建的模块，我们同时需要在[ngApp]指令的值上指明模块的名字
app/index.html
<!doctype html>
<html lang="en" ng-app="phonecat">
...
模板
$route服务通常和[]指令一起使用。指令的角色是为当前路由把对应的视图模板载入到布局模板中
如下所示
<html lang="en" ng-app="phonecat">
<head>
...<script src="lib/angular/angular.js"></script><script src="js/app.js"></script><script src="js/controllers.js"></script>
</head>
<body><div ng-view></div></body>
</html>
删除的模板放置在phone-list.html中
<div class="container-fluid"><div class="row-fluid"><div class="span2"><!--Sidebar content-->Search: <input ng-model="query">Sort by:<select ng-model="orderProp"><option value="name">Alphabetical</option><option value="age">Newest</option></select></div><div class="span10"><!--Body content--><ul class="phones"><li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail"><a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a><a href="#/phones/{{phone.id}}">{{phone.name}}</a><p>{{phone.snippet}}</p></li></ul></div></div>
</div>
同时我们为手机详细信息视图添加一个占位模板。
phone-.html
TBD: detail view for {{phoneId}}
注意到我们的布局模板中没再添加或控制器属性！
tags:
angularjs指令
