Angular study notes 04 theory plus practice

Scope: Boolean or object (default = False), true to inherit parent scope and create a new scope
Isolation scope
The primary usage scenario for directives with isolation scopes is the creation of reusable components that can be used in unknown contexts to make
and can avoid the external scope of the contamination or inadvertently pollute the internal scope.
Creating a directive with an isolation scope requires setting the scope property to an empty object {}. If this is done, the instructions
The template will not be able to access the external scope:

function () {    return  {    ' A ',    scope: {},    +,    ' <div> Inside mydirective {{myproperty}}</div> '    };});

Binding policy
To make the new instruction scope accessible to variables in the current local scope, you need to use one of the following three aliases.
Local Scope Properties: Use the @ symbol to bind the local scope to the value of the DOM property. @ (or @attr)

Two-way binding: = (or =attr) by = You can make two-way data binding on properties on a property on the local scope in the half-level scope.
Just like normal data binding, local properties reflect changes that occur in the parent data model.

Parent scope bindings through the & symbol, you can bind the parent scope to run the function in it. means that the
Values are set, a wrapper function is generated that points to the parent scope.
To make a call to a parent method with a parameter, we need to pass an object that is the name of the parameter, the value
is the content to pass to the parameter.
& (or &attr)

The transclude is an optional parameter. If set, its value must be true, and its default value is False.
Use Transclude:true only if you want to create an instruction that can contain arbitrary content.

The controller parameter can be a string or a function. When set to a string, the value of the string is the name,
To find the constructor of the controller registered in the app:

. directive (' mydirective ',function() {Restrict:' A ',//always needController: ' Somecontroller '})//other places in the application can be the same file or another file that is included in the index.htmlAngular.module (' myApp ')). Controller (' Somecontroller ',function($scope, $element, $attrs, $transclude) {//The controller logic is here .}); An inline controller can be defined inside the instruction by means of an anonymous constructor: Angular.module (' MyApp ', []). Directive (' Mydirective ',function() {Restrict:A, Controller:function($scope, $element, $attrs, $transclude) {//The controller logic is here .}});

1. $scope
The current scope associated with the directive element.
2. $element
The element that corresponds to the current instruction.
3. $attrs
An object that consists of the attributes of the current element. For example, the following element:
<div id= "Adiv" class= "box" ></div>
Has the following property objects:
{
ID: "Adiv",
Class: "Box"
}
4. $transclude
The embedded link function is pre-bound to the corresponding embedding scope.
Transclude link functions are functions that are actually executed to clone elements and manipulate the DOM.

//For example, we want to add a hyperlink tag through an instruction. can be implemented in//$transclude functions within the controller//now, as shown below:Angular.module (' myApp ')). Directive (' Link ',function() {return{restrict:' EA ', transclude:true, Controller:function($scope, $element, $transclude, $log) {$transclude (function(clone) {varA = angular.element (' <a> ')); A.attr (' href ', Clone.text ()); A.text (Clone.text ()); $log. info ("Created new a tag in link directive"); $element. append (a);} );;};});

The Controlleras parameter is used to set the controller's alias name to publish the controller, and the scope can be visited
Ask Controlleras. This allows the controller to be referenced in the view, even without the need to inject $scope.

The Require parameter can be set to a string or an array, and the string represents the name of another instruction. Require will control the
The device is injected into the instruction specified by its value and acts as the fourth parameter of the link function of the current instruction.

The value of the require parameter can be decorated with the following prefix, which alters the behavior of the lookup controller:
?
If the required controller is not found in the current instruction, NULL is used as the fourth parameter passed to the link function.
^
If the ^ prefix is added, the directive looks for the controller specified by the require parameter in the upstream instruction chain.
?^
Combining the behavior of the previous two options, we can optionally load the required directives and find them in the parent chain of instruction.
No prefix
If there is no prefix, the instruction will be found in the controller provided by itself, if no controller (or
command with the specified name) throws an error.

Routing
We can use the when and otherwise two methods provided by Angularjs to define the route of the application.

The $http service is a function that accepts only one parameter, which is an object that contains the data used to generate the HTTP request.
Configuration content. This function returns a Promise object that has a success and error two methods.

' GET ''/api/users.json '}). Success (function(data,status,headers,config) {   called when the corresponding readiness is ready). Error (function(data,status,headers,config) {//  Called when the response is returned in an error state });

Because the $http method returns a Promise object, we can use the then method to handle the callback when the response returns. If
Using the then method, you get a special parameter that represents the success or failure information for the corresponding object, and you can accept two
Optional function as the parameter. Alternatively, you can use the success and error callbacks instead.

Promise.then (function(resp) {//RESP is a response object},function(resp) {//resp with error messages});//or use the Success/error methodPromise.success (function(data, status, headers, config) {//handling a successful response});//Error HandlingPromise.error (function(data, status, headers, config) {//handling a non-successful response});

//Angularjs cross-domain issues//1: Using Jsonp$http. JSONP ("Https://api.github.com?callback=JSON_CALLBACK"). Success (function(data) {//Data});//2: Using CorsAngular.module (' myApp '), []). config (function($httpProvider) {$httpProvider. Defaults.usexdomain=true;Delete$httpProvider. defaults.headers.common[' X-requested-with '];}); You can now send a cors request. $http. Get ("Https://api.github.com"). Success (function(data) {//Data});

// non-simple requests in angularjs look no different from normal requests: $http. Delete ("HTTPS://API.GITHUB.COM/API/USERS/1"). Success (function(data) {//  data }); // get JSON data $http. Get ('/v1/messages.json '). Success (function= data[0  = data[0].state;});

With token authorization for client authentication, the server needs to provide an authorization token to the client application.
The token itself is a random string generated by the server, consisting of numbers and letters that are associated with a particular user session.
The UUID library is a good choice for generating tokens.

Angular study notes 04 theory plus practice