angular.js是一个前端的MVC框架，12年的时候曾近在一个portal平台的项目中使用过。
下面给出一个angular.js的典型例子，涵盖一些基础的知识点，用以复习备忘：
<html ng-app = "myapp" > <head> <script src="angular.js"></script> </head> <!--ng-controller 定义body内使用该控制器 --> <body ng-controller="userlist"> <div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--ng-model 定义数据模型 --> Search: <input ng-model="key"> </div> <div class="span10"> <ul> <!--filter 实现过滤 --> <li ng-repeat="user in users | filter:key"> <user name = 'fredric'></user> </li> </ul> </div> </div> </div> <script> //使用模块 var app = angular.module("myapp", []); //自定义指令 app.directive('user', function() { var directive = {}; directive.restrict = 'E'; directive.template = "name: <b>{{user.name}}</b> , password: <b>{{user.password}}</b>"; return directive; }); //定义服务 app.factory('encrypt', function() { var factory = {}; factory.encrypt01 = function(password) { return '***********'; } return factory; }); //定义控制器 app.controller("userlist", function($scope, $http, encrypt) { $http.get("http://localhost:3000/test") .success(function(response) { //使用服务 for(var i = 0; i < response.length; i++){ response[i].password = encrypt.encrypt01(response[i].password); } $scope.users = response; }); }); </script> </body> </html>
总结：
我认为用面向对象的工程来理解angular.js会更加容易：
ng-app:定义模块化，其中value和constent定义这个模块的全局变量，在module方法里描述这个模块的依赖（包含哪些服务、控制器等）；
ng-controller:描述这个模块中的不同的类，controller本身类似这个类的构造函数，ng-model是这个类的成员，$scope可以理解为this指针；
ng-directive:理解为UI widget；
service:不同类（controller）之间的公共方法，类似utils模块；
html:原本的html变为了视图，通过model即指令，呈现出模板的概念；
其他诸如filter oute等，我觉得都可以理解成为一些小的特性库，对整个angular.js的架构无伤大雅。