ui templating with Angularjs

[Pradeep Kumar]

Hi All,

      I am new to learning Angular js. I want to develop a Single page app using Angularjs. Its a dashboard app I am developing and have some common components like sidebar, navigation bar and footer.

My question is with Angular routes, can we change only the main content and include the other common components?

[Sander Elias]

Hi Pradeep,

Yes, that is exactly where ng-routes and ng-view are designed for!

Regards

Sabder

[Pradeep Kumar]

Thanks Sander. So that effectively means that I can have separate sections of header, footer, nav bar which will be common for the entire application and can dynamically include using the ng-routes and ng-view. Also I do not have to end up duplicating code for headers, footers and navbar in all the pages 

[Sander Elias]

Pradeep,

That is exactly right!

[Pradeep Kumar]

But when I searched in google, i came to know that angular js does not support nested views. There is a github project ui-router which does nested views.Please help me. I am now confused.

On Thu, Mar 6, 2014 at 3:14 PM, Sander Elias <sande...@gmail.com> wrote:

Pradeep,

That is exactly right!

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/wWDPsfN3B3o/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Sander Elias]

Pradeep,

If you need nesting, use ui-router. I didn't get from your question that you needed this.

If you have common elements for your application, such as navigation headers and footers, you can include those using ng-include.

The 'main' content can be in a ng-view, so that's loaded dynamically. 

No nesting needed for that scenario. perfectly solvable with ngRoute.

when you need your header /main/footer all depending on each other, you need nesting, and uiRouter can help you there.

If you are starting, start with ng-route, if you run into its boundaries, you allways can switch over.

(also the angular team is working on a new router solution, perhaps you might wait for that!)

Regards

Sander

[Pradeep Kumar]

Thanks Sander. I got the idea now. I will go with the standard ngRoute approach. One last question. Although ngRoute solves the main content with ng-view, if there are three menu items on the top header and on click of each header menu item the side bar <li> group elements change, can I use the ngRoute approach. If yes, how should i do it then?

--

[Sander Elias]

Pradeep,

look up: ng-if, ng-switch, ng-show, ng-hide. 
Those should be more then enough to handle the small changes in the side-bars.

Regards

Sander