132

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

3

6 Answers 6

100

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.

3
  • 1
    mapping controllers and templates will replace the whole ng-view element, right?
    – zx1986
    Sep 24, 2013 at 2:04
  • 9
    What about dynamically changing the content of a widget? Wouldn't you want to create a view for the widget and a controller for the widget and a model for the widget? Oct 14, 2013 at 14:34
  • Is it recommended to use views? Isn't it better to define divs with ng-show and ng-hide and to control their visibility using variables? Because sometimes I might like to hide/show multiple components Jun 30, 2015 at 14:39
39

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.

2
  • 6
    Unfortunately as ui-router readme says: Note: UI-Router is under active development. As such, while this library is well-tested, the API may change. Consider using it in production applications only if you're comfortable following a changelog and updating your usage accordingly.
    – trainoasis
    Feb 21, 2014 at 8:07
  • 1
    @trainoasis Used it for multiple projects, Seems 'very' stable and up to now i had no issue about changing API, in fact i don't remember any major change in API.
    – Morteza
    Nov 21, 2015 at 6:23
18

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.

2
  • 2
    In the absence of solution like UI-Router, ng-include is indeed a viable alternative, as you have explained. What ng-include cannot accomplish is URL(state) driven multi views, $route cannot dynamically render different views based on current URL. We could twist the arms of Angular and make it happen by using custom logic in the controller, like the example in ng-include documentation, but it is not desirable application architecture pattern, UI-Router is the right type of solution.
    – Yiling
    Mar 3, 2015 at 22:30
  • One plus for @Yiling comment. Using ng-include is a workaround. Oct 9, 2015 at 6:49
13

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).

1
  • 3
    angular-ui seems like a good choice in the (near) future but it still seems very unstable for production use Jul 19, 2013 at 19:16
8

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.

<body ng-app="main">
    <script type="text/javascript">
    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'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

You need referencing angularjs, and angular-ui.router for this sample.

$ bower install angular-ui-router
3
  • Thank you Farshid this is Great! It should be mentioned in the angular-ui/ui-router Github repository github.com/angular-ui/ui-router where I got the module Oct 14, 2015 at 15:06
  • I'm not sure why you'd need to do that. Why not ng-include the header/footer and the ng-view the content?
    – user441521
    Oct 20, 2016 at 16:47
  • ng-include will work if the files are hosted, for eg. on nodejs. If working with local directory, it would throw a cross domain error.
    – Sid
    Jun 6, 2018 at 10:59
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.