AngularJS Tutorial 入门教程学习笔记

1. 01和02,静态模板和AngularJS模板
2. 03 迭代器
3. 04双向绑定
4. 05XHR和依赖注入
5. 06链接与图片模板
6. 07路由与多视图 & 08更多模板
7. 09过滤器
8. 10事件
9. 11Rest和定制服务
10. 12 Animations

1 01和02,静态模板和AngularJS模板

在HTML里面用np-app来定义Angular的上下文,可以用 ng-app="AAA" 来制定一个名字空间.JS中通过这个名字来获取HTML里的上下文 var AAA = angular.module('AAA', []);.

在HTML中Angular的范围内,用 ng-controller="BBB"标记一个div,在里面用一些Angular命令(ng-repeat)和表达式设定显示方式.在JS里面用 AAA.controller('BBB',function ...) 给Angular表达式中的域赋值.

AAA 中的 $scope$ 是AAA的根作用域,控制器的作用域则在 BBB 之中.也就是说,如果在AAA下面有多个 controller, controller X 的数据绑定在 controller Y 下是无效的. AngularJS作用域文档.

略:AngularJS的开发者倾向于使用 Jasmine 行为驱动开发(BBD)框架进行测试.

写在后面,对angular.module是所有JS中创建,注册和获取模组的地方.HTML里面通过ng-app=”AA”来绑定模组AA的上下文

2 03 迭代器

建立输入表单 <input ng-model="query"> ,修改 ng-repeat 为 <li ng-repeat="x in list|filter:query">.只要在输入框里输入文本,就会自动地修改列表,只显示包含这个文本的项目.这代表两点:1. 数据绑定同名变量 query,值的同步是实时的; 2.filter过滤器,生成新数组,自动更新视图.

略:Angular端到端测试.

3 04双向绑定

在HTML里面添加选择器

<select ng-model="orderProp">
  <option value="name">Alphabetical</option>
  <option value="age">Newest</option>
</select>

同时在迭代器中加入条件 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">

JS中给每个数据加上 age 这个属性,同时设定 $scope.orderProp = 'age'设定选择器的默认值.

select 的元素和 orderProp 之间建立了双向绑定.

4 05XHR和依赖注入

通过 $http.get(AA/BB.json) 来读取json文件. $http 是AngularJS提供的内建服务,通过依赖注入DI子系统.

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
        $scope.phones = data;
    });
}]);

5 06链接与图片模板

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
    <a href="#/phones/" class="thumb"><img ng-src=""></a>
    <a href="#/phones/"></a>
    <p></p>
  </li>
</ul>

6 07路由与多视图 & 08更多模板

用 $routeProvider 重定向url,把某个url路径定向到某个HTML模板上去, 并指定相对应的controller. index.html 中定义一个域,加载所有JS文件.加载的 app.js 设定重定向规则.

phonecatApp.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'
      });
  }]);

:phoneId 是从将URL路径的对应部分作为变量.这个变量通过 $routeParams 来访问.

最后,在index.html里面加上 <div ng-view></div> 来为当前路由把对应视图加上去.

08更多模板 之中用 $http 加载不同的json文件来根据phoneId生成每部手机的细节说明网页.

7 09过滤器

建立自己的 filter FF,实现更复杂的规则,然后像之前使用 | filter:query 一样用类似pipe的语法把输出传给自己的filter | FF.filter并不限定在 ng-repeat 中使用.

angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
});

AngularJS内置过滤器 uppercase, json, date, date:”MM/dd/yyy@ h:mma”.

8 10事件

通过JS在上下文中定义函数,通过 ng-click 来设定点击事件,调用函数.

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
  function($scope, $routeParams, $http) {
    $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
      $scope.phone = data;
      $scope.mainImageUrl = data.images[0];
    });

    $scope.setImage = function(imageUrl) {
      $scope.mainImageUrl = imageUrl;
    }
  }]);

$scope.setImage 就是绑定的函数.

<img ng-src="" class="phone">

...

<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="" ng-click="setImage(img)">
  </li>
</ul>

点击图片的时候调用函数,把 mainImageUrl 的值设定为当前图片.

9 11Rest和定制服务

依赖为 angular-resource/angular-resource.js.一般我们的JS相应功能命名为 XXXService.首先注册 Service 模块.

var phonecatServices = angular.module('phonecatServices', ['ngResource']);

phonecatServices.factory('Phone', ['$resource',
  function($resource){
    return $resource('phones/:phoneId.json', {}, {
      query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
    });
  }]);

建立一个 Phone 工厂,用 $resource 来取得数据.相应的controller改为$scope.phone = Phone.get({phoneId:$routeParams.phoneId})和 $scope.phones = Phone.query().

query 方法是自己声明和定义的 query: {method:'GET', params:{phoneId:'phones'}, isArray:true}.

10 12 Animations

TODO

更多的教程开发指南和 Cookbook. 推荐使用AngularJS种子项目来引导开发新项目

Table of Contents