AngularJS誕生於2009年，由Misko Hevery 等人創建，后為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。
AngularJS有着諸多特性，最為核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。
-----------百度百科
下面做入門介紹，本篇主要以代碼的形式解析。
1.在web頁面引入angularJS的js文件。
可以通過官網下載，也可以在百度上搜索，建議從官網上下載。
http://www.angularjs.net.cn/這個中文網地址。上面也有相關教程。
2.代碼分析
下面是copy來的例子：
<!DOCTYPE html>
<html lang="en" ng-app="todoApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="angular.min.js"></script>
<script>
angular.module('todoApp', []) //定義模塊
.controller('TodoListController', function() { //定義控制器
var todoList = this;
todoList.todos = [ //定義一些初始化的屬性
{ text: 'learn AngularJS', done: true },
{ text: 'build an AngularJS app', done: false }
];
todoList.addTodo = function() { //定義方法
todoList.todos.push({ text: todoList.todoText, done: false });
todoList.todoText = '';
};
todoList.remaining = function() { //定義方法
var count = 0;
angular.forEach(todoList.todos, function(todo) { //遍歷todos
count += todo.done ? 0 : 1;
});
return count;
};
todoList.archive = function() { //定義方法
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) todoList.todos.push(todo);
});
};
});
</script>
</head>
<body>
<div ng-controller="TodoListController as todoList">
<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> [
<a href="" ng-click="todoList.archive"></a>
]
<ul>
<li ng-repeat="todo in todoList.todos">
<lable>
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</lable>
</li>
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" size="30" placeholder="請輸入新的項目">
<input type="submit" value="add">
</form>
</div>
<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>
</body>
</html>
其中ng-app是指定一個angularJS應用。
對應js代碼為：angular.module("todoApp",[]);定義一個module模塊
ng-controller指定一個控制器，指明該標簽下所有的子元素都歸該控制器管理。
對應js代碼為： .controller('TodoListController', function() {});定義一個控制器
一個ng-app可以定義多個控制器。
本例是通過var todoList=this;讓todoList代替了這個控制器。
通過定義todoList的屬性和方法向外暴露這個控制器的可用屬性和方法。
可以看見在html中是通過todoList屬性的名字對其進行引用的。
其中{{}}代表數據綁定。
ng-model：表示把前台是數據綁定到控制器中，當然后台初始化有數據，也會顯示在前台。
ng-submit：定義在form標簽中，代碼提交表單，也可以在button標簽添加ng-click達到同樣的效果。
ng-repeat：重復屬性，會對需要遍歷的元素生成對應個數的標簽。
上述例子中就會生成對應todoList數目的span標簽。
屬性應用直接是todoList.todos。