最近学习了一下关于AngularJs的知识，发现和Vue还是有非常相似的东西。所以对于学过Vue的自己来说，还是比较好理解的
特点：双向数据绑定，单页面应用
控制器：
AngularJs控制器可以控制网页上的DOM元素，也可以响应网页上的单击事件，这一切源于$scope,它是模型(ng-model)于视图(View)
的数据通道。其中$scope起到了一个数据传递作用。
而要实现控制器必须在DOM元素上加上ng-controller( Angular的一个指令), Controller于View是绑定在一起的。当Angluar加载时，它就会加载
读取ng-controller的参数。
模块：
AngularJs的一个非常重要的概念--Module,对于一个Angular应用来说，是由多个模块组成的。同时模块是存在可复用性，可在多个地方被调用。
模板：
这个地方是Angular比较重要的地方，（同时Vue中也是有的），对于一个项目模板是一个很重要的部分。它能动态的展示不同的视图（页面）。其中
要是使用模块这个功能就必须用到ng-template这个指令;同时使用模块这个一般和ng-view(管理视图）的指令一起使用
路由：
路由是什么，就是我们在应用上要实现页面的跳转，要实现这样的功能就需要使用路由来进行管理。在这里说明一下AngularJs1.2版本之后ngRoute被单独剥离出来，
需要进行重新引用。AngularJS的$route所提供的$routeProvider声明路由
工厂方法：
这个和java中的工厂方法有点类似，毕竟设计模式这样。就是如果一个对象$scope.xxx要在多个地方调用，就需要去把这个对象个做成单例对象。而在AngularJs里面实现
这种最简单的方式就是调用factory();通过factory()来返回对应的属性方法。
提供一个案例来供分析：
<!DOCTYPE html> <html ng-app="myApp"> <head> <title> Hello World in AngularJs </title> <script src="js/angular.min.js"></script> <script src="js/angular-route.js"></script> <!-- <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> c‘f --> </head> <body> <div ng-view></div> <script type="text/ng-template" id="/todos.html"> <ul> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.completed"> <a href="#/{{ $index }}"> ID{{ id }}</a> </li> </ul> </script> <script type="text/ng-template" id="/todoDetails.html"> <h1>{{ todo.name }}</h1> completed: <input type="checkbox" ng-model="todo.completed"> note: <textarea>{{todo.note}} </textarea> </script> <script>
// 创建模块 var app = angular.module(‘myApp‘, [‘ngRoute‘]); // 创建工厂方法 实例一个公用对象 app.factory(‘Todos‘, function () { return [ { name: ‘掌握 HTML/CSS/javascript‘, completed: true }, { name: ‘学习 AngularJS‘, completed: false }, { name: ‘熟悉 NodeJS ‘, completed: true }, { name: ‘接触 ExpressJS‘, completed: false }, { name: ‘搭建 MongoDB database‘, completed: false }, ] })
// 路由配置 app.config([‘$routeProvider‘, function ($routeProvider) { $routeProvider .when(‘/‘, { templateUrl: ‘/todos.html‘, controller: ‘TodoController‘ }) .when(‘/:id‘, { templateUrl: ‘/todoDetails.html‘, controller: ‘TodoDetailContrl‘ }) }]) app.controller(‘TodoController‘, [‘$scope‘, ‘Todos‘, function($scope, Todos) { console.log(‘llll‘); $scope.todos = Todos }]) app.controller(‘TodoDetailContrl‘, [‘$scope‘, ‘$routeParams‘, ‘Todos‘, function($scope, $routeParams, Todos) { console.log(‘xxx‘); $scope.todo = Todos[$routeParams.id] }]) </script> </body> </html>