AngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库，是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架，因为它的核心其实是对HTML标签的增强。
一.说明
1、何为HTML标签增强？
其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。
2、什么又是动态web应用呢？
与传统web系统相区别，web应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。
为了实现这些，ng引入了一些非常棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定，能够让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。
二.什么时候该用AngularJS
AngularJS是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如jQuery）合作融洽。
各个 angular.js 版本下载：https://github.com/angular/angular.js/releases
三.AugularJS特性
AngularJS有五个最重要的功能和特性：
3.1特性一：双向的数据绑定
什么是数据双向绑定？即是页面请求，后台返回数据动态更新页面并显示。
对于AngularJS而言，数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的，毫不影响的应用到web应用中。
这里有一个非常简单的例子，用来演示一个input输入框和<h1>元素的双向绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>3.2特性二：模板
在AngularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。
HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。所有的指令都负责针对view来设置数据绑定。
1、插值表达式语法：写在双大括号内{{ expression }}。
插值表达式可以把计算的字符串插入HTML中，也可以作为属性值来使用。
<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
<img src="{{imageUrl}}" style="height:30px">
</div>2、验证用户输入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
<p>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>
</body>
</html>3、ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类。
4、表达式中添加过滤器
demo：currency 过滤器将数字格式化为货币格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="costCtrl">
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.quantity = 1;
$scope.price = 9.99;
});
</script>
</body>
</html>注意：HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>
</body>
</html>3.3 特性三：MVC模式
针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC，更接近于MVVM（Model-View-ViewModel)。
1、AngularJS 应用：
（1）AngularJS 模块（Module） 定义了 AngularJS 应用。
（2）AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
（3）ng-app指令指明了应用, ng-controller 指明了控制器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<p>尝试修改以下表单。</p>
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
// 模块定义应用
var app = angular.module('myApp', []);
// 控制器控制应用
app.controller('myCtrl', function($scope) {
// $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
</body>
</html>2、Scope 是一个对象，有可用的方法和属性。
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>姓氏为 {{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
<p>注意 $rootScope 在循环对象内外都可以访问。</p>
</body>
</html>3、AngularJS 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页 Web 应用（single page web application，SPA）。
通常我们的 URL 形式为 http://runoob.com/first/page，但在单页 Web 应用中 AngularJS 通过 #! + 标记 实现，例如：
http://runoob.com/#!/first
http://runoob.com/#!/second
http://runoob.com/#!/third具体实现如下：
（1）载入了实现路由的 js 文件：angular-route.js。
（2）使用 ng-view 指令。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例 - 菜鸟教程</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#!/">首页</a></li>
<li><a href="#!/computers">电脑</a></li>
<li><a href="#!/printers">打印机</a></li>
<li><a href="#!/blabla">其他</a></li>
</ul>
<div ng-view></div>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>3.4 特性四：服务和依赖注入
1、内置服务
AngularJS功能最基本的组件之一是服务(Service)。服务为你的应用提供基于任务的功能。服务可以被视为重复使用的执行一个或多个相关任务的代码块。
AngularJS服务是单例对象，这意味着只有一个实例被创建过，服务使用AngularJS的依赖注入机制来定义和注册。可以把服务注入模块、控制器和其它服务。AngularJS 常见的内置服务
2、依赖注入
依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
（1）value：是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）。
（2）factory：是一个函数用于返回值。在 service 和 controller 需要时创建。通常我们使用 factory 函数来计算或返回值。
（3）service：服务，用于注入factory。
（4）provider：通过 provider 创建一个 service、factory等(配置阶段)。Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
（5）constant：(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。
3.5 特性五：指令（Directives）
指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。
下面介绍通用的指令：
| ng-app | 定义一个 AngularJS 应用程序。 |
| ng-model | 把元素值（比如输入域的值）绑定到应用程序。 |
| ng-bind | 把应用程序数据绑定到 HTML 视图。 |
| ng-init | 初始化 AngularJS 应用程序变量。 |
| ng-repeat | 会重复一个 HTML 元素，类似于遍历。 |
| ng-option | 创建下拉列表，列表项通过对象和数组循环输出。 |
| ng-disabled | 直接绑定应用程序数据到 HTML 的 disabled 属性。 |
| ng-show | 隐藏或显示一个 HTML 元素。 |
| ng-hide | 用于隐藏或显示 HTML 元素。 |
| ng-click | 定义了 AngularJS 点击事件。 |
| ng-include | 包含 HTML 内容。 |