Angular JS - Modularize

Posted on 2017-08-24 Edited on 2017-09-29

~~Edit~~

Angular JS模块化，主要借助于3个方式：directive, component, module

directive & 3 bindings

2-way binding “=”

function MyDirective() {
  var ddo = {
      scope: {
        myProp: '=attributeName'
      }
      ...
  };
  return ddo;
}

<!-- index.html -->
<my-directive attribute-name="outerProp">
</my-directive>
<!-- directive.html -->
<p>{{my-prop}}</p>

所有对attribute-name或者my-prop的改动，两个html里都会做同步修改

1-way binding “<” and “@”

function MyDirective() {
  var ddo = {
      scope: {
        prop: '<',
      },
      ...
  };
  return ddo;
}

与上面不同，这里只有index.html才能修改prop。

function MyDirective() {
  var ddo = {
  scope: {
    prop: '@',
  },
  ...
  };
  return ddo;
}

这里prop就只能绑定index.html里的属性变量，如下

<my-directive my-attribute="{{outerProp}}">
</my-directive>

可见my-attribute里面不能有变量（例如controller或者controller的成员）。而且和’<’类似，’@’也是单向的。

简化版的directive - component

angular.module('App', [])
.component('myComponent', {
    templateUrl: 'template.html',
    controller: CompController,
    bindings: {
        prop1: '<',
        prop2: '@',
        onAction: '&'
    }
});

语法基本与directive类似，用bindings取代了scope。

‘bindings’ object is the isolate scope param mapping definition.

isolate scope里面没有双向绑定了，明确了输入输出：

‘<’, ‘@’作为输入
‘&’作为输出，意思是通过用’&’注册callback来将输出送到相应的模块

使用’&’的基本方法

调用component的DOM写法。

<my-component
    prop1="val-1"
    prop2="@parentProp"
    on-action="parentFunction(myArg)">
    {{ $ctrl.prop1.prop }} and {{ $ctrl.prop2 }}
</my-component>

template的写法，component的写法如上一节的例子。

<div
    ng-click="$ctrl.onAction({myArg: 'val'})">
    {{ $ctrl.prop1.prop }} and {{ $ctrl.prop2 }}
</div>

注意：

onAction在标签里的写法是on-action
myArg在template中是key name。value值可以来自于controller($ctrl)，亦或bindings中的’<’, ‘@’，方法如下，通过inject controller。

angular.module('MenuApp')
.controller('ItemListController', ItemListController)
ItemListController.$inject = ['items']
function ItemListController(items, currentItem) {
  var list = this
  list.items = items
}

Components Lifecycle

$onInit – controller initialization code
$onChanges(changeObj) – called whenever one-way bindings are updated
- changeObj.currentValue, changeObj.previousValue
$postLink – similar to ‘link’ in directive
$onDestroy – when scope is about to be destroyed

Link for directive
DOM manipulation is usually done inside of the link function
Declared on the DDO
Link function does not support injection
To use injected components, services, inject them into directive
‘scope’ parameter is the exact $scope in directive’s controller
‘element’ object represents the element of the directive
Top level element
It’s jqLite object or jQuery object (if jQuery is included)

module

A module is a collection of services, directives, controllers, filters, and configuration information. angular.module is used to configure the $injector.

Create the module without dependency.

angular.module('module2', [])

Create with dependency.

angular.module('module3',
                ['module1', 'module2']);

Retrieve the module.

angular.module('module1')

ng-app = main module

<!DOCTYPE html>
<html ng-app='module3'>
…
</html>

Config and Run

angular.module('module1')
.config(function () {
    // Inject only Providers and constants
    …
});

angular.module('module1')
.run(function () {
    // Inject only instances (like services) and constants.
    …
});

module.config method fires before module.run method
All dependency modules get configured first
It doesn’t matter which modules are listed first as long as module declarations are listed before artifact declarations on that module

模块化

Splitting Javascript into Several Files.
每一个文件只包含一个artifact。在HTML中引入。