Angular Learning (13)--component

Reprint please specify source address: http://blog.csdn.net/lastsweetop/article/details/56285838 Understanding Components

In Angularjs, component is a special kind of directive, which is simpler to configure, and is ideal for a modular app architecture. Using Web Components and the angular-style app architecture makes it easier to write apps.

Component advantages: More rigorous than ordinary directive, more standardized and more suitable for component architecture component easier to upgrade to ANGULAR2

Situations that do not use component require directive to be executed at the compile and pre-link stages, because component is not available at this time when you need directive to have a defined option, such as priority, terminal, Multi-Element when you need to directive the creation and configuration of components by attributes, CSS class instead of elements

Components is registered by ANGULARJS module using the. Component () method. This method takes 2 parameters: the name of the component (String type) component The Configuration object (note, and. Directive () is not the same as a factory method but only a configuration object)

Heroapp.html:

<! 
DOCTYPE html> 
<span>name: {{{$ctrl .hero.name}}</span>

1 1 comparison of definitions between directive and component

Property	Directive	Component
Bindings	No	Yes (binds to Controller)
Bindtocontroller	Yes (Default:false)	No (use bindings instead)
Compile function	Yes	NO
Controller	Yes	Yes (default function () {})
Controlleras	Yes (Default:false)	Yes (default: $ctrl)
Link functions	Yes	No
Multielement	Yes	No
Priority	Yes	No
Replace	Yes (deprecated)	No
Require	Yes	Yes
Restrict	Yes	No (restricted to elements only)
Scope	Yes (Default:false)	No (scope is always isolate)
Template	Yes	Yes, injectable.
Templatenamespace	Yes	No
Templateurl	Yes	Yes, injectable.
Terminal	Yes	No
Transclude	Yes (Default:false)	Yes (Default:false)

Modular App Architecture

As mentioned earlier, component makes it easier to build an app with a component architecture, and beyond that component has the following capabilities: Component can only control its own views and data: component does not modify any data or DOM other than its own scope. In general, it is practical to use scope inheritance and watch to modify data anywhere in Angularjs, but it can also make it difficult to identify which part is responsible for modifying the data. This is why component uses isolation scopes and therefore does not perform all scope operations.

Component has well-defined public api-input and output: The isolation range is not all, because ANGULARJS is two-way bound. If you pass an object to an assembly, like bindings: {item: ' = '}, and then modify the object's properties, the modification is reflected in its parent component. But for component, component did just modify the data in its own scope. This makes it clear exactly when the data is being modified. In this regard, component follows some simple conventions:

Enter the < and @ bindings you want to use. The < symbol after 1.5 indicates one-way binding, and = The difference is that the properties it binds are not watch in the scope of the component, which means that you can set a new value for the property within the scope of component, which does not update the values in the parent scope. But if the scope of the parent scope and component refer to the same object, such as if you modify an object's attributes or elements in an array in component, the change will still be reflected in the parent scope. Therefore, do not modify the attributes and array elements of an object within the component after the < is bound. You can use the @ binding when you enter a value that is a string, especially if the value of the binding does not change.

Bindings: {
    hero: ' < ',
    comment: ' @ '
}

1 2 3 4 1 2 3 4

The output is bound using &, and the bound function is used as the callback function for the component event

Bindings: {
    onDelete: ' & ',
    onUpdate: ' & '
}

1 2 3 4 1 2 3 4

Without manipulating the input data, component can invoke the corresponding output event to change the output data. For example, delete, not hero themselves delete themselves, but through the corresponding events to pass themselves to the Father component

<!--note ' We use kebab-case for bindings in the template as usual--> <editable-field on-update=
' $ctrl. u Pdate (' location ', value) ' ></editable-field><br>
<button ng-click= ' $ctrl. OnDelete ({hero: $ Ctrl.hero}) ">Delete</button>

1 2 3 1 2 3

This way, the parent component to determine what the event does (delete Item or update property)

Ctrl.deletehero (Hero) {
    $http. Delete (...). Then (function () {
        var idx = ctrl.list.indexOf (Hero);
        if (idx >= 0) {
            ctrl.list.splice (idx, 1);}}
    ); 

1 2 3 4 5 6 7 8 1 2 3 4 5 6-7 8

The

component has a well-defined lifecycle: each component can implement lifecycle hooks, which is invoked at the corresponding point in the component lifecycle, and the hook method that can be implemented is as follows: $onInit ()  - After all controller constructs on the element and all bindings are initialized, each controller calls the hook method before the prefix & function link on the element. This is a good place for controller to write some initialization methods $onChanges (Changesobj)  -when a one-way binding update is invoked, Changesobj is a hash key value pair, and key is the name of the bound property that has been modified. Value is an object, the format is {currentvalue, Previousvalue, Isfirstchange ()}, using this hook to trigger only updates within the component, such as cloning the object of the binding property to prevent it from being accidentally updated externally $doCheck (  -is invoked in every digest loop, providing an opportunity to validate or do some action when the data changes. Any action you wish to make, such as a response to a change, must be invoked through this hook. When $onchanges is called, implementing this hook doesn't work. For example, if you want to implement a depth equal function check, or check a Date object, he will be very useful, because this is ANGULARJS change detector detects this change, natural $onchanges will not be called. This hook does not contain any parameters, so if you want to detect changes, you need to store the previous value and then compare it to the current value.