再识angular

Posted 2020-06-27 风的味道

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（不是游戏公司哦！！）