4

I'm working on a web app. It's backended by Spring from controllers to database. Currently I handle page navigation using get methods from the Spring MVC controllers to access the pages.

I'm planning to use angular JS to do my UI work. I've looked up examples on how to do it and it's all good but I'm not sure about something...

ng-app

1- Should I use one per app or one per page or it doesn't matter?

2- If it doesn't matter when should I decide?

I see examples using it on the html tag and some others using in divs but I'm not sure how to decide that maybe due a lack of understanding about the framework.

halfer
  • 19,824
  • 17
  • 99
  • 186
Desorder
  • 1,549
  • 12
  • 16

3 Answers3

6

1- Should I use one per app or one per page or it doesn't matter?

No, never use app per page, angular takes time to bootstrap whole app, and with server rounting it even doesn't make sense of writing ng application, here's interesting question about that, and it will be quite hard to maintain each application separately
Separate each logic into it's own module, but still have single starter/bootstrapper

2- If it doesn't matter when should I decide?

It matters

Some tips

  • Angular has good extensibility, when app is done, and after a while you decide to add something new, it's much easy.
  • Using multiple modules let's you divide app into small chunks, so when something fails, you definitely know which module caused it.
  • Using angular with Server-side MVC frameworks are real pain, although it's possible, i wouldn't recommend to do that. I mean don't use jsp or thymrleaf, just use REST (better RESTful, easy use with $resource) api of you spring
  • Write tests although it's javascript, writing tests give you confidence about app parts/modules. Have high test coverage is like being like a boss
  • Don't belive you can start doing great apps, you must read angular, watch tutorials, read articles/blogs/stackoverflow. It has many pitfalls, and strange learning curve, but it's worth it.
Community
  • 1
  • 1
Medet Tleukabiluly
  • 11,662
  • 3
  • 34
  • 69
  • I see in examples that ng-app="myApp" becomes the module declaration (var app = angular.module('myApp', []);). So I take angular interchange app and module or I'm wrong? Also, maybe I didn't understand but your answer for the first question contradicts your second bullet point. You say "never to use app per page" but also say "Using multiple modules let's you divide app into small chunks". – Desorder Aug 27 '15 at 04:34
  • single app, but multiple modules `angular.module('myApp', ['m1', 'm2', 'm3']);` – Medet Tleukabiluly Aug 27 '15 at 04:44
  • 4
    @Desorder: I think he means single bootstrap point (think of it like the main method in java), you should use "myApp" as the main module (`ng-app="myApp"`), but like in java, you don't put all the code in a single class, don't you? that's why you should also create other modules `'m1', 'm2', 'm3'` and specify them as dependencies for the main module –  Aug 27 '15 at 05:41
  • @StefanBaiu That was a good explanation man. It made the ng-app much clear now :) – Desorder Aug 31 '15 at 10:47
  • So if you treat modules as classes, how do the controllers fit in within this analogy? Great explanation by the way – Remus.A Jun 21 '17 at 06:56
4

angular docs

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.

You can define multiple modules, which may have dependencies between them.

angular.module('Core', []);
angular.module('Module1', ['Core']);
angular.module('Module2', ['Core']);

Use the appropriate module on each page. How many modules should you have? It depends on how complex your application is and how do you want to structure it.

So yeah, if you've just started with angular I'd say don't bother too much with this. Put everything in one module and refactor afterwards. There are other, more tricky, parts about angular that you should be concerned about.

Also, you might want to take a look at this style guide.

EDIT:

just to be clear, the idea is to use one ng-app and choose the appropriate module to bootstrap the application depending on the area of your site (does not apply if you're building a single page application where you should have only one module responsible for bootstrapping your application)

-1

You can also slit your page into 2 and put each app into one if you don't have the source code of the 2nd app and it work fine since your main app don't have to wait for 2nd app to finish loading to load. The 2nd app mostly just an add on any way.

With all the service/factory, module/controller around, I haven't seen any professional page use multiple ng-app and it make sense. Each time to load an app it take long time, with just 2 simple app in one page it can take more than 30 second to load a small page while you can do it in 10 second using multiple module and services.(I deliberately limit the net to test its speeds). God know how long it will take if those 2 are complex.

Update:

There is a fix using UI-route from angular UI which deal with this loading problem pretty good(time drop to 20% of original way) and it also help split the page into 2 app just like i said in beginning minus the need to literally split the page into 2. Still not see any good example for this practice though, specially with handheld device, it only make the page more complex.

halfer
  • 19,824
  • 17
  • 99
  • 186
Tran Vu Dang Khoa
  • 83
  • 8
  • 1
    At a guess, it was your finishing remark that asked for emails on this topic. Otherwise this seems like a good answer: answers are meant to stand alone and not explicitly request discussion or ask new questions. – halfer Sep 24 '17 at 12:45