Slicing an SPA into several components and use AngularJS

Question

I'm a complete beginner with AngularJS so this may be something completely trivial. I'm building an Asp.net MVC application (really juts delivering insignificant parts) with Web API backend (including login/logout capabilities).

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

Questions

How should I structure my AngularJS parts on my page?

1. Should I have a single ng-app for the whole page or have several non-nested ones for each individual component on my page?
2. In case of a single ng-app I expect to have one ng-view that would include Context and Content components.
3. How about client-side routing with each individual option (single/multi ng-app)?

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

I should likely have separate controllers for each individual component and a single authentication service (communicating with Web API on the server) to provide user authorized items.

What would you recommend?

Bare in mind I'm a complete beginner in AngularJS but am very versed in server side part (MVC and API).

Answer 1

Let me try to address some concerns

Should I have a single ng-app for the whole page or have several non-nested ones for each individual component on my page?

There can be only 1 ng-app per SPA, so you cannot have ng-app per component. You can have module per component which can be tied into the ng-app related module.

In case of a single ng-app I expect to have one ng-view that would include Context and Content components.

ng-view would only contain the content of the active view. It does not require to have any menus. There can be something like RootController which is container for overall app. The html would consist of the obvious ng-view and number of ng-include.

Something like

<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 would have some logic like

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

Or else you can also create a object map and use that for selecting the templates

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

This can now be used for selecting templates in ng-include.

How about client-side routing with each individual option (single/multi ng-app)?

Routing happens on the ng-view part only. You select other templates to load based on the primary view. You can also look at ui-router for advance routing stuff.

Update When authentication and authorization comes into picture both the server and client play their part. Server authenticates and then can use that information for service different templates if the user is authenticated or not, and may on the same url. For example /home/leftnav can server different content based on the authenticated user. Same can be done on Angular side but this behavior can be by-passed as it is just javascript. Same holds true for api calls (using webapi) where server can decided what to send back.

On client side user state can be tracked using a service\factory. A service like UserService with methods\properties like CurrentUser can provide details on the current logged in user and can be injected into any directive, filter, controller which as to make decision based whether and what user is logged in..