AngularJS syntax explanation (continued) _ AngularJS

This article continues with the previous article, and then introduces AngularJS syntax. like above, it uses examples to explain it to you. it is a very good article and I recommend it to you. Src and href attributes

In Angularjs, src should be written as ng-src, and href should be written as ng-href, for example:

The code is as follows:

Some text

Expression

In the template, you can perform simple mathematical operations, comparison operations, Boolean operations, bit operations, referenced arrays, and object symbols. although we can use expressions to do many things, however, expressions are executed using a custom interpreter (part of Angular), rather than using Javascript to execute eval () functions, so the limitations are great.
Although the expressions here are more rigorous than Javascript expressions, they have better fault tolerance for undefined and null. If an error occurs, the template simply does not display anything, instead of throwing an NullPointerException error. For example:

The code is as follows:

{Computer ()/10 }}

// Although it is legal, it puts the business logic in the template. this method should be avoided.

Differentiate UI and controller responsibilities

Controllers are bound to specific DOM fragments, which are the content they need to manage. There are two main ways to associate the controller to a DOM node, one is to declare in the template through ng-controller, the second is to bind it to a dynamically loaded DOM template fragment through a route. This template is called a view. We can create nested controllers. they can share data models and functions by inheriting the number structure. real nesting occurs on the $ scope object through the internal original inheritance mechanism, $ scope of the parent controller object is passed to the nested $ scope (all attributes, including functions ). For example:

The code is as follows:

...

Use $ scope to expose model data

The $ scope attribute is displayed, for example, $ scope. count = 5. You can also create a data model through the template.

By expression. For example

The code is as follows:

Set count to three

Use ng-model on form items

Similar to expressions, the model parameters specified on ng-model also work in the outer controller. The only difference is that it establishes a bidirectional binding relationship between the form item and the specified model.

Monitor data model changes with watch

$ Watch function signature: $ watch (watchFn, watchAction, deepWatch)
WatchFn is a string with an Angular expression or function. it returns the current value of the monitored data model. WatchAction is a function or expression that is called when watchFn changes. The function signature is:
Function (newValue, oldValue, scope) deepWatch if it is set to true, this optional Boolean parameter will command Angular to check whether every attribute of the monitored object has changed. You can use this parameter if you want to monitor elements in an array or all attributes of an object instead of a simple value. Note: Angular needs to traverse arrays or objects. if the set is large, the calculation will be more complex.

$ Watch function returns a function. when you do not need to receive a change notification, you can use this function to log out of the monitor.
If we need to monitor a property and then cancel monitoring, we can use the following code: var dereg = $ scope. $ watch ('somemodel. someproperties', callbackOnChange ());
... Dereg ();

The instance code is as follows:

The code is as follows:

Your Shopping Cart