angular.js - How is the angularjs operation DOM generally written in instructions or services?

Question

Using Angular to perform data operations in the controller, the code looks bloated and difficult to maintain. Is there any best practice case? Thanks~

Answer 1

In a sense or "agreement", DOM operations can only appear in instructions. The last place you should be is in service. Angular advocates test-driven development. If DOM operations occur in your service or controller, it means that your test cannot pass. Of course, this is just one point. What is important is one of the benefits of using Angular, which is two-way data binding, so that you can focus on processing business logic without having to deal with piles of DOM operations. If your Angular code is still full of various DOM operations, then why not use jquery directly for development.

I also wrote an example myself, which may be helpful to you: https://github.com/dolymood/angular-example

Answer 2

To simply operate the DOM, it is better to put it in the directive. When it comes to data crud corresponding to the DOM, it is better to directly operate the scope in the controller after binding it to the controller through the template. Some response animations can be bound in the directive. , and then broadcast the event in the controller to control the corresponding animation in the directive. Here is a relatively complete angular project, which I looked at when I started angular in 2014. I learned a lot. I will share it with you. I hope it will be helpful to you

https://github.com/atian25/wandoujia-satan

Answer 3

1. All logic related to view display is placed in the directive. Only the directive can operate the dom.
2. All logic related to page data is placed in the controller bound to the page.
3. All common data logic is placed in service.

Angular actually brings some work logic originally done by the back end to the front end.

A classic example: todomvc and source code