Introduction to angular and its features _ AngularJS

This article mainly introduces angular and its features. This article describes the comparison with jquery, the applicable scenarios, the combination of UI, and the features of angularjs, you can refer to the previous development (web or mobile) front-end that mainly uses jQuery + native js. if you use some front-end UI frameworks, it may also provide some APIs for use. At present, many UI frameworks are based on jQuery. Therefore, the span from jQuery to angularjs is large. after studying angularjs over a period of time, let's talk about it as a whole:

Comparison with jquery

Angular is an mvc framework, which is different from jquery in that the former is committed to mvc code decoupling and organizes code using model, controller, and view, the latter provides you with a lot of APi functions, so you don't need to write a lot of native js to achieve more complex effects, such as animation, $. animate, if you need native js to write this effect, the amount of code will be relatively large;

Secondly, jQuery does not define how your code is organized. you can put it in a separate js file for reference, or you can directly write it on the page and use the script tag for packaging, you can even write it in html tags in an internal manner. However, angularjs divides an HTML page into several modules. each module can use its own scope, service, and directive, each module can also communicate with each other, but the overall structure is clear, that is, its code organization method is modular.

The idea of jQuery is to design the page first, and then perform dom operations on the existing page to display the page. However, angular view may be just a framework, dom operations or time listening on The view are implemented in directive. In general, seldom write the Dom operation code by yourself, as long as you listen to the model. The view also changes when the model changes.

Applicable scenarios

JQuery should be suitable for most web development and also for mobile terminals (jQuerymobile). some people in angularjs say it is more suitable for SPA (I personally think that SPA on mobile phones may cause performance problems, because its dirty check mechanism will affect performance), on the web end, some CRUD applications or management software can still be used (of course, the understanding here may not be accurate, will learn more and learn how to use it ).

UI integration

Front-end UI is required for any product development. Currently, many Uis are based on jQuery. This means that if you want to use angularjs and these UI components, you need to use angularjs's directive to rewrite some components, this process is troublesome. Fortunately, angular provides us with some UI components that can be used (the web end mainly integrates with the bootstrap front-end components.

Features of angularjs

1. two-way data binding: this may be the most exciting feature. The data at the view layer and the data at the model layer are two-way binding, one of which is changed, the other side will change accordingly, so you don't need to write any code! (Think about how to do this in jQuery mode)

2. code modularization. the code of each module has its own scope, model, and controller.

3. powerful direve VE can encapsulate many functions into HTML tags, attributes, or annotations, which greatly beautifies the HTML structure and enhances readability;

4. dependency Injection: The design mode of this backend language is assigned to the front-end code, which means that the front-end code can improve reusability and flexibility. in the future mode, a large number of operations may be placed on the client, the server only provides operations that cannot be completed by data sources and other clients;

5. angularjs is designed for test-driven development at the beginning. applications developed using angular can easily perform unit tests and end-to-end tests, this solves the defects that traditional JavaScript code is difficult to test and maintain.

The above is the conclusion drawn from angularjs over a period of time. some of them may be omitted. it doesn't matter. Next, we will show a 1.1 step-by-step study.