以前整理的，可供参考。
安装：
1.首先要安装node.js和它的npm包管理系统。（nodejs相关待整理）
2.安装grunt
.grunt是一个基于任务的Javascript工程命令行构建工具。
在dos窗口输入：npm install grunt-cli -g
具体模块安装：npm install(grunt或grunt模块的名称) --save-dev
3.安装Karma runner
在dos窗口输入：npm install karma-cli -g
安装Karma：npm install karma --save-dev
安装你项目需要的组件：npm install karma-jasmine karma-chrome-launcher --sava-dev
4.下载angular.js
在这个网站下载：https://code.angularjs.org/
选定一个2.0以前的版本。
一、AngularJS简介
AngularJS是一个JavaScript框架。它可通过<script>标签添加到HTML页面。
AngularJS通过指令扩展了HTML，且通过表达式绑定数据到HTML。
1.AngularJS通过ng-directives扩展了HTML。
Ng-app指令定义一个AngularJS应用程序。
Ng-model指令把元素值（比如输入域的值）绑定到应用程序。
Ng-bind指令把应用程序数据绑定到HTML视图。
2.什么是AngularJS
AngularJS使得开发现代的单一页面应用程序变得更加容易。
·AngularJS把应用程序数据绑定到HTML元素。
·AngularJS可以克隆和重复HTML元素。
·AngularJS可以隐藏和显示HTML元素。
·AngularJS可以在HTML元素“背后”添加代码。
·AngularJS支持输入验证。
3.AngularJS指令
AngularJS指令是以ng作为前缀的HTML属性。
Ng-init指令初始化AngularJS应用程序变量。
* HTML5允许扩展的（自制的）属性，以data-开头。
AngularJS属性以ng-开头，但是可以使用data-ng-来让网页对HTML5有效。
4.AngularJS表达式
AngularJS表达式写在双大括号内：{{expression}}。
AngularJS表达式把数据绑定到HTML，这与ng-bind指令有异曲同工之妙。
AngularJS将在表达式书写的位置“输出”数据。
AngularJS表达式很像Javascript表达式：它们可以包含文字、运算符和变量。
5.AngularJS应用
AngularJS模块（module）定义了AngularJS应用。
AngularJS控制器（Controller）用于控制AngularJS应用。
Ng-app指令定义了应用，ng-controller定义了控制器。
AngularJS模块定义应用：
Var app = angular.module(‘myApp’,{});
AngularJS控制器控制应用：
App.controller(‘myCtrl’,function($scope){$scope.firstName = “John”;$scope.lastName = “Doe”;})
二、AngularJS表达式
AngularJS使用表达式把数据绑定到HTML。
1.AngularJS数字
<div ng-app=”” ng-init=”quantity=1;cost=5”>
<p>总价：{{quantity * cost}}</p>
</div>
使用ng-bind的相同实例：
<div ng-app=”” ng-init=”quantity=1;cost=5”><p>总价：<span ng-bind=”quantity * cost”></span></p></div>
2.AngularJS字符串
<div ng-app=”” ng-init=”firstName=’John’;lastName=’Doe’”><p>姓名：{{firstName + “ “ + lastName}}</p></div>
使用ng-bind的相同实例：
<div ng-app=”” ng-init=”firstName=’John’;lastName=’Doe’”><p>姓名：<span ng-bind=”firstName + ‘ ‘ + lastName”></span></p></div>
3.AngularJS对象
<div ng-app=”” ng-init=”person={firstName:’John’,lastName:’Doe’}”><p>姓为{{person.lastName}}</p></div>
4.AngularJS数组
<div ng-app=”” ng-init=”points=[1,15,19,2,40]”><p>第三个值为{{points[2]}}</p></div>
5.AngularJS表达式与JavaScript表达式
类似于JavaScript表达式，AngularJS表达式可以包含字母，操作符，变量。
与JavaScript表达式不同，AngularJS表达式可以写在HTML中；AngularJS表达式不支持条件判断，循环及异常；AngularJS表达式支持过滤器。
三、AngularJS指令
AngularJS通过被称为指令的新属性来扩展HTML。
AngularJS通过内置的指令来为应用添加功能。
AngularJS允许你自定义指令。
1.AngularJS指令
AngularJS指令是扩展的HTML属性，带有前缀ng-。
Ng-app指令初始化一个AngularJS应用程序。
Ng-init指令初始化应用程序数据。
Ng-model指令把元素值（比如输入域的值）绑定到应用程序。
2.数据绑定
AngularJS中的数据绑定，同步了AngularJS表达式与AngularJS数据。
在下一个示例中，两个文本域是通过两个ng-model指令同步的。
<div ng-app=”” ng-init=”quantity=1;price=5;”><h2>价格计算器</h2>数量：<input type=”number” ng-model=”quantity”>价格：<input type=”number” ng-model=”price”><p><b>总价：</b>{{quantity*price}}</p></div>
3.重复HTML元素
Ng-repeat指令会重复一个HTML元素：
<div ng-app=”” ng-init=”names=[‘Jani’,’Hege’,’Kai’]”><p>使用ng-repeat来循环数组</p><ul><li ng-repeat=”x in names”>{{x}}</li></ul></div>
Ng-repeat指令用在一个对象数组上：
<div ng-app=”” ng-init=”names=[{name:’Jani’,country:’Norway’},{name:’Hege’,country:’Sweden’},{name:’Kai’,country:’Denmark’}]”><p>循环对象：</p><ul><li ng-repeat=”x in names”>{{x.name + ‘,’ + x.country}}</li></ul></div>
* AngularJS完美支持数据库的CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。把实例中的对象想象成数据库中的记录。
4.ng-app指令
Ng-app指令定义了AngularJS应用程序的根元素。
Ng-app指令在网页加载完毕时会自动引导（自动初始化）应用程序。
5.ng-init指令
Ng-init指令为AngularJS应用程序定义了初始值。
通常情况下，不使用ng-init。您将使用一个控制器或模块来代替它。
6.ng-model指令
Ng-model指令绑定HTML元素到应用程序数据。
Ng-model指令也可以：
·为应用程序数据提供类型验证（number、email、required）。
·为应用程序数据提供状态（invalid、dirty、touched、error）。
·为HTML元素提供CSS类。
·绑定HTML元素到HTML表单。
7.ng-repeat指令
Ng-repeat指令对于集合中（数组中）的每个项会克隆一次HTML元素。
8.创建自定义的指令
可以使用.directive函数来添加自定义的指令。
要调用自定义指令，HTML元素上需要添加自定义指令名。
使用驼峰法来命名一个指令，runoobDirective，但在使用它时需要以-分割，runoob-directive：
<body ng-app=”myApp”><runoob-directive></runoob-directive><script>Var app = angular.module(“myApp”,[]);App.directive(“runoobDirective”,function(){Return{Template : “<h1>自定义指令！</h1>” };});</script></body>
可以通过以下方式来调用指令：
·元素名
·属性
·类名
·注释
以下实例方式也能输出同样结果：
元素名：
<runoob-directive></runoob-directive>
属性：
<div runoob-directive></div>
类名：
<div class=”runoob-directive”></div>
注释：
<!-- 指令：runoob-directive -->
*需要在该实例添加replace属性，否则评论是不可见的。
*必须设置restrict的值为”M”才能通过注释来调用指令。
<body ng-app=”myApp”><!-- directive: runoob-directive --><script>Var app = angular.module(“myApp”,[]);App.directive(“runoobDirective”,function(){Return {Restrict : “M”,Replace : true,Template : “<h1>自定义指令！</h1>” };});</script></body>
9.限制使用
可以限制指令只能通过特定的方式来调用。
通过添加restrict属性，并设置值为”A”，来设置指令只能通过属性的方式来调用：
Var app = angular.module(“myApp”,[]);App.directive(“runoobDirective”,function(){Return {Restrict : “A”,Template : “<h1>自定义指令！</h1>” };});
Restrict值可以是以下几种：
·E只限元素名使用
·A只限属性使用
·C只限类名使用
·M只限注释使用
Restrict默认值为EA，即可以通过元素名和属性名来调用指令。
四、AngularJS模型
Ng-model指令用于绑定应用程序数据到HTML控制器(input,select,textarea)的值。
可以将输入域的值与AngularJS创建的变量绑定。
<div ng-app=”myApp” ng-controller=”myCtrl”>名字：<input ng-model=”name”></div><script>Var app = angular.module(‘myApp’,[]);App.controller(‘myCtrl’,function($scope){$scope.name = “John Doe”;})</script>
1.双向绑定
双向绑定，在修改输入域的值时，AngularJS属性的值也将修改：
<div ng-app=”myApp” ng-controller=”myCtrl”>名字：<input ng-model=”name”><h1>你输入了：{{name}}</h1></div>
2.验证用户输入
<form ng-app=”” name=”myForm”>Email:<input type=”email” name=”myAddress” ng-model=”text”><span ng-show=”myForm.myAddress.$error.email”>不是一个合法的邮箱地址</span></form>
*以上实例中，提示信息会在ng-show属性返回true的情况下显示。
3.应用状态
Ng-model指令可以为应用数据提供状态值(invalid,dirty,touched,error)：
<form ng-app=”” name=”myForm” ng-init=”myText = ‘test@runoob.com’”>Email:<input type=”email” name=”myAddress” ng-model=”myText” required><p>编辑邮箱地址，查看状态的改变。</p><h1>状态</h1><p>Valid:{{myForm.myAddress.$valid}}(如果输入的值是合法的则为true)。</p><p>Dirty:{{myForm.myAddress.$dirty}}(如果值改变则为true)。</p><p>Touched:{{myForm.myAddress.$touched}}(如果通过触屏点击则为true)。</p></form>
4.CSS类
Ng-model指令基于它们的状态为HTML元素提供了CSS类：
<style>Input.ng-invalid{Background-color: lightblue;}</style>
<form ng-app=”” name=”myForm”>输入你的名字：<input name=”myName” ng-model=”myText” required></form><p>编辑文本域，不同状态背景颜色会发生变化</p><p>文本域添加了required属性，该值时必须的，如果为空则是不合法的。</p>
Ng-model指令根据表单域的状态添加/移除以下类：
·ng-empty
·ng-not-empty
·ng-touched
·ng-untouched
·ng-valid
·ng-invalid
·ng-dirty
·ng-pending
·ng-pristine
