In the past, the front-end development (web or mobile) mainly used jQuery + native js. If some front-end UI frameworks are used, it may also provide some APIs to use. Moreover, many UI frameworks are based on jQuery, so the span from jQuery to angularjs is relatively large. I have studied angularjs for a while. Let’s talk about the overall experience:
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 of mvc code and uses model, controller and view to organize the code. The latter provides you with many APi functions. You can do not have to write many native js to achieve more complex effects, such as animation, $.animate. If you need to write native js, the code volume will be relatively large;
Secondly, jQuery does not define how your code is organized. You can place it in a separate js file for reference, or you can directly write it in the page to wrap it with script tags, or even write it directly in the html tag in inline. However, angularjs will divide an HTML page into several modules, each module can have its own scope, service and directive, and communication can be carried out between modules, but the overall structure is relatively clear, that is, the code organization method is modular.
Finally, jQuery's idea is to design the page first, and then perform dom operations on the existing page and display the page. However, the angular view may be just a framework, and the dom operations or time monitoring of the view are implemented in directive. In general, it is rarely written directly by yourself, as long as you listen to the model. The view will also change after the model changes.
About applicable occasions
jQuery should be suitable for most web development, and there is also jQuerymobile on the mobile side. 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 affect 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 you will understand and use it more with in-depth learning).
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 angularjs' directive to rewrite some components. This process is quite troublesome. Fortunately, angular provides us with some UI components that can be used (web side mainly combines bootstrap front-end components), http://angular-ui.github.io/, and on mobile side, it mainly combines ionic framework http://ionicframework.com/. However, with the development of angular, many HTML5 front-end frameworks have gradually integrated angularjs versions for use.
About the features of angularjs
1. Bidirectional binding of data: This may be its most exciting feature. The data of the view layer and the data of the model layer are bidirectional binding. If one of them changes, the other side will change accordingly. You don’t need to write any code! (Think about how to do it in jQuery mode)
2. The code is modular, and the code of each module has its own scope, model, controller, etc.
3. Powerful directive can encapsulate many functions into HTML tags, attributes or comments, etc., which greatly beautifies the structure of HTML and enhances readability;
4. Dependency injection, giving the design pattern of this backend language to the front-end code, which means that the front-end code can improve reusability and flexibility. In the future, the model may place a large number of operations on the client, and the server only provides data sources and operations that other clients cannot complete;
5. Test-driven development, angularjs aims to start with this. Applications developed using angular can easily perform unit testing and end-to-end testing, which solves the shortcomings of traditional js code being difficult to test and maintain.
The above is the conclusion drawn by studying angularjs for a period of time. Some of the areas may be omitted. It doesn’t matter. Next, we will develop one of the points and learn step by step.