The beast's angular Api learning, translating and understanding-Ngcloak, Ngcontroller, Nginit, Ngmodel

ng API Learning for Beasts-Ngcloak, Ngcontroller, Nginit, Ngmodel

Ngcloak

The NGCLOAK directive is designed to prevent the HTML template from being temporarily displayed when the angular application is loaded. This instruction can be used to avoid undesirable flicker effects caused by HTML template display.

Format: Ng-cloak class= "Ng-cloak"

Using code:

<div ng-cloak>{{' Hello World '}}</div>

<div class= "Ng-cloak" >{{' Hello World '}}</div>

NG has two types of binding data to the page, Ngbind and {Hash}},ngbind need a carrier (e.g. <span ng-bind= "' Hello World '" ></span>), and {{hash}} Way directly bound (for example: {' Hello world '}), ngbind binding, if the constant refresh or loading the page is too slow, there will be no binding expression flicker, but {{hash}} in the way there will be an expression flashing (not done in the interactive experience so perfect, Displays an expression that does not perform a calculation).

When using {{hash}} to resolve the expression flicker, it is necessary to use the Ngcloak directive, the implementation of the Ngcloak directive is to first set the binding element to Display:none, and then after the data is parsed and displayed. For more information, click Http://www.cnblogs.com/whitewolf/p/3495822.html to learn more.

Ngcontroller

The Ngcontroller directive attaches a controller class to the page. This is the key to how angular supports the MVC design pattern.

Format: ng-controller= "value"

The name of the Value:controller.

Using code:

<div ng-app= "Demo" >

<div ng-controller= "Testctrl" >

{{Greeting}}

</div>

</div>

<script>

Angular.module ("Demo", [])

. Controller ("Testctrl", ["$scope", function ($scope) {

$scope. Greeting = "Hello World";

}])

</script>

The Ngcontroller directive will define the controller on the JS to bind to the page element, then this element will have the controller to operate, binding various data in the controller's $scope, can be in the view of the Ngcontroller range hungry to bind and display.

Nginit

The NGINIT directive allows you to perform custom behavior (specifying an expression) within the current scope.

Format: ng-init= "value"

Value: An expression.

Using code:

<div ng-app= "Demo" >

<div ng-controller= "Democtrl" >

<div ng-repeat= "innerlist in List" ng-init= "Outerindex = $index" >

<div ng-repeat= "value in Innerlist" ng-init= "Innerindex = $index" >

<span class= "Example-init" >list[{{Outerindex}} [{{innerindex}}] = {{value}};</span>

</div>

</div>

</div>

</div>

<script>

This instruction is used to define values or expressions within a range. The example code above, for example, is to pass the index of the first loop into the second layer loop.

Ngmodel

The key to angular's bidirectional data binding. The controller created by the Ngmodel directive binds input, select, textarea (or custom form) to a property value on scope.

Ngmodel is mainly responsible for:

• Bind the view to the model, some directives like the requirements of input, textarea, or select.
• provides validation behavior.
• Keep the control state.
• Sets the relevant CSS class for the element, including animations.
• Registers control with the parent form.

Using code:

<div ng-app= "Demo" >

<div ng-controller= "Democtrl" >

<input ng-model= "Greeting" >

</div>

</div>

<script>

Angular.module ("Demo", [])

. Controller ("Democtrl", ["$scope", function ($scope) {

$scope. Greeting = "Hello World";

}])

</script>

The Ngmodel directive perfectly interprets the two-way data binding of angular, and many of the NG tutorials explain that bidirectional data binding will be used.

That is, when we change the value of the view, the corresponding value of the back end is changed as well.

Today is raining, the house writes the code of the day, when really rain or shine ah .... Programming this thing is addictive ....

The beast's angular Api learning, translating and understanding-Ngcloak, Ngcontroller, Nginit, Ngmodel