Introduction to angular and introduction to its features_AngularJS

Previously, the front-end development (web or mobile) mainly used jQuery native js. If you use some front-end UI framework, it may also provide some APIs that you can use. And many UI frameworks are currently based on jQuery, so let’s talk about the big span from jQuery to angularjs. I have studied angularjs for a while. Let’s talk about my overall feelings:

About comparison with jquery

First of all, Angular is an MVC framework. The difference between it and jQuery is that the former is committed to decoupling MVC code and uses model, controller and view to organize the code, while the latter provides you with many API functions that you don’t need. Write a lot of native js to achieve more complex effects, such as animation, $.animate. If such an effect requires native js to write, 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 write it directly in the page and wrap it with script tags, or you can even write it directly inline. In the html tag, angularjs will divide an HTML page into several modules. Each module can have its own scope, service and directive. Each module can also communicate with each other, but the overall structure is relatively clear, that is to say Its code organization is modular.

Finally, the idea of ​​jQuery is to design the page first, then perform dom operations on the existing page and then display the page. However, the angular view may be just a frame, and the dom operations or time monitoring of the view are all in It is implemented in the directive, and generally speaking, you rarely write Dom operation code directly, as long as you listen to the model. When the model changes, the view will also change.

About applicable occasions

jQuery should be suitable for most web development, and there is also a mobile version (jQuery mobile). Some people say that angularjs is more suitable for SPA (I personally think that SPA on mobile phones may cause performance problems because its dirty checking mechanism will Affecting performance), on the web side, some CRUD applications or management software can still be used (of course, the understanding here may not be accurate, and we will learn more about and use it with in-depth study).

About the combination of UI

Developing any product requires the use of front-end UI. Currently, many UIs are based on jQuery, which means that if you want to use angularjs and these Ui components, you need to use the angularjs directive to rewrite some components. This process is It is more troublesome. Fortunately, angular provides us with some UI components that can be used (the web side is mainly combined with bootstrap front-end components), http://angular-ui.github.io/, and in The mobile terminal is mainly combined with the ionic framework http://ionicframework.com/, but with the development of angular, many HTML5 front-end frameworks have gradually integrated the angularjs version for use.

About the features of angularjs

1. Two-way binding of data: This may be its most exciting feature. The data in the view layer and the data in the model layer are two-way bound. If one of them changes, the other will change accordingly. This doesn’t require you to write any code! (Think about how to do it with jQuery)

2. Code modularization, the code of each module has its own scope, model, controller, etc. independently.

3. Powerful directives can encapsulate many functions into HTML tags, attributes or comments, etc., which greatly beautifies the structure of HTML and enhances readability;

4. Dependency injection, this back-end language design pattern is given to the front-end code, which means that the front-end code can improve reusability and flexibility. Future models may place a large number of operations on the client, and the server only Provide data sources and operations that other clients cannot complete;

5. Test-driven development, angularjs has this as its goal from the beginning. Applications developed using angular can easily perform unit testing and end-to-end testing, which solves the shortcomings of traditional js code that is difficult to test and maintain

The above is the conclusion drawn from studying angularjs for a period of time. There may be some omissions in some of them. It doesn’t matter. Next, I will expand on some of them to learn step by step.