4

Been working on building a huge app using angular js. Have seen too many questions on the same topic on how best we can design an app, but still am lil confused.

A basic app usually has a

1) Login page/Index page

2) Home page - with headers and footers. Body being the partial/composite which keeps on changing.

since we don't have handle to load multiple ng-views, which is best way to structure the Home page such a way that we have one single HomePage container with headers and footers and Body is loaded dynamically via $route.

Right now I have designed it using a single LoginContainerPage which loads Login page and home pages via $routers, but since only a single ng-view is allowed i cant use another ng-view within the Home page to laod the body dynamically again. i am not keen to use ng-include as well.

Another way to go is keep LoginPage outside the $route and start routing from HomePage such that the Body is loaded dynamically.

Wanted to check if there are any better ideas around.

Thanks in advance!!

dvdmn
  • 6,456
  • 7
  • 44
  • 52
Aki
  • 743
  • 3
  • 10
  • 17
  • Have a look at my pull request about multiple named ng-views https://github.com/angular/angular.js/pull/1198 – Haralan Dobrev Oct 09 '12 at 19:36
  • I think you've examined and understood the alternatives pretty well. At this point, I'd go with "start routing from HomePage". FYI, here's Andy's ng-switch + ng-include idea: http://stackoverflow.com/questions/12577378/create-a-single-html-view-for-multiple-partial-views-in-angularjs – Mark Rajcok Oct 09 '12 at 20:27
  • @mohangopi please take more time in your suggested edits. Your formatting is superfluous and distracting. – ryanyuyu Jul 01 '16 at 12:57

1 Answers1

2

well in the project i'm working on with angularjs i took this approach: i had a header that was the main navigation system i made a controller for that that handled the navigation system and knew about where i am right now. i had an ngView which loaded my main content based on routes but sometimes i needed different templates to be loaded and compiled base on some event for instance ajax loaded tabs. i implemented these types of things using ngInclude that the main controller on the view had the responsibility to choose the template and include it, i believe there is no need for multiple ngViews you can simply use scopes to implement different things and handle different parts of your app with different controllers and data. i guess the best idea for you is to make your login page separate. i did this in my project. my login page was the only non-Ajax page that i had.

edit: for authetication part if you wish to implement the authentication through angular you migh want to check this.

Amir
  • 2,149
  • 4
  • 23
  • 32