Splitting SPA into multiple components and using AngularJS

Question

I'm a complete newbie with AngularJS, so this might be something completely trivial. I am creating an Asp.net MVC application (truly juts, carrying minor parts) with a Web API backend (including login / logout capabilities).

I would like to use AngularJS in my application. But I have a bit of a dilemma on how to cut my page into several sections that work somewhat independently. Let's say this is a simplified skeleton of my page.

Questions

How do I structure my AngularJS details on my page?

• Should I have one ng-app for the whole page or have several not nested for every single component on my page?
• In the case of a single ng-app I expect it to have an ng-view that will include context and content components.
• What about client-side routing with each separate option (single / multi ng-app )?

Is this a viable approach, or should I think of Angular differently and structure it differently?

I must have separate controllers for each individual component and one authentication service (communication with the web API on the server) to provide custom elements.

What would you recommend?

Mind you, I'm a complete newbie to AngularJS, but very versed in server side (MVC and API).

Answer 1

Let me try to solve some problems.

Should I have one ng application for the whole page or have several not nested for each separate component on my page?

There can only be 1 ng-app for each SPA, so you cannot have an ng-app for each component. You can have a module for one component that can be associated with the ng-app module.

In the case of a single ng application, I expect that there will be one ng-view that includes context and content components.

ng-view will only contain the contents of the active view. It does not require any menu. Maybe something like a RootController , which is a container for a common application. The html will consist of an obvious ng-view and an ng-include .

Sort of

 <div ng-controller='RootController'> <div id="contextMenu"><ng-include src='contextMenuTemplate'></div> <div id="primaryMenu" ><ng-include src='primaryMenuTemplate'></div> <div id="secondarMenu" ><ng-include src='secondaryMenuTemplate'></div> <div ng-view/> </div> 

In your RootController you will have logic like

 if ($route.path) { $scope.contextMenuTemplate="path1"; //path corresponding to the route } 

Or you can also create an object map and use it to select templates.

 var viewTemplates= [{ path:"/home", contextMenuTemplate:"path1", primaryMenuTemplate:"path2", secondaryMenuTemplate:"path3" }] 

Now it can be used to select patterns in ng-include.

How about client-side routing with each individual option (one / more ng applications)?

Routing occurs only in the ng-view . You select other templates to load based on the main view. You can also look at ui-router for more information on routing.

Update When authentication and authorization fall into the picture, both the server and the client play a role. The server authenticates, and then can use this information to serve different patterns if the user is authenticated or not, and can use the same URL. For example, /home/leftnav may host other content on the server based on an authenticated user. The same can be done on the Angular side, but this behavior can be circumvented as it is just javascript. The same is true for api calls (using webapi), where the server can decide what to send back.

On the client side, user state can be monitored using the \ factory service. A service of type UserService with methods \ properties, such as CurrentUser , can provide detailed information about the currently registered user and can be entered into any directive, filter, controller, which should make decisions based on what and how the user has registered.