What is the recommended approach when using AngularJS with SharePoint WebParts

Question

We have started using AngularJS within some SharePoint WebParts. So far, this has been working really well, however, we noticed that when we started placing more than one AngularJS WebPart onto a WebPart page, only the first WebPart on the page was bootstrapped by AngularJS. The second, or third, one simply didn't function. This is because we set up each WebPart as it's own Module/App in AngularJS. We were able to get around this using a technique described here:

Multiple apps and controllers in the same file

Is this a best practice for using AngularJS within SharePoint WebParts, or is there a better approach?

Answer 1

Steps:

1) Upload the angular JS files at top site collection level.

2) Refer angular JS files in master page.

3) Create a module in master page and refer the same in all the pages(Create separate controllers for each page).

4) Create a html page which has all the display which you want for the web part using angular JS.

5) Add a content editor web part on the page and refer that html page.