Angular in action

Contents

• Basic Concept
• Data-binding
• Dependency Injection
• Controller (UI logic)
  
  • $scope
  • Hierarchy
  • How to use
• Service (Business logic)
  
  • feature
  • How to use
  • Create a Service
• Router
• Directive (Custom HTML Elements and Attributes)
  
  • Basic
  • Passing Data into a Directive
  • Built-In Directives
  • Explained
• Others
  
  • ngModel
  • Filter
  • Form validation
  • XHR
  • Promise
  • Animation
  • The Digest Loop and $apply
  • Essential Extensions
  • Security
  • jqLite
  • Test
• 实际案例

demo

Basic Concept

• Template
• Directives <input ng-model="hehe" >
• Model
• Scope $scope.hehe = 'haha'
• Expressions {{ expression | filter1 | filter2 | ... }}
• Filter
• Controller
• Service $scope $http

Data-binding

• 
• 

Dependency Injection

angular.module('myApp')
    .directive('myDirective', function($timeout, UserDefinedService) {
    // directive definition goes here
    })
    .directive('mySecondDirective', ['$timeout', 'UserDefinedService', function($timeout, UserDefinedService){
    }])

Controller

$scope

• $rootScope
• $on, $emit, $broadcast

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 1;
  $scope.addOne = function(){
    $scope.greeting++;
  };
}]);
myApp.controller('DoubleController', ['$scope',function($scope) {
  $scope.double = function(value) { return value * 2; };
}]);

<div ng-controller="GreetingController">
  <button ng-click="addOne()">Add one</button>
  {{ greeting }}
</div>
<div ng-controller="DoubleController">
  Two times <input ng-model="num"> equals {{ double(num) }}
</div>

Hierarchy

// Scope 作用域
myApp.controller('MainController', ['$scope', function($scope) {
  $scope.timeOfDay = 'morning';
  $scope.name = 'Nikki';
}]);
myApp.controller('ChildController', ['$scope', function($scope) {
  $scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', ['$scope', function($scope) {
  $scope.timeOfDay = 'evening';
  $scope.name = 'Gingerbread Baby';
  $scope.parent = $scope.$parent.$parent.name;
}]);

<div class="spicy">
  <div ng-controller="MainController">
    <p>Good {{timeOfDay}}, {{name}}!</p>
    <div ng-controller="ChildController">
      <p>Good {{timeOfDay}}, {{name}}!</p>
      <div ng-controller="GrandChildController">
        <p>Good {{timeOfDay}}, {{name}}!</p>
        <p>{{parent}}</p>
      </div>
    </div>
  </div>
</div>

Service

• Feature：懒实例化、单利
• How to use
• 创建Service

Router ngRoute

demo

Directive

Basic

• Document Node Element Tag Attributes
  demo

Passing Data into a Directive

demo

Built-In Directives

• ng-href
• ng-src
• ng-disabled
• ng-checked
• ng-readonly
• ng-selected
• ng-class
• ng-style
• ng-if
• ng-show && ng-hide
• ng-repeat
• ng-bind
• ng-click

Explained

angular.module('myApp', [])
.directive('myDirective', function() {
    return {
        restrict: String,
        priority: Number,
        terminal: Boolean,
        template: String or Template Function: function(tElement, tAttrs) (...},
        templateUrl: String,
        replace: Boolean or String,
        scope: Boolean or Object,
        transclude: Boolean,
        controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... },
        controllerAs: String,
        require: String,
        link: function(scope, iElement, iAttrs) { ... },
        compile: return an Object OR function(tElement, tAttrs, transclude) {
            return {
                pre: function(scope, iElement, iAttrs, controller) { ... },
                post: function(scope, iElement, iAttrs, controller) { ... }
            }
            // or
            return function postLink(...) { ... }
            }
    };
});

restrict

• E (an element)
• A (an attribute, default) <div my-directive=”expression”></div>
• C (a class) <div class=”my-directive: expression;”></div>
• M (a comment) <– directive: my-directive expression –>

Scope

• false(default)
• true
• {}(isolate)
  demo1
  demo2

Transclude

<div sidebox title="Links">
    <ul>
        <li>First link</li>
        <li>Second link</li>
    </ul>
</div>

angular.module('myApp', [])
.directive('sidebox', function() {
    return {
        restrict: 'EA',
        scope: {
            title: '@'
        },
        transclude: true,
        template: '<div class="sidebox">\
            <div class="content">\
                <h2 class="header">{{ title }}</h2>\
                <span class="content" ng-transclude></span>\
            </div>\
        </div>'
    }
});

Require (string|array)

• no prefix
• ?
• ^
• ?^

Compile && Link

Compile

compile: function(tEle, tAttrs, transcludeFn) {
    var tplEl = angular.element('<div>' +
        '<h2></h2>' +
        '</div>');
    var h2 = tplEl.find('h2');
    h2.attr('type', tAttrs.type);
    h2.attr('ng-model', tAttrs.ngModel);
    h2.val("hello");
    tEle.replaceWith(tplEl);
    return function(scope, ele, attrs) {
    // The link function
    }
}

Link

link: function (scope, element, attrs) {
// manipulate the DOM in here
}

Controller (String or Function)

arguments: ($scope, $element, $attrs, $transclude)

Diffrence between Link and Controller

The link function provides isolation between directives, while the controller defines shareable behavior.

• The main usecase for a controller is when we want to provide reusable behavior between directives.
• The link function is only available inside the current directive, any behavior defined within is not shareable.

实际案例