再识angular

angular中有三个对象非常重要：directive，service，controller

service（服务）：它可以称的上一个对象或函数（单例对象）,它会被传来传去，保证你（controller，directive）每次访问到都是同一个值（内部的数值），你既可以使用angular内建的服务，也可以自己创建服务。

内建的有：$http，$location，$timeout，$interval...

自己创建服务案例：

<div ng-app="myApp" ng-controller="myCtrl">  <p><input type="text" placeholder="firstName" ng-model="firstName"></p>  <p><input type="text" placeholder="lastName" ng-model="lastName"></p>  <p><button add-button>Add</button></p>  <ul>    <li ng-repeat="x in users">{{x.firstName + '.' + x.lastName}}</li>  </ul></div>

service代码：

var app = angular.module('myApp', []);app.service('User', ['$rootScope', function($rootScope){  var service = {    users = [      {firstName: 'Hello', lastName: 'world'},      {firstName: 'Hi',  lastName: 'world'},    ],    addUser:function(user){      service.users.push(user);      $rootScope.$broadcast('users.update');    }  }  return service;}]); 

 controller：控制器，控制angularjs应用程序的数据，它是一个JavaScript对象，用构造函数创建的，它自身不会处理 'request'，除非它是用来处理路由的。controller纯粹的用来把service、依赖关系、以及其他对象串联到一起，然后通过scope 绑定到view（html）上

app.controller('myCtrl', ['$scope', 'User', function(scope, User){    scope.$on('users.update', function(event){      scope.users = User.users;      scope.$apply(); //    })    scope.users= User.users;}]);

directive：创建自定义指令，是一个强大的工具，可用来修改DOM，最好不要在controller中操作DOM，以方便代码重构，随着业务的增加和处理复杂性的增加，我们可以把力气放到处理复杂的应用上，directive也是进行用户交互很好的选择

app.directive('addButton', ['User', function(User){    return {      restrict : 'A',      link : function($scope, element, attrs){        element.bind('click', function(){          User.addUser({firstName: $scope.firstName, lastName: $scope.lastName});        });      }    }}]);

最后普及一下：

directive中restrict的值：

A：只有属性可以使用

C：只有类名可以使用

E：只有元素名可以使用

M：只有注释可以使用

默认值是EA（不是游戏公司哦！！）

原标题：再识angular

关键词：