码迷，mamicode.com
首页 > Web开发 > 详细

AngularJS学习笔记

时间：2015-03-12 22:42:26      阅读：242      评论：0      收藏：0      [点我收藏+]

标签：angularjs   入门   教程   学习   笔记   

近日通过图灵社区的教程开始学习AngularJS，在此记录下要点。

准备

教程中有一些不完善的地方，包括

  • Github上的代码已经更新，主要部分大体相同，但测试部分已经不能像教程中说的那样工作，因此先略过测试部分，待完整了解AngularJS后再做研究；
  • nodeJS开启服务器的方式也和文章所述不同，下面会提到。

所需要的工具

  • nodeJS
  • git
  • 代码库：git clone git://github.com/angular/angular-phonecat.git

node配置

教程中的方法已经失效，应使用如下方法：

在git中先转到angular-phonecat目录，输入：

npm install //这一步要一段时间，要耐心等完。强制退出将导致失败，失败后需要删除目录下的node_modules文件夹重来
npm start

每个教程之间都需要用到checkout命令，建议另开个git bash，这样就不需要重复开启node服务器了。

一些说明

  • 一些名词会比较混淆，例如 ngRoute 和 $routeProvider，我的理解是： ngRoute 是模块名，而$routeProvider开头的是服务名。加载模块后才可以使用对应的服务。
  • angular.module(‘newModelName’, [‘relayModelName’,’…’]) 这个语句是声明一个模块，第一个参数是声明的模块名，第二个参数是一个数组，包含了该模块所依赖的模块，可以是空数组。
  • 相关JS文件的引入，只需要保证angular.js放在第一，其他文件的顺序没有关系，例如
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <!-- angular.js要放在第一位 -->
  <script src="bower_components/angular/angular.js"></script>

  <!-- 下面的引入顺序没有影响 -->
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/angular-resource/angular-resource.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/services.js"></script>
</head>

基本入门

ng-app标记了AngularJS的作用范围：

<html lang="en" ng-app>

双花括号绑定表达式，类似于JavaScript表达式，可以用于计算，动态输出，例如：

<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>

PhoneListCtrl是controllers.js定义的控制器的名字，controllers.js的内容，大概长这样：

function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S.",
     "age": 0},
    {"name": "Motorola XOOM? with Wi-Fi",
     "snippet": "The Next, Next Generation tablet.",
     "age": 1},
    {"name": "MOTOROLA XOOM?",
     "snippet": "The Next, Next Generation tablet.",
     "age": 2}
  ];

  $scope.orderProp = ‘age‘;
}

phones是controllers.js中定义的数据，其作用域$scope是定义ng-controller元素以内的区域（即body）

ng-repeat是AngularJS的迭代器，会遍历phones数组

MVC

AngularJS使用了MVC模式，即模型Model-视图View-控制器Controller。

根据我的初步了解，可以作如下对应：

模型：HTML标签，例如：

  <ul>
    <li ng-repeat="phone in phones">
      {{phone.name}}
    <p>{{phone.snippet}}</p>
    </li>
  </ul>

视图：我们在页面上看到的实时数据
控制器：在上个例子中，controllers.js就是控制器，他负责模型和视图的同步。

双向绑定

抽象地说，双向绑定即数据从视图到模型的绑定，以及从模型到视图的绑定。

在实际的例子中，可以这样理解：假如视图中一个input元素（视图）绑定了query变量（模型），那么输入框内容（视图）的修改，会实时更新到这个变量（模型）中；反之亦然。

可以看下面迭代器过滤这个例子

迭代器过滤/排序

迭代器中使用filter可以实时过滤输出

下面这个输入框绑定了query，当输入框（视图）修改内容时，变量query（模型）的值会实时更新，这个更新的直接表现为filter:query改变，导致列表结果的更新。

<input ng-model="query">

在迭代器中添加filter:query，可以实时显示匹配搜索框的结果

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query">
    {{phone.name}}
    <p>{{phone.snippet}}</p>
  </li>
</ul>

类似地，如果为每个phone实例添加一个可以比较大小的属性，如age，那么我们就可以有name和age两种排序方式可以选择。

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>
  </li>
</ul>

select选中项的value值（视图）会实时更新到orderProp（模型）中，迭代器会根据实际值来进行排序输出。

XHR和依赖注入

XHR即XMLHttpRequest。之前我们的数据都是定义在js文件内的，现在我们也可以用XHR异步请求一个JSON文件，并在请求成功后的回调函数里，将解析后的JSON赋值给模型。

而所谓依赖注入，即AngularJS会根据你的需要，加载需要的服务（这里我们需要的是$http），以及该模块依赖的服务。

function PhoneListCtrl($scope, $http) {//将需要的模块名作为参数传入
  $http.get(‘phones/phones.json‘).success(function(data) {
    $scope.phones = data;
  });

  $scope.orderProp = ‘age‘;
}

PhoneListCtrl.$inject = [‘$scope‘, ‘$http‘];

最后一行代码是为了防止JS压缩时，参数名字被修改导致无法识别正确的模块名而导致的错误。

也可以使用传入数组的方式：

var PhoneListCtrl = [‘$scope‘, ‘$http‘, function($scope, $http) { /* constructor body */ }];

延迟替换

对于img元素，如果src中带有{{…}}，由于在AngularJS解析前浏览器就尝试直接去获取改src的资源，便会导致错误。因此，可以将src属性改写为ng-src：

<img ng-src="{{phone.imageUrl}}">

类似的还有Title元素，可以用ng-bind-template来替换，如：

<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>

关于ng-bind-template和ng-bind的区别，官方解释如下：

ng-bind-template

The ngBindTemplate directive specifies that the element text content should be replaced with the interpolation of the template in the ngBindTemplate attribute. Unlike ngBind, the ngBindTemplate can contain multiple {{ }} expressions. This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements.

即ng-bind-template可以包含{{}}，而ng-bind则不能包含{{}}（ng-bind内的模型直接使用即可，不需要{{}}）

路由与多视图

AngularJS可以方便地实现前端路由和多视图功能，可以在一个页面内，在不完全刷新的情况下跳转到另一个页面。

在这种情况下，index.html是一个空模版：

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body>

  <div ng-view></div>

</body>
</html>

body内的div具有ng-view属性，代表他是载入其他页面的容器。

AngularJS的路由功能，可以让该容器，在不同URL上载入不同的页面模版。

使用路由功能的JS代码如下：

‘use strict‘;

/* App Module */

var phonecatApp = angular.module(‘phonecatApp‘, [
  ‘ngRoute‘,
  ‘phonecatControllers‘
]);

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‘
      });
  }]);

$routeProvider.when告诉了浏览器路由规则，包括使用的模版页面以及对应的控制器。

注意/phones/:phoneId，冒号声明的变量将会被提取，并存放到$routeParams中，调用方法如下：

controllers.js

‘use strict‘;

/* Controllers */

var phonecatControllers = angular.module(‘phonecatControllers‘, []);

phonecatControllers.controller(‘PhoneListCtrl‘, [‘$scope‘, ‘$http‘,
  function($scope, $http) {
    $http.get(‘phones/phones.json‘).success(function(data) {
      $scope.phones = data;
    });

    $scope.orderProp = ‘age‘;
  }]);

phonecatControllers.controller(‘PhoneDetailCtrl‘, [‘$scope‘, ‘$routeParams‘, ‘$http‘,
  function($scope, $routeParams, $http) {
    $http.get(‘phones/‘ + $routeParams.phoneId + ‘.json‘).success(function(data) {
      $scope.phone = data;
    });
  }]);

过滤器（映射器）

过滤器，这名字乍一听，觉得会和前面讲的”迭代过滤器”混淆。对他进行一番了解后，觉得”映射器”的名字更为合适，也更容易理解。他的功能很容易理解：

假如有一个模型的值是true或者false，我们可以利用过滤器，将其在视图中映射为√或者×。

过滤器关键代码如下：

‘use strict‘;

/* Filters */

angular.module(‘phonecatFilters‘, []).filter(‘checkmark‘, function() {
  return function(input) {
    return input ? ‘\u2713‘ : ‘\u2718‘;//√和×的unicode编码
  };
});

这样我们新建了一个名为phonecatFilters的模块，其中有名为checkmark的过滤器。之后在phonecatApp里添加对phonecatFilters模块的依赖：

var phonecatApp = angular.module(‘phonecatApp‘, [
  ‘ngRoute‘,
  ‘phonecatControllers‘,
  ‘phonecatFilters‘
]);

之后就可以在模型中使用了：

...
    <dl>
      <dt>Infrared</dt>
      <dd>{{phone.connectivity.infrared | checkmark}}</dd>
      <dt>GPS</dt>
      <dd>{{phone.connectivity.gps | checkmark}}</dd>
    </dl>
...

事件处理

AngularJS有自己的一套事件处理机制，click事件绑定如下，首先定义事件处理函数：

function PhoneDetailCtrl($scope, $routeParams, $http) {
...
 $scope.setImage = function(imageUrl) {
    $scope.mainImageUrl = imageUrl;
  }
}

然后在模版中进行绑定

<img ng-src="{{mainImageUrl}}" class="phone">

...

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

定制服务

我对定制服务的理解还不是非常深刻。定制服务的优势，原文是这样描述的

对我们应用所做的最后一个改进就是定义一个代表RESTful客户端的定制服务。有了这个客户端我们可以用一种更简单的方式来发送XHR请求，而不用去关心更底层的$http服务（API、HTTP方法和URL）。

我们定义的服务写在services.js中，另外我们还需要ngResource模块的$resource服务，他被定义在angularjs-resource.js中。

services.js

‘use strict‘;

/* Services */

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}
    });
  }]);

在app.js中引入phonecatServices模块

var phonecatApp = angular.module(‘phonecatApp‘, [
  ‘ngRoute‘,
  ‘phonecatControllers‘,
  ‘phonecatFilters‘,
  ‘phonecatServices‘
]);

之后，我们就可以把controllers.js改写为下面这样

‘use strict‘;

/* Controllers */

var phonecatControllers = angular.module(‘phonecatControllers‘, []);

phonecatControllers.controller(‘PhoneListCtrl‘, [‘$scope‘, ‘Phone‘,
  function($scope, Phone) {
    $scope.phones = Phone.query({phoneId:‘phones‘});
    $scope.orderProp = ‘age‘;
  }]);

phonecatControllers.controller(‘PhoneDetailCtrl‘, [‘$scope‘, ‘$routeParams‘, ‘Phone‘,
  function($scope, $routeParams, Phone) {
    $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
      $scope.mainImageUrl = phone.images[0];
    });

    $scope.setImage = function(imageUrl) {
      $scope.mainImageUrl = imageUrl;
    }
  }]);

对services.js作一些说明：

 var phonecatServices = angular.module(‘phonecatServices‘, [‘ngResource‘]);
//声明一个phonecatServices模块

 phonecatServices.factory(‘Phone‘, [‘$resource‘,
//使用工厂方法，声明一个名为Phone的服务
  function($resource){
    return $resource(‘phones/:phoneId.json‘, {}, {
      query: {method:‘GET‘, params:{phoneId:‘phones‘}, isArray:true}
//定义Phone服务的query方法，用于GET资源‘phones/:phoneId.json‘，其中:phoneId是变量，该默认值被定义为"phones"。当然也可以不声明默认变量，而是在调用时传入实参，下面会提及。
    });
  }]);

对controller.js作一些说明：

‘use strict‘;

/* Controllers */

var phonecatControllers = angular.module(‘phonecatControllers‘, []);

phonecatControllers.controller(‘PhoneListCtrl‘, [‘$scope‘, ‘Phone‘,
  function($scope, Phone) {
    $scope.phones = Phone.query();
/*
之前：$http.get(‘phones/phones.json‘).success(function(data) {  $scope.phones = data;});
现在：$scope.phones = Phone.query();
可见这里被简化了。如果不给Phone.query传入实参，他会使用默认参数phones，当然我们也可以手动传入参数：Phone.query({phoneId:‘phones‘})
*/
    $scope.orderProp = ‘age‘;
  }]);

phonecatControllers.controller(‘PhoneDetailCtrl‘, [‘$scope‘, ‘$routeParams‘, ‘Phone‘,
  function($scope, $routeParams, Phone) {
    $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
      $scope.mainImageUrl = phone.images[0];
    });
/*
在services.js中并没有定义Phone.get方法，为什么可以使用它呢？

通过查阅API文档可知，$resource方法的返回值是一个可被扩展的对象，其自带get,save,query（query已经被我们扩展了）,remove,delete函数。

通过get方法，并传入被点击的链接对应的phoneId作为参数，获取手机详细页所需要的json文件，在成功后执行回调函数。
*/
    $scope.setImage = function(imageUrl) {
      $scope.mainImageUrl = imageUrl;
    }
  }]);

AngularJS学习笔记

标签：angularjs   入门   教程   学习   笔记   

原文地址：http://blog.csdn.net/qiujiawen001/article/details/44198669
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！