AngularJS 新手指南1

发表于   |   分类于 ，   |  

五一放假没干啥正事，想起鼓捣 AngularJS 了，把它的新手指南一口气翻了个遍，算是入了点门了。个人感觉这货挺适合做 web app 的（可能因为我没接触过别的 MVC 框架吧…），它的亮点是数据绑定，扩展 HTML，居然把 DOM 操作都替咱做了…

话不多说，下面是我边看边记的笔记，自认为重点的记了下中文。

原文地址：AngularJS Tutorial
笔记作者：涂鸦码龙

搭环境

  • 安装nodejs

    1
    node --version    //nodejs 版本

  • 安装 Git

  • 克隆 angular-phonecat 项目

    1
    git clone git://github.com/angular/angular-phonecat.git

  • 找到项目目录 

    1
    cd angular-phonecat

  • 起 http 服务器 

    1
    node scripts\web-server.js

启动应用

1
git checkout -f step-0（0-11） //重置每一步骤的 git 项目状态
1
2
3
4
5
6
<html ng-app>
```  
***ng-app*** 属性代表 Angular 指令（***ngApp***；Angular 用名字+破折号作为属性名，驼峰写法作为对应的指令名），Angular 认为是 app 根元素。
***引入 Angular ：***


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
HTML 页面完全下载，注册一个回调函数，Angular 认出了 [ngApp](http://docs.angularjs.org/api/ng.directive:ngApp) 指令。
{% codeblock %}
Nothing here &#123;&#123;'yet' + '!'}} 
{% endcodeblock %}
双层大括号，Angular 模版，数据绑定
***启动 Angular 应用***
自动启动使用 ***ngApp*** 指令；
[手动启动](http://docs.angularjs.org/guide/bootstrap)：
```js
<script>
angular.element(document).ready(function(){
	angular.bootstrap(document);
});
</script>

app 引导程序做了2件重要的事：

  1. 注入器将用于相应的注入
  2. 注入器创建了根作用域，它将作为应用模型的上下文
  3. Angular 将从 root 元素的 ngApp 开始编译，处理各种指令和绑定

一旦应用启动，将等待引入的浏览器事件（mouse click, key press 或者 HTTP 相应），它们可能改变模型（model）。一旦事件触发，Angular 会探测模型改变，并会反映到视图（view）中，更新所有影响到的绑定。

Angular 模版

MVC（Model-View-Controller 模型-视图-控制器）

View 和 Template

view 是 model 通过 HTML template 的映射，model 改变，Angular 刷新相应的绑定点，更新 view。

Angular 通过这个模版构建 view 组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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">
   &#123;&#123;phone.name}}
   <p>&#123;&#123;phone.snippet}}</p>
   </li>
</ul>
</body>
</html>

ng-repeat=”phone in phones” 是 Angular repeater，以 <li> 为模版循环 phones 里的 phone。
{{phone.name}} 表示绑定，表达式关联到 PhoneListCtrl controller 定义的应用模型。

Model 和 Controller

数据模型（一个简单的手机数组）通过 PhoneListCtrl 控制器实例化：

app/js/controllers.js
1
2
3
4
5
6
7
8
9
10
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."}
  ];
}

尽管控制器（controller ）还没做太多控制，但它扮演了重要的角色。它为我们的数据模型（model）提供上下文，控制器允许我们建立模型和视图（view）之间的数据绑定：

PhoneListCtrl —— 控制器函数的名字（在 controller.js 里面），匹配 <body> 标签里面 ngController（ng-controller=”PhoneListCtrl”）指令的名字。

手机数据加到了作用域（$scope），注入到我们的控制器函数里。当应用启动时，控制器作用域被创建，它继承了根作用域。在 <body ng-controller=”PhoneListCtrl”> 之间，控制器作用域对所有绑定有效。

Angular 里面作用域的概念很重要；作用域可以看作胶，粘合模版（template ），模型（model）和控制器（controller）。Angular 把作用域，模版信息，数据模型和控制器一起使用，保持模型和视图的分离且同步。

Angular 作用域文档

实验

  • 在 index.html 增加另一处绑定：
1
<p>Total number of phones: &#123;&#123;phones.length}}</p>
  • 在控制器里增加新的模型属性，然后绑定到模版里：
1
$scope.hello = "Hello, World!"
  • 创建一个重复器（repeater），构造一个简单的表格：
1
2
3
4
<table>
  <tr><th>row number</th></tr>
  <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>&#123;&#123;i+1}}</td></tr>
</table>