"Angularjs Advanced Program Design" study notes

First, ANGULARJS application analysis

　　Angularjs has some of the most important artifacts, such as models, views, and controllers. But Angularjs also has many other parts that are flexible to use, including modules, directives, filters, factories and services.

　　One. 1 Dependency Injection

Without dependency injection (dependencies injector), you have to somehow find the components you need, and you will probably have to use global variables. Although it can work like this, it is not as simple as Angularjs's dependency injection. Dependency injection, which can be implemented by declaring a dependency on the parameters of a component's factory function, uses parameters to present the requirement: "hey! Angularjs brother, I need a widget like this! "

function($scope, $timeout) {    //Hey, AngularJS i need $scope, and $timeout    // for me to run normally, Could you please prepare these two components for me first? })

　　The primary benefit of dependency injection is to angularjs the secondary management component and provide it to the appropriate function when needed. Dependency injection also brings benefits to testing.

I. 2 worker and worker functions　

　　Simple concept: Angularjs calls the factory function when it is necessary to build the artifact, and calls the worker when it needs to be used . The equivalent of a factory function is a mold, and a worker is a body made out of this mold. Factory functions are responsible for creating objects that perform work, and factory functions tend to return a worker function. In this example, the first function is the factory function, and the return content is a worker (object instance).

function() {    function// }})   

　　One. 3. 1 Working with Modules

As applications become more complex over time, we need to use modules to enable us to perform more effective, editorial management testing and work with our programs. The module has three main roles: 1. Associates a ANGULARJS program with a portion of an HTML document (Ng-app scope). 2. Help us organize the code and components in the ANGULARJS application

var app = Angular.module ("myApp", ["app"). Controllers "," app. Filters "," app. Servers "," app. Directive "]);..

　Where these dependencies do not have to be defined in a particular order. But Angularjs will guarantee that these dependent modules (app modules here) will first invoke their (app module) dependencies ("app"). Controllers "," app. Filters "," app. Servers "," app. Directive ") of the callback function. The equivalent of a guy who wants to assemble a four-wheel drive, he'll get the wheels, the body, the batteries, and so on.

　　One. 3.2 Config and run

The Config method accepts a function that is called after the corresponding module is called. The Config method often configures the module by injecting values from other services

App. Config (function ($httpProvider) {   //...})

　　The Run method will also accept a function, but the function will not be called until all modules have been loaded and their dependencies are resolved.

App.run (function ($rootScope) {   //...])

　Execution order-an example

Config callback function for app.servives module

Config callback function for app module

The run callback function of the App.servives module

The run callback function of the app module

Second, angularjs instruction system

　　Ii. 1 Data Binding class directives

The data binding class directive is responsible for performing data binding, which is using the values in the model and inserting it into an HTML document.

1. Ng-bind-template everyone knows that Ng-bind will replace the content of the element it is used in, and Ng-bind is limited to an expression that can only handle a single data binding <span ng-bind= "bool" ></span,

Flexible ng-bind-template can be used when multiple data bindings need to be created

<div ng-bind-template= "First: {{my.mum}} and {{My.dad}}" >

2. ng-non-bindable Block Inline Data binding

Angularjs is not the only JavaScript package that uses the {{ }} symbol, so if you use multiple libraries at the same time, you may encounter problems, or I just want to output "{{ }}" that matches. Angularjs does not error when a request is bound to a non-existent model property. For example  angularjs uses {{and}} characters for tempalte  will be replaced with  angularjs uses characters for tempalte , so using ng-non-bindable can solve this problem for us, the following instances will output  angularjs uses {{and}} characters for tempalte 

<div ng-non-bindable> for     tempalte</div> 

Ii. 2 template class directives

1. Ng-repeat

<li ng-repeat= "(key, value) in item" >      {{key}} = {{value}}</li> 

　　　　When the traversal target is an object, the key is the current property name, and value is the object's property. When a traversal target is a collection (such as an array), key is the current traversal subscript (starting at 0), and value is the values of the collection

Built-in variables for ng-repeat

$index: Returns the current traversal subscript

$first/$last: Returns True if the current object iterates through the first/last element of the collection

$even/$odd: Returns True if the current object iterates through the first and second elements of the collection.

$middle: Returns True if the current object iterates through the middle element of the collection (not the first or last element)

Ng-repeat + ng-if

we can no longer use ng-repeat on the same element that the instruction is applied to. Span class= "Cnblogs_code" style= "FONT-SIZE:14PX;" ><li ng-repeat= "item in Objs "Ng-if=" item.exist <li Ng-repeat= "item in Objs | Filter: {exist: ' true '} ' >{{item.name}}</li> 

2. Ng-include

<ng-include src= "' template.html '" ></ng-include> note that there is a hole here, and there is a single quotation mark inside the double quotation mark.

Configuration parameters for Ng-include

SRC: Specifies the url;onload of content loaded: Specifies the evaluation expression that is called after the content is loaded; AutoScroll: Specifies whether to scroll to the area of this section of the view when the content is loaded (note: Xiao Peng I found this configuration parameter is not running during the experiment. Do not know where to quote the wrong)

Ng-include VS Ng-switch

The ng-switch is suitable for use when the complexity is not high and the content is small. Ng-include is useful for pages with more complexity and content, but when the first load occurs, ANGULARJS uses AJAX to request the template, so there is a delay.

　　Ii. 3 event class directives

We can handle the different events that occur on the same element by resolving the Event.type property in the event object <li ng-repeat= "item in Items" ng-mouseenter= "Handle ($event)" Ng-mouseleave= "Handle ($event)" >. However, it should be noted that there is a mismatch between the event name used by ANGULARJS for the event instruction and the Type property of the underlying event. For example ng-mouseenter= "handle ($event)" but his Event.type = = "MouseOver". Therefore, when dealing with such situations, we should first confirm the underlying name of the event.

$scope. Handle (Event) {   console.log (Event.type)}

Two, 4 Boolean attribute class directives

　　Ng-check Manage checked properties (input= "checkbox")

ng-diabled managing disabled attributes (input and button elements)

Ng-open Managing the Open property (detail Element)

Ng-readonly managing readonly attributes (INPUT Element)

ng-selected Manage selectes attributes (option Element)

　　

Data reference:

"Angularjs Advanced Program Design"

"Angularjs Advanced Program Design" study notes