Instradamento in angularjs per più controller?

Sto provando a costruire una vista - Ho impostato due controller per esercitarti, il tuo HeaderCtrl, con alcuni dati in esso (titolo del sito, sfondo dell'intestazione, ecc.), L'altro dovrebbe avere il contenuto principale della pagina - MainCtrl.Instradamento in angularjs per più controller?

Quando si definisce il percorso, sto facendo in questo modo:

mainApp.config(function ($routeProvider) { 
$routeProvider 
    .when('/', 
    { 
     controller: 'MainCtrl', 
     templateUrl: 'modules/dashboard.html' 
    }) 
})

Questo funziona perfettamente bene, ma quello che vorrei è quello di specificare più parametri a questo, qualcosa di simile:

mainApp.config(function ($routeProvider) { 
$routeProvider 
    .when('/', 
    { 
     controller: 'HeaderCtrl', 
     templateUrl: 'modules/header.html' 
    }, 
    { 
     controller: 'MainCtrl', 
     templateUrl: 'modules/dashboard.html' 
    }) 
})

Questo non funziona quindi immagino che non sia il modo di farlo. Quello che sto realmente chiedendo - puoi specificare più controller in $ routeProvider? O quale sarebbe il modo corretto di costruire questa vista?

fonte

2013-06-27 greedz

Il mio approccio a questo problema sarebbe avere due direttive: intestazione e principale che fanno riferimento ai modelli corrispondenti.

Per esempio:

app.directive('header', function() { 
    return { 
    restrict: 'A', 
    replace: true, 
    templateUrl:'templates/header.html' 
    } 
})

allora si può avere una pagina che contiene le direttive - index.html.

<div header></div> 
<div main></div>

Poi hanno uno controller percorsi al vostro index.html

È inoltre possibile incapsulare l'intestazione e il principale di intestazione separata e controller principale, se si vuole affrontare separatamente.

ad es.

<div ng-controller="HeaderCtrl"> 
    <div header></div> 
</div> 
<div ng-controller="MainCtrl"> 
    <div main></div> 
</div>

o con i modelli stessi

fonte

2013-06-28 01:03:45 jeh

Ho dovuto usare 'transclude: true' per far funzionare questo metodo – ZimSystem

Non penso che sia possibile specificare più controller. Penso che quello che stai cercando è qualcosa di simile a un modello di 'index.html' che si riferisce alla vostra intestazione e cruscotto:

<div id='header' ng:controller='HeaderCtrl' /> 
<div id='main' ng:controller='MainCtrl' />

Per riempire in realtà con i modelli giusti, vorrei usare una direttiva. Penso che questa sia una delle parti più potenti dell'angolare. Puoi creare una direttiva header che puoi riutilizzare su tutte le tue pagine.

fonte

2013-06-27 23:15:19

È possibile posizionare il numero HeaderCtrl al di fuori di ng-view e quindi avere il codice MainCtrl associato al percorso dell'indice (ad es. '/'). Se è necessario associare più controller al percorso dell'indice, è possibile assegnarli all'interno del modello mappato su tale percorso. Ecco che cosa sarebbe simile:

index.html

<html> 
<body ng-app='yourApp'> 
    <div id="header" ng-controller="HeaderCtrl"></div> 
    <div ng-view></div> 
</body> 
</html>

app.js

angular.module('mainApp', []). 
config(function ($routeProvider) { 
    $routeProvider.when('/', { 
     controller: 'MainCtrl', 
     templateUrl: 'modules/dashboard.html' 
    }) 
});

dashboard.html

<div ng-controller="SomeCtrl"></div> 
<div ng-controller="SomeOtherCtrl"></div>

... o, se davvero volevi diventare creativo, potresti includereda AngularUI persone https://github.com/angular-ui/ui-router Ciò consentirebbe di avere più "viste" e mapparle ai tuoi percorsi.

fonte

2013-06-27 23:48:29

-1

Prova questa dovrebbe funzionare

mainApp.config(function ($routeProvider) { 
$routeProvider 
    .when('/', 
    { 
     controller: 'HeaderCtrl', 
     templateUrl: 'modules/header.html' 
    }).when('', //route here in the empty quotes 
    { 
     controller: 'MainCtrl', 
     templateUrl: 'modules/dashboard.html' 
    }); 
});

fonte

2013-09-20 10:56:21 rohit

si dovrebbe usare di angolare ui-router: https://github.com/angular-ui/ui-router, è possibile specificare un controller e modello per ogni "elemento" della pagina:

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

fonte

2015-08-28 18:33:15

Instradamento in angularjs per più controller?

risposta

Problemi correlati