Decoupling DOM operations from application logic is a good idea, which can greatly improve the code tonality;
It is a very good idea to treat testing and development equally. The difficulty of testing depends largely on the code structure;
Decoupling the client from the server is a particularly good practice, which enables parallel development on both sides and reuse of both sides of the code;
If the framework can guide developers throughout the development process: from designing the UI, writing the business logic, and then testing, it will be of great help to developers;
It is always good to convert traditional to simple and reduce to zero.
AngularJS can free you from the following nightmares:
Use callback: the use of callback will disrupt the readability of your code and make your code fragmented. It is difficult to clear the original business logic. It is a good thing to remove some common code, such as callback. Significantly reduce the code you have to write because of the design of the JavaScript language, so that you can better understand the logic of your application.
Code for writing DOM elements manually: DOM is a basic part of AJAX applications, but it is always "bulky" and error-prone. The UI interface described in declaration can change with the application status, which frees you from writing low-level DOM operation code. In most applications written using AngularJS, developers do not need to write DOM code by themselves, but you can write it if you want.
Read and write data on the UI: a large part of AJAX applications is CRUD operations. A typical process is to build the data group of the server into an internal object, and then compile the object into an HTML form. After the user modifies the form, the user verifies the form. If there is an error, the error is displayed, then, the data is regrouped into internal objects and then returned to the server. There are too many code to be repeated in this process, so that the code seems to always describe the entire execution process of the application, rather than the specific business logic and business details.
You have to write a lot of basic code before: Usually you need to write a lot of basic code to implement a "Hello World" application. If AngularJS is used, it will provide some services so that you can easily start writing your applications, all of these services are automatically added to your application with a Guice-like dependency-injection dependency injection, which allows you to quickly enter the specific development of your application. In particular, you can fully master the initialization process of automated testing.
Instance
The following is a typical CRUD application that contains a form. The form value is verified first and then used to calculate the total value. This value is formatted as a cost-effective style. The following are some common concepts for developers. You need to understand them first:
1. Associate the data model with the view (UI;
2. Write, read, and verify user input;
3. Calculate new values based on the model;
4. Localized the output format.
Index.html:
<! Doctype html>
<Html ng-app>
<Head>
<Script src = "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:
Function InvoiceCntl ($ scope ){
$ Scope. qty = 1;
$ Scope. cost = 19.95;
}
Let's take a look at the above example.
In the We use the <script> label to load the AngularJS script:
<Scriptsrc = "angular-1.1.0.min.js"> </script> AngularJS automatically binds data in two directions by setting the ng-model attribute in the <input> label. We also carried out some simple data verification:
Quantity: <input type = "integer" min = "0" ng-model = "qty" required> Cost: <input type = "number" ng-model = "cost" required> the widget in this input box looks very common, but it is not common if you realize the following:
After the page is loaded, AngularJS generates a variable of 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 has special capabilities. If you do not enter the data or the input data is invalid, the input box will automatically become red. This new feature in the input box makes it easier for developers to implement common field verification functions in CRUD applications.
Finally, let's take a look at the mysterious double braces:
Total: {qty * cost | currency} the {expression} mark is the data binding of AngularJS. The expression can be a combination of expressions and filters ({expression | filter. AngularJS provides a filter 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 to the local currency style, and then output it to the page.
It is worth mentioning that we did not call any AngularJS method, nor did we write a specific logic like a framework, which completed the above functions. The reason behind this implementation is that the browser has done more work than ever 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 a level that does not require class libraries or frameworks.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
