What is AngularJS?
AngularJS is a structural framework designed for dynamic WEB applications. It allows you to use HTML as a template language, and by extending HTML syntax, you can build your application components more clearly and concisely. Its innovation is that it uses data binding and dependency injection, which eliminates the need to write a lot of code. All of these are implemented through browser-side Javascript, which also makes it perfectly combined with any server-side technology.
AngularJS is designed to overcome the shortcomings of HTML in building applications. HTML is a good declarative language designed for static text display, but it will be weak if you want to build WEB applications. So I did some work (you might think it was a little trick) to get the browser to do what I want. formatDate
Usually, we use the following technologies to solve the shortcomings of static web technology in building dynamic applications:
1. Class Library - Class Library is a collection of functions that can help you write WEB applications. It is your code that leads you, and it is up to you to decide when to use the class library. Class libraries include: jQuery, etc.
2. Framework - Framework is a special, implemented WEB application, you only need to fill in specific business logic. The framework plays a leading role here, and it calls your code based on the specific application logic. Frames include: knockout, sproutcore, etc.
AngularJS uses a different approach, which tries to make up for the shortcomings of HTML itself in building applications. AngularJS allows browsers to recognize new syntax by using a structure we call identifiers. For example:
1. Use double braces {{}} syntax for data binding;
2. Use DOM control structure to iterate or hide DOM fragments;
3. Support forms and form verification;
4. Be able to associate logical code to related DOM elements;
5. Can divide HTML into reusable components.
End-to-end solutions
AngularJS is trying to become an end-to-end solution in WEB applications. This means it is not just a small part of your WEB application, but a complete end-to-end solution. This will make AngularJS appear "stubborn" when building an application that has CRUD (add Create, query Retrieve, update Update, delete Delete) (the original text is opinionated, meaning there are not many other ways). But despite its "stubbornness", it still ensures that its "stubbornness" is just at the starting point of building your application, and that you can still change flexibly. Some of AngularJS's outstanding features are as follows:
1. All possible contents that can be used to build a CRUD application include: data binding, basic template identifiers, form verification, routing, deep linking, component reuse, and dependency injection.
2. Testing aspects include: unit testing, end-to-end testing, simulation and automated testing frameworks.
3. Seed application with directory layout and test scripts as the starting point.
The cuteness of AngularJS
AngularJS simplifies application development by presenting a higher level of abstraction for developers. Like other abstract techniques, this also loses some flexibility. In other words, not all applications are suitable for use with AngularJS. AngularJS mainly considers building CRUD applications. Fortunately, at least 90% of WEB applications are CRUD applications. But to understand what is suitable for building with AngularJS, you must understand what is not suitable for building with AngularJS.
Such as games and graphical interface editors, applications with frequent and complex DOM operations are very different from CRUD applications. They are not suitable for building with AngularJS. It might be better to use some lighter, simpler techniques like jQuery like this.
A simple AngularJS instance
Below is a typical CRUD application containing a form. The form value is first verified and then used to calculate the total value, which is formatted in the local style. Here are some common concepts for developers, you need to understand first:
1. Associate the data model (data-model) to the view (UI);
2. Write, read and verify user input;
3. Calculate new values based on the model;
4. Localize the output format.
index.html:
The code copy is as follows:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="InvoiceCntl">
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type="integer" min="0" ng-model="qty" required></td>
<td><input type="number" ng-model="cost" required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{qty * cost | currency}}
</div>
</body>
</html>
script.js:
The code copy is as follows:
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
}
end-to-end test:
The code copy is as follows:
it('should show of angular binding', function() {
expect(binding('qty * cost')).toEqual('$19.95');
input('qty').enter('2');
input('cost').enter('5.00');
expect(binding('qty * cost')).toEqual('$10.00');
});
function InvoiceCntl($scope){$scope.qty = 1;$scope.cost = 19.95;}
Running effect:
The code copy is as follows:
Invoice:
Quantity Cost
Total: {{qty * cost | currency}}
Try the above example, and let’s take a look at how this example works together. In the `` tag, we use a `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 `` tag to load AngularJS script: <script src="http://code.angularjs.org/angular-1.1.0.min.js">
By setting the ng-model property in the <input> tag, AngularJS will automatically bind the data in two-way. We also conducted some simple data verification at the same time:
The code copy is as follows:
Quantity: <input type="integer" min="0" ng-model="qty" required >
Cost: <input type="number" ng-model="cost" required >
The widget of this input box looks ordinary, but it is not ordinary if you recognize the following points:
1. When 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;
2. Note that the input in the above widget has special abilities. If you do not enter data or the input data is invalid, this input input box will automatically turn red. This new feature of the input box makes it easier for developers to implement the common field verification functions in CRUD applications.
Finally, we can take a look at the mysterious double braces:
The code copy is as follows:
Total: {{qty * cost | currency}}
This {{Expression}} tag is AngularJS data binding. The expressions in it can be a combination of an expression and a filter ({{ expression | filter }}). AngularJS provides filters to format input and output data.
In the example above, the expression in {{}} asks AngularJS to multiply the data obtained from the input box, then format the multiplication result to the local currency style, and then output it to the page.
It is worth mentioning that we neither call any AngularJS methods nor write a specific logic like using a framework, but we have completed the above functions. Behind this implementation is that the browser does more work than before to generate static pages, allowing it to meet the needs of dynamic WEB applications. AngularJS lowers the development threshold for dynamic WEB applications to the point where there is no need for class libraries or frameworks.
AngularJS's "Zen Tao (Concept)"
Angular believes that when building views (UIs) and writing software logic, declarative code will be much better than imperative code, although imperative code is very suitable for expressing business logic.
1. Decoupling DOM operations and application logic is a very good idea, which can greatly improve the tunability of the code;
2. It is a very, very good idea to treat testing and development equally. The difficulty of testing depends to a large extent on the structure of the code;
3. Decoupling the client and server side is a particularly good practice. It can enable both sides to develop in parallel and enable reuse of both sides;
4. If the framework can guide developers throughout the entire development process: from designing UI, writing business logic, and then testing, it will be of great help to developers;
5. It is always good to "simplify the complex into simplification, and simplify it into zero".
AngularJS can free you from the following nightmare:
1. Use callbacks: The use of callbacks will disrupt the readability of your code, make your code fragmented, and it is difficult to see the original business logic. It is a good thing to remove some common code, such as callbacks. A drastically reducing the code you have to write because of the design of the JavaScript language can allow you to see the logic of your application more clearly.
2. Manually write code for operating DOM elements: Operating DOM is a very basic part of AJAX applications, but it is always "cumbersome" and error-prone. The UI interface described in a declarative way can change with the change of application status, allowing you to free yourself from writing low-level DOM operation code. In most applications written in AngularJS, developers no longer need to write codes that operate DOM by themselves, but you can still write them if you want.
3. Read and write data to the UI interface: A large part of AJAX applications is CRUD operations. A classic process is to form the server data into internal objects, then compile the object into HTML forms, and the user modify the form and then verify the form. If there is any error, it will display the error, and then reorganize the data into internal objects and return it to the server. There is too much code to be repeated in this process, making the code always seem to describe the entire execution process of the application, rather than the specific business logic and business details.
4. You have to write a lot of basic code before you start: Usually you need to write a lot of basic code to implement a "Hello World" application. With AngularJS, it will provide some services that allow you to start writing your application easily, and these services are automatically added to your application with a Guice-like dependency-injection-style dependency-injection dependency injection, which allows you to quickly enter the specific development of your application. What's especially true is that you can fully grasp the initialization process of automated testing.