AngularJS - Multiple ng-view in single template

Question

I am building a dynamic web app by using AngularJS  Is it possible to have multiple ng-view on a single template

User · Answer

Using regular ng-view module you cannot have more than one dynamic template   However  this project enables you to do so  look for ui-router

User · Answer

You can have just one ng-view     You can change its content in several ways  ng-include  ng-switch or mapping different controllers and templates through the routeProvider

User · Answer

You cant have multiple ng-view  Below is my use case where I solved my requirement  I wanted to have tabbed behavior in my model dialog  I was facing issue as click on tabs having hyperlink which will invoke router links  I solved this using button and css for tabs  When user clicks on tab  it actually will not call any hyperlink which will always invoke the ng-router  When user click on tab it will call a method  where I dynamcilly load html  Below is the function on click of tab  self submit   function form                     templateRequest  resources items employee test template html   then function template                   var compiledeHTML    compile template   scope                       d   replaceWith compiledeHTML         User  templateRequest  In test template html page add your html content  This html content will be bind to your controller

User · Answer

UI-Router is a project that can help  https   github com angular-ui ui-router One of it s features is Multiple Named Views  UI-Router has many features and i recommend you using it if you re working on an advanced app   Check documentation of Multiple Named Views here

User · Answer

I believe you can accomplish it by just having single ng-view  In the main template you can have ng-include sections for sub views  then in the main controller define model properties for each sub template  So that they will bind automatically to ng-include sections  This is same as having multiple ng-view   You can check the example given in ng-include  documentation  in the example when you change the template from dropdown list it changes the content  Here assume you have one main ng-view and instead of manually selecting sub content by selecting drop down  you do it as when main view is loaded

User · Answer

It is possible to have multiple or nested views  But not by ng-view    The primary routing module in angular does not support multiple views  But you can use ui-router  This is a third party module which you can get via Github  angular-ui ui-router  https   github com angular-ui ui-router   Also a new version of ngRouter  ngNewRouter  currently  is being developed  It is not stable at the moment  So I provide you a simple start up example with ui-router  Using it you can name views and specify which templates and controllers should be used for rendering them  Using  stateProvider you should specify how view placeholders should be rendered for specific state    lt body ng-app  main  gt       lt script type  text javascript  gt      angular module  main     ui router         config    locationProvider     stateProvider   function   locationProvider   stateProvider             stateProvider          state  home                 url                   views                     header                         templateUrl    app header html                                      content                         templateUrl    app content html                                                            lt  script gt       lt a ui-sref  home  gt home lt  a gt       lt div ui-view  header  gt header lt  div gt       lt div ui-view  content  gt content lt  div gt       lt div ui-view  bottom  gt footer lt  div gt       lt script src  bower components angular angular js  gt  lt  script gt       lt script src  bower components angular-ui-router release angular-ui-router js  gt   lt  body gt    You need referencing angularjs  and angular-ui router for this sample     bower install angular-ui-router

[angularjs] AngularJS - Multiple ng-view in single template

Examples related to angularjs

Examples related to ng-view