认识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/