你的位置:首页 > Java教程

[Java教程]再识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(不是游戏公司哦!!)