再識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（不是遊戲公司哦！！）