Geek Answers Handbook

Ng-view = "NAME" definition from RouteProvider

I am really new to Angular and I have a little question about submitting a template or url to ng-view. But just as I am going to do, I may need ng-view in my base template.

When my template database looks like this:

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

And my JS looks like this:

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

Works with exact loading of the URL inside ng-view when I have only one case of ng-view, HOW TO ENSURE IF I need to have more than one ng-view to load? (for example: ng-view = "area1" and ng-view = "area2")

I tried in each $ routeProvider, but did not work:

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

How to install each ng-view separately?

Appreciate any help! Thanks.

+4
source share
2

, , ng-view. UI-Router AngularUI, , (https://github.com/angular-ui/ui-router).

(https://github.com/angular-ui/ui-router#multiple--named-views):

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>

1

<h1>State 1</h1>

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" }
      }
    });
});

, , .

: ui-router (http://plnkr.co/edit/SDOcGS?p=preview)

+3

ng-view. :

ng-view.

: ng-include, ng-switch routeProvider.

+3

More articles:


All Articles