虽然已经使用了不短的时间 ，但对于AngularJS的了解还很浅，也没有系统的学习过，下面慢慢来，系统的梳理一遍AngularJS，顺带学习点之前几乎没有自己写过的filter directive service 等相对来说比较高级的特性。废话少说，第一篇就来看看如何开始使用AngularJS 。

简单来说，只需两步，就能用上高端大气上档次的基于MVC的AngularJS：

1. index.html：
<!doctype html>
<html lang="zh-cmn-Hans">
<head>
    <base href="../">
    <!-- 这里我们省略了各种<meta>标签 -->
    <title>Learn AngularJS</title>
</head>
<body ng-app="LearnModule" ng-cloak>
    <div ng-controller="FirstController">
        <!-- 通过{{ }}形式取$scope.person.name并渲染 -->
        <p>My Name Is {{ person.name }}.</p>
    </div>
    <div ng-controller="SecondController">
        <p>There Is {{ money }} Money.</p>
    </div>

    <script src="angular-1.3.15/angular.js"></script>
    <script src="index.js"></script>
</body>
</html>
2. index.js：
//声明module
var app =angular.module("LearnModule", []);
//声明第一个controller
app.controller("FirstController", [ //指定需要注入的模块
    "$scope",
    function($scope) {
        $scope.person = {};
        $scope.person.name = "Lucy";
    }
]);
//声明第二个controller
app.controller("SecondController", [
    "$scope",
    "$filter",
    function($scope, $filter) {
        $scope.money = $filter("currency")(12.5);
    }
]);

注意以下三点：

  1. 在一个html页面中只允许存在一个module，可以在一个module下声明多个controller，通过在 html中使用ng-controller指令来指定使用哪个controller。

  2. 在声明controller时用到了AngularJS的依赖注入特性，通过 [] 中的字符串形式显式声明我们依赖哪些模块，并在 [] 中最后的function中传入，当然，function($scope,$filter)中的参数名都是可以自定义的，但原则上与注入名称相同。

  3. $scope对象在AngularJS中充当数据模型（M），但与传统的数据模型不一样，$scope并不负责处理和操作数据，它只是视图（V）和html（V） 之间的桥梁和纽带。

完。

参考资料：

《AngularJS 权威教程》 作者：Ari Lerner 译者：赵望野 徐飞 何鹏飞