Defining ng-view="NAME" from RouteProvider

Question

I'm really new to Angular and I have a little question about sending a template or URL into a ng-view. But the way I intend to do I may have to ng-view in my base template.

When my template base is like this:

<body>
   <div ng-view></div>
</body>

And my JS looks like:

var app = angular.module('myApp',[])
.config(['$routeProvider', '$locationProvider', '$httpProvider', function($routeProvider, $locationProvider, $httpProvider) {
    $routeProvider
    .when('/home', {
        templateUrl: '/contato'
    })
(...)

Works fine loading URL inside ng-view when I have only ONE ng-view case, HOW ABOUT IF I need to have more then one ng-view to load ? (like: ng-view="area1" and ng-view="area2")

I've tried in each $routeProvider, but won't work:

    $routeProvider
    .when('/home', {
        area1: {templateUrl: '/path1'},
        area2: {templateUrl: '/path2'}
})

How would be the right way to set each ng-view separately?

Appreciate any help! Thanks.

jpmorin · Accepted Answer · 2013-10-09T03:45:25.280

Unfortunately, as you know now, you cannot have more than one ng-view on your page. You should have a look at UI-Router from AngularUI which does exactly what you are looking for (https://github.com/angular-ui/ui-router).

An example from their doc (https://github.com/angular-ui/ui-router#multiple--named-views):

setup

var myApp = angular.module('myApp', ['ui.router']);

html

<body>
    <div ui-view="viewA"></div>
    <div ui-view="viewB"></div>
    <!-- Also a way to navigate -->
    <a ui-sref="route1">Route 1</a>
    <a ui-sref="route2">Route 2</a>
</body>

template 1

<h1>State 1</h1>

template 2

<h1>State 2</h1>

js

myApp.config(function($stateProvider, $routeProvider) {

  $stateProvider
    .state('index', {
      url: "",
      views: {
        "viewA": { template: "index.viewA" },
        "viewB": { template: "index.viewB" }
      }
    })
    .state('route1', {
      url: "/route1",
      views: {
        "viewA": { templateUrl: "route1.viewA.html" },
        "viewB": { templateUrl: "route1.viewB.html" }
      }
    })
    .state('route2', {
      url: "/route2",
      views: {
        "viewA": { templateUrl: "route2.viewA.html" },
        "viewB": { templateUrl: "route2.viewB.html" }
      }
    });
});

Here you could specify a controller at the state level, that would be effective for both views, or at the view level, in order to set two different controllers.

Edit: Live demo from ui-router docs (http://plnkr.co/edit/SDOcGS?p=preview)

I've been seeing a lot of UI-Router in SO lately. I think I might give it a try on a project I'm working on which could use some extra views for a single page. — francisco.preller, Oct 09 '13 at 03:44
I added the plunker demo for the example, have a look and see if it fits your needs! — jpmorin, Oct 09 '13 at 03:46

score 3 · Answer 2 · edited Jun 20 '20 at 09:12

3

Basically you can't have two ng-view. Have a look at this SO question:

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 09 '13 at 02:32

Julian

505
2
10

To have 2 ng-views based on routes though, they will need two app modules configured, for the same route but different templates. – Erstad.Stephen Oct 09 '13 at 02:34
You are write. I was under the impression you could have more than one ng-app on the page. Now that I have tested it and looked at the documentation, I stand corrected. – Erstad.Stephen Oct 09 '13 at 03:31

Defining ng-view="NAME" from RouteProvider

2 Answers2