ANGULARJS Study notes-Components, $http, $q, module

1-Components

Create the component, use the Conponent () method of the Angularjs module, component (name,options), register the component definition with the compiler, and represent a separate UI component in the application. Component definitions typically consist only of templates and controllers. Name is the component name, options defines the object for the component, and its properties include: Controller (the name of the director that should be associated with the newly created scope or the registration controller passed as a string), Controlleras (used to refer to the controller's identifier name within the scope of the component), template (HTML template as a string or function returns an HTML template as a string, should be used as the content of this component, default to an empty string), Templateurl (path or function that returns a path to an HTML template that should be used as the content of the component), bindings (defines the binding between DOM properties and Component properties, component properties are always bound to component controllers), transclude (whether content disclosure is enabled), Require (a controller that requires additional instructions and binds it to the controller of that component), $ ... (Additional properties attached to Directive factory functions and controller constructors, component routers for annotations)

Example of defining a component: var mymod = angular.module (' PhonecatApp1 ', []);//1mymod.component (' MyComp ', {    Template: ' <div>my Name is {$ctrl .name}}</div> ',    controller:function () {        this.name = ' Shahar ';    }}); /2mymod.component (' MyComp ', {    template: ' <div>my name ' is {{$ctrl .name}}</div> ',    bindings:{name: ' @ '}});//3mymod.component (' MyComp ', {   templateurl: ' views/my-comp.html ',   controller: ' Myctrl ',   Controlleras: ' Ctrl ',   Binds:{name: ' @ '}})

PS: When you define a component, its name can be a mycomp-like component, but when introduced in HTML, you need to use a similar <my-comp></my-comp> form of a naming method.

Implement UL phone list using component form:

component.html File: <! DOCTYPE html>Angular.module (' Phonecatapp ', []);
Component.js:angular.module (' Phonecatapp '). Component (' phonelist ', {Template: ' <ul> ' + ' <li ng-repeat = "phone in $ctrl. Phones" > ' + ' <span>{{phone.name}}</span> ' + ' <p>{{phone.snippet}}&             Lt;/p> ' + ' </li> ' + ' </ul> ', Controller:function Phonelistcontroller () {this.phones = [            {name: ' Nexus S ', snippet: ' The Next,next Generation tablet. '            }, {name: ' Motorola XOOM with WiFi ', snippet: ' The Next,next Generation tablet. '            }, {name: ' MOTOROLA XOOM ', snippet: ' The Next,next Generation. '    }        ]; }});

　　

2--$http

$http ({    URL: ' Data.json ',   //can use JSON file to simulate    method: ' GET ', params:{  ' username ': ' Tan '}}). Success ( function (data,header,config,status) {  //Response succeeded}). Error (function (data,header,config,status) {//Processing response failed});

　　

  Modify all message status to read    function initialize () {        var deferred = $q. Defer ();//Generate deferred asynchronous object        $http ({            URL: '/api/ Message/initialize ',            method: ' POST '        }). Success (function (result) {            deferred.resolve (result); Execute here, change the deferred state to execute successfully, return result for the data taken from the background, can proceed to then, do        }). Error (function result {            Deferred.reject (result);//execute here, change the deferred state to execute failed, return data for error, can continue to execute fail        });        Return deferred.promise;//acts as a protection, does not allow the function outside to change the deferred state of the function body, control the completion of asynchronous execution    }

The Ps:url is an absolute or relative request target. The params (string map or object), which is converted to a query string appended to the URL, is serialized by JSON if it is not a string. The data represents the transformed response body. Status indicates the HTTP status code of the response, headers This function is the getter function of the header information and can accept a parameter for obtaining the corresponding name value. The Config object is used to generate the complete set object for the original request. The statustext is the HTTP status text for the response.

Ps:

$q callback control deferred for AJAX asynchronous request data. A promise implementation of its own package in Angularjs. A built-in service that can execute functions asynchronously, allowing the return value of a function to be used or returning execution status notifications when a function finishes or an exception.

$q Common method: Defer () Creates a deferred object that can perform several common methods, such as Resolve, Reject, notify, all () an array of incoming promise, batch execution, return a Promise object, when () Pass in an indeterminate parameter and return a Promise object if the promise standard is met. Three states defined in promise: completion status, wait state, deny status. The state change is irreversible, and the wait state can become a complete or reject state.

Promise/deferred: Commitment/delay

Promise helps developers write asynchronous code in a synchronous way. A pre-defined definition of the outcome of the execution, if something succeeds, the failure to do something, like a prior commitment.

Defer, delay, $defer () You can create an defer deferred object instance that represents the object that will complete the task. $Q, use the Resolve method to become the completion state, using the Reject method to become a deny state.

3--module

The module is the entrance to the ANGULARJS code, first declaring the module before defining other component elements in the ANGULARJS, such as controller, service, filter, Directive, Config code block, Run code block, and so on.

Angular.module () can pass in three parameters: the name of the module (the required parameter, can be injected elsewhere or declare the application Master module in the Ngapp Directive), the module's dependencies (the parameters of other modules that the module depends on, if there is no declaration here, Any component of the dependent module cannot be used in the module), the module's start-up configuration function (called in the Angularjs config phase to instantiate the specific configuration of the component in the module before the instance of the object, such as the routing information for the $routeprovider configuration).

Reference Learning and thanks:

Https://docs.angularjs.org/tutorial/step_00

Http://www.runoob.com/angularjs/angularjs-tutorial.html

ANGULARJS Study notes-Components, $http, $q, module