Detailed examples of AngularJS expressions

Recently I want to make a cross-platform (pc\app\pad) thing to play with, and have studied many technologies:

android, ios, H5, Bootrap, angular, angular2, ApiCloud, WeChat applet

Except for the shackles (systems) of android and ios, everything else can be cross-platform. In particular, ApiCloud and WeChat applets are very popular for developing SDK-level solutions, but in terms of technical sovereignty, they are too dependent on others. Things,

H5 and bootstrap are very good in responsiveness, and the front-end and back-end frameworks can basically be contracted.

Of course there are many front-end frameworks such as vue.js and so on.

I don’t know why, but I am currently interested in Angular. Interest is the most shameless behavioral appeal. For example, you have a strong interest in a beautiful girl, and then. . . . (~~~Just kidding)

Then I have to find a way to get close to "her" ~~

I want to get close to angular ~~

Start by gathering information:

Where did she come from?

AngularJS[1] was born in 2009, created by Misko Hevery and others, and later acquired by Google. It is an excellent front-end JS framework that has been used in many Google products. AngularJS has many features, the most core of which are: MVC, modularization, automated two-way data binding, semantic tags, dependency injection, etc.

What’s so charming about her?

AngularJS is designed to overcome the shortcomings of HTML in building applications. HTML is a good declarative language for pseudo-static text display design, but it is weak when it comes to building WEB applications.

Usually, we use the following technologies to solve the shortcomings of static web page technology in building dynamic applications:

Class library - A class library is a collection of functions that can help you write WEB applications. . It's your code that takes control, and it's you who decides when to use the library. Class libraries include: jQuery and other

frameworks - A framework is a special, already implemented WEB application. You only need to fill it with specific business logic. The framework here plays a leading role, calling your code according to specific application logic. Frameworks include: knockout, sproutcore, etc.

------Okay, not charming enough

AngularJS provides developers with a higher level Abstractions to simplify application development. As with other abstraction techniques, some flexibility is lost. In other words, not all applications are suitable for AngularJS. The main concern of AngularJS is building CRUD applications. Fortunately, at least 90% of WEB applications are CRUD applications. But to understand what is suitable for building with AngularJS, you need to understand what is not suitable for building with AngularJS.

For example, games, graphical interface editors, applications with frequent and complex DOM operations are very different from CRUD applications, and they are not suitable to be built with AngularJS. In situations like this it might be better to use some lighter, simpler technology like jQuery.

------Are you excited?

----------I have to say that all our Internet behaviors are nothing more than CRUD on data points one by one, such as adding and subtracting items from the shopping cart (+ - ), check air tickets, tickets, clear WeChat friends who are not in contact, place an order----------

Further exploration:

In the tag, we use an ng-app identifier to indicate that this is an AngularJS application.

This ng-app identifier will cause AngularJS to automatically initialize your application.

We use the <script> tag to load the AngularJS script: </script>

> ;

By setting the ng-model attribute in the tag, AngularJS will automatically perform two-way binding of data.

We also performed some simple data verification at the same time:

Quantity:Cost:

The widget of this input box looks very ordinary, but if you realize the following points, it will be extraordinary:

After the page is loaded, AngularJS will generate variables with the same name according to the model name (qty, cost) declared in the widget.

You can think of these variables as M (Model) in the MVC design pattern;

Note that the input in the widget above has special capabilities.

If you have not entered data or the entered data is invalid, the input box will automatically turn red. This new feature of the input box makes it easier for developers to implement common field validation functions in CRUD applications.

Finally, we can take a look at the mysterious double braces {{}}:

Total:{{qty *cost |currency}} This {{expression}} tag is the data binding of AngularJS. The expression can be a combination of expression and filter ({{ expression | filter }}).

AngularJS provides filters to format input and output data.

In the above example, the expression in {{}} allows AngularJS to multiply the data obtained from the input box, then format the multiplication result into the local currency style, and then output it to the page.

It is worth mentioning that we neither called any AngularJS methods nor wrote any specific logic like using a framework, we just completed the above functions.

The reason behind this implementation is that the browser has done more work than before to generate static pages, so that it can meet the needs of dynamic WEB applications.

AngularJS lowers the threshold for developing dynamic WEB applications to the point where no class library or framework is required.

Angular believes that when building a view (UI) and writing software logic at the same time, declarative code will be much better than imperative code. Although the command Formula code is very suitable for expressing business logic.

It is a very good idea to decouple DOM operations and application logic, which can greatly improve the adjustability of the code;

It is a very, very good idea to treat testing and development equally. The idea is that the difficulty of testing depends to a large extent on the structure of the code;

Decoupling the client and server is a particularly good practice, which allows both sides to develop in parallel and makes the code on both sides can be reused;

If the framework can guide developers throughout the entire development process: from designing UI, to writing business logic, to testing, it will be of great help to developers;

It is always good to "reduce complexity to simplicity, and reduce complexity to zero".

AngularJS can free you from the following nightmares

AngularJS Expression

Edit

AngularJS expressions are written within double curly braces: {{ expression }}. [2]

AngularJS expression binds data to HTML, which is similar to the ng-bind directive.

AngularJS will "output" data where the expression is written.

AngularJS expressions are much like JavaScript expressions: they can contain literals, operators, and variables.

Example{{ 5 + 5 }} or {{ firstName + " " + lastName }}

Initial understanding of angular , waiting for the next appointment~~~ Do you want to go together~~~ V-V

The above is the detailed content of Detailed examples of AngularJS expressions. For more information, please follow other related articles on the PHP Chinese website!