AngularJs 学习 （一）
最近学习了一下关于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()来返回对应的属性方法。
过滤器：
格式 {{ name | xx}} xx: 过滤器得实现 xx一般有（ eg: filter: param), 如果表示否定要在参数(param)前加上！
控制器之间的传值：
从上面已经知道$scope是局部作用域，这样的话就不怎么利于控制器之间的传值。当然前面也提到通过工厂方法也可以实现，这就在Angularjs之中有这样的一个概念：
单例服务是AngularJS本身支持的数据和代码共享方式。因为是单例的，所有的控制器访问的便是同一份数据，从而可以很轻松地实现控制器之间地切换。
AngularJs数据的传输本身就提供了多种通信机制：
- 作用域继承：利用子控制器继承父控制器上的数据
- 注入服务： 把需要功效的数据注册成为一个服务（Service), 在需要的控制器中添加依赖注入
- 基于事件： 利用AngularJS的事件机制， 使用$on $emit 和 $broadcast;
其实之前的工厂方法就是基于注入服务实现的，接下来要介绍的一种是基于作用域继承的。$rootScope : ng-app 为AngularJS创建的作用域
$watch: 监控数据模型的变化
$scope.$watch(watchFn, watchAction, deepWatch);
watchFn: 被检测的对象
watchAction: 函数表达式， 发生变化时候被调用，会接收新旧两个值
deepWatch: 如果设置为true， 这个可选的布尔型参数将命令AngularJS去检测被监控的对象的每个数据是否发生变化。一般少用，集合多了，容易造成负载严重
提供一个案例来供分析：
<!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"> Search: <input type="text" ng-model="search"> <ul> <li ng-repeat="todo in todos | filter: search"> <input type="checkbox" ng-model="todo.completed"> <a href="#/{{ $index }}"> {{ todo.name }}</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']); // 创建工厂方法 实例一个公用对象 注入Todos服务 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', ['$rootScope', '$scope', 'Todos', '$filter', function($rootScope, $scope, Todos, $filter) { $scope.todos = Todos; $scope.$watch('search', function() { // 根作用域 相当全局作用域 $rootScope.data = $filter('filter')($scope.todos, $scope.search); }) }]) app.controller('TodoDetailContrl', ['$rootScope', '$scope', '$routeParams', 'Todos', function($rootScope, $scope, $routeParams, Todos) { $scope.todo = $rootScope.data[$routeParams.id]; }]) </script> </body> </html>
