认识AngularJS

学习AngularJS所需技能

HTML & CSS

JavaScript

为什么要使用AngularJS

如果你想用JavaScript制作动态Web站点，使用AngularJS有以下优点：

AngularJS能有效组织JavaScript代码
AngularJS可以创建快速响应式Web站点
AngularJS可以与jQuery同时使用
AngularJS便于测试

AngularJS呈现Web页面的方式

从图中可知，当浏览器首次加载页面之后，后续对于该页面的数据请求不再是刷新页面，而是从服务端获取数据之后由AngularJS修改DOM并呈现。这个原理从某种程度上和Ajax技术很像，AngularJS是通过内建的$http服务从服务端获取数据的，这个在以后的章节会提到。

AngularJS的几个核心组件

Directive:从字面上较难理解，可以解释为是一些特殊的标记（AngularJS内建的Directives一般以"ng-"开头，也可以自定义Directive，今后的章节会提到），AngularJS可以解析这些标记，从而执行指定的行为。

Module:用来指定AngularJS的作用范围，属于Module范围内的Custom Directives、Controllers、Expressions等，在该Module范围以外无效。

Expression:AngularJS可解析表达式，进行运算、调用变量等操作。

Controller:方法、变量所在地，页面行为和逻辑所处之地。

第一个AngularJS例子

1. 创建html并添加angular.js

 <!DOCTYPE html>
 <html>
 <head>
     <script src="/Scripts/angular.js"></script>
 </head>
 <body>
 </body>
 </html>

2. 新建javascript脚本，在里面创建Module：student，定义一个学生jack，在Module：student上创建Controller：myController

 <script type="text/javascript">
         (function () {
             var app = angular.module('student', []);
 
             var jack = {
                 name: "Jack",
                 age: 18,
                 sex: 'male',
                 displayComment: false
             };
 
             // 在Module：student上创建Controller：myController
             app.controller('myController', function () {
                 this.student = jack;
             });
         })();
 </script>

3. 完整的body部分的代码

 <!--指定body为Module：student的作用域，ng-app为AngularJS内建的Directive-->
 <body ng-app="student">
     <!--指定该div为myController的作用域，为了便于使用，指定myController的别名为myCtrl-->
     <!--ng-controller为AngularJS内建的Directive-->
     <div ng-controller="myController as myCtrl">
         <!--显示myCtrl中对象student的name属性-->
         <p>Name:{{myCtrl.student.name}}</p>
         <!--显示myCtrl中对象student的age属性，使用Expression计算15年以后该学生的年龄-->
         <p>Age:{{myCtrl.student.age}} will be {{myCtrl.student.age+15}} after 15 years.</p>
         <p>Sex:{{myCtrl.student.sex}}</p>
         <!--ng-show为AngularJS内建的Directive，用来控制作用标签是否显示在页面上，由于jack的displayComment=false，因此Comments的内容将不会显示在页面上-->
         <p ng-show="myCtrol.student.displayComment">Comments:This will not display on page.</p>
     </div>
     <!-- 这里已经不再myController的作用范围内，Expression不会被AngularJS解析 -->
     Name:{{myCtrl.student.name}}
 </body>

AngularJS默认只加载第一个Module，如需加载多个Module，需使用angular.bootstrap手动加载，特别注意的是，Module之间是不允许嵌套使用的。由于AngularJS是基于SPA（Single Page Application）原则设计的，因此我想应该遵循此原则，用别的方式避免一个页面使用多个Modules的情况。

4. 以下是单页面使用多个Module的完整代码

 <!DOCTYPE html>
 <html>
 <head>
     <script src="/Scripts/angular.js"></script>
     <script type="text/javascript">
         (function () {
             var app1 = angular.module('student1', []);
 
             var jack1 = {
                 name: "Jack1",
                 age: 18,
                 sex: 'male',
                 displayComment: false
             };
 
             app1.controller('myController1', function () {
                 this.student = jack1;
             });
 
             var app2 = angular.module('student2', []);
 
             var jack2 = {
                 name: "Jack2",
                 age: 28,
                 sex: 'female',
                 displayComment: true
             };
 
             app2.controller('myController2', function () {
                 this.student = jack2;
             });
 
             angular.element(document).ready(function () {
                 var myDiv1 = document.getElementById("myDiv1");
                 angular.bootstrap(myDiv1, ["student1", "student2"]);
 
                 var myDiv2 = document.getElementById("myDiv2");
                 angular.bootstrap(myDiv2, ["student2"]);
             });
         })();
     </script>
 </head>
 <body>
     <div id="myDiv1">
         <div ng-controller="myController1 as myCtrl">
             <p>Student1:</p>
             <p>Name:{{myCtrl.student.name}}</p>
             <p>Age:{{myCtrl.student.age}} will be {{myCtrl.student.age+15}} after 15 years.</p>
             <p>Sex:{{myCtrl.student.sex}}</p>
             <p ng-show="myCtrol.student.displayComment">Comments:This will not display on page.</p>
         </div>
         <br />
         <br />
         <div ng-controller="myController2 as myCtrl2">
             <p>Student2:</p>
             <p>Name:{{myCtrl2.student.name}}</p>
             <p>Age:{{myCtrl2.student.age}} will be {{myCtrl2.student.age+15}} after 15 years.</p>
             <p>Sex:{{myCtrl2.student.sex}}</p>
             <p ng-show="myCtrl2.student.displayComment">Comments:This will not display on page.</p>
         </div>
     </div>
     <br />
     <br />
     <div id="myDiv2">
         <div ng-controller="myController2 as myCtrl2">
             <p>Student2:</p>
             <p>Name:{{myCtrl2.student.name}}</p>
             <p>Age:{{myCtrl2.student.age}} will be {{myCtrl2.student.age+15}} after 15 years.</p>
             <p>Sex:{{myCtrl2.student.sex}}</p>
             <p ng-show="myCtrl2.student.displayComment">Comments:This will not display on page.</p>
         </div>
     </div>
 </body>
 </html>

好了，至此为止，我们已经成功创建了第一个AngularJS的应用，你也应该感受到了AngularJS的强大之处。

参考资料

CodeSchool快速入门视频（英文版）：http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

ngApp：https://docs.angularjs.org/api/ng/directive/ngApp

Solution of multi modules on one page: http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/