AngularJS - Come utilizzare $ routeParams nella generazione di templateUrl?

La nostra applicazione ha una navigazione a 2 livelli. Vogliamo utilizzare AngularJS $routeProviderper fornire dinamicamente modelli a un file <ng-view />. Stavo pensando di fare qualcosa sulla falsariga di questo:

angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/:primaryNav/:secondaryNav', {
        templateUrl: 'resources/angular/templates/nav/'+<<primaryNavHere>>+'/'+<<secondaryNavHere>>+'.html'
    });
}]);

Non so come popolare le parti all'interno del file <<>>. So che il primaryNav e il secondaryNav vengono associati a $ routeParams, ma come posso accedere a $ routeParams qui per servire dinamicamente il modello?

Non sono riuscito a trovare un modo per iniettare e utilizzare il $routeParamsservizio (che presumo sarebbe una soluzione migliore) Ho provato questo pensando che potrebbe funzionare:

angular.module('myApp', []).
    config(function ($routeProvider, $routeParams) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html'
        });
    });

Che ha prodotto questo errore:

Provider sconosciuto: $ routeParams da myApp

Se qualcosa del genere non è possibile, puoi cambiare il tuo templateUrlin modo che punti a un file HTML parziale che ha ng-includee quindi impostare l'URL nel tuo controller usando $routeParams come questo:

angular.module('myApp', []).
    config(function ($routeProvider) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/urlRouter.html',
            controller: 'RouteController'
        });
    });

function RouteController($scope, $routeParams) {
        $scope.templateUrl = 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html';
    }

Con questo come tuo urlRouter.html

<div ng-include src="templateUrl"></div>

Questa funzionalità molto utile è ora disponibile a partire dalla versione 1.1.2 di AngularJS. È considerato instabile ma l'ho usato (1.1.3) e funziona bene.

Fondamentalmente puoi usare una funzione per generare una stringa templateUrl. Alla funzione vengono passati i parametri di route che è possibile utilizzare per creare e restituire la stringa templateUrl.

var app = angular.module('app',[]);

app.config(
    function($routeProvider) {
        $routeProvider.
            when('/', {templateUrl:'/home'}).
            when('/users/:user_id', 
                {   
                    controller:UserView, 
                    templateUrl: function(params){ return '/users/view/' + params.user_id; }
                }
            ).
            otherwise({redirectTo:'/'});
    }
);

Mille grazie a https://github.com/lrlopez per la richiesta pull.

https://github.com/angular/angular.js/pull/1524

templateUrl può essere utilizzato come funzione con la restituzione dell'URL generato. Possiamo manipolare l'URL passando l'argomento che accetta routeParams.

Guarda l'esempio.

.when('/:screenName/list',{
    templateUrl: function(params){
         return params.screenName +'/listUI'
    }
})

Spero che questo aiuto.

Va bene, penso di aver capito ...

Prima un po 'di background: il motivo per cui avevo bisogno di questo era attaccare Angular su Node Express e fare in modo che Jade elaborasse i miei parziali per me.

Quindi ecco cosa devi fare ... (bevi birra e trascorri più di 20 ore prima !!!) ...

Quando imposti il ​​tuo modulo, salva $routeProviderglobalmente:

// app.js:
var routeProvider
    , app = angular.module('Isomorph', ['ngResource']).config(function($routeProvider){

        routeProvider = $routeProvider;
        $routeProvider
            .when('/', {templateUrl: '/login', controller: 'AppCtrl'})
            .when('/home', {templateUrl: '/', controller: 'AppCtrl'})
            .when('/login', {templateUrl: '/login', controller: 'AppCtrl'})
            .when('/SAMPLE', {templateUrl: '/SAMPLE', controller: 'SAMPLECtrl'})
            .when('/map', {templateUrl: '/map', controller: 'MapCtrl'})
            .when('/chat', {templateUrl: '/chat', controller: 'ChatCtrl'})
            .when('/blog', {templateUrl: '/blog', controller: 'BlogCtrl'})
            .when('/files', {templateUrl: '/files', controller: 'FilesCtrl'})
            .when('/tasks', {templateUrl: '/tasks', controller: 'TasksCtrl'})
            .when('/tasks/new', {templateUrl: '/tasks/new', controller: 'NewTaskCtrl'})
            .when('/tasks/:id', {templateUrl: '/tasks', controller: 'ViewTaskCtrl'})
            .when('/tasks/:id/edit', {templateUrl: '/tasks', controller: 'EditTaskCtrl'})
            .when('/tasks/:id/delete', {templateUrl: '/tasks', controller: 'DeleteTaskCtrl'})
        .otherwise({redirectTo: '/login'});

});

// ctrls.js
...
app.controller('EditTaskCtrl', function($scope, $routeParams, $location, $http){

    var idParam = $routeParams.id;
    routeProvider.when('/tasks/:id/edit/', {templateUrl: '/tasks/' + idParam + '/edit'});
    $location.path('/tasks/' + idParam + '/edit/');

});
...

Potrebbe trattarsi di più informazioni di quelle necessarie ...

• Fondamentalmente, vorrai memorizzare $routeProviderglobalmente la variabile del tuo modulo , ad esempio in routeProvidermodo che possa essere accessibile dai tuoi controller.

• Quindi puoi semplicemente usare routeProvidere creare una NUOVA rotta (non puoi 'RESETTARE una rotta' / 'REpromettere'; devi crearne una nuova), ho appena aggiunto una barra (/) alla fine in modo che sia semantica come il primo.

• Quindi (all'interno del controller), imposta templateUrlla visualizzazione che desideri colpire.

• Elimina la controllerproprietà .when()dell'oggetto, per evitare di ottenere un ciclo di richieste infinito.

• E infine (sempre all'interno del Controller), utilizzare $location.path()per reindirizzare al percorso appena creato.

Se sei interessato a come inserire un'app Angular su un'app Express, puoi eseguire il fork del mio repository qui: https://github.com/cScarlson/isomorph .

E questo metodo ti consente anche di mantenere le associazioni di dati bidirezionali AngularJS nel caso in cui desideri associare il tuo HTML al tuo database utilizzando WebSocket: altrimenti senza questo metodo, le tue associazioni di dati angolari verranno semplicemente emesse {{model.param}}.

Se lo cloni in questo momento, avrai bisogno di mongoDB sulla tua macchina per eseguirlo.

Spero che questo risolva questo problema!

Cody

Non bere l'acqua del bagno.

Router: -

...
.when('/enquiry/:page', {
    template: '<div ng-include src="templateUrl" onload="onLoad()"></div>',
    controller: 'enquiryCtrl'
})
...

Controllore: -

...
// template onload event
$scope.onLoad = function() {
    console.log('onLoad()');
    f_tcalInit();  // or other onload stuff
}

// initialize
$scope.templateUrl = 'ci_index.php/adminctrl/enquiry/'+$routeParams.page;
...

Credo che sia una debolezza in angularjs che $ routeParams NON è visibile all'interno del router. Un piccolo miglioramento farebbe la differenza durante l'implementazione.

Ho aggiunto il supporto per questo nel mio fork di angular. Ti permette di specificare

$routeProvider
    .when('/:some/:param/:filled/:url', {
          templateUrl:'/:some/:param/:filled/template.ng.html'
     });

https://github.com/jamie-pate/angular.js/commit/dc9be174af2f6e8d55b798209dfb9235f390b934

non sono sicuro che verrà raccolto perché è un po 'controcorrente per angolare, ma mi è utile

//module dependent on ngRoute  
 var app=angular.module("myApp",['ngRoute']);
    //spa-Route Config file
    app.config(function($routeProvider,$locationProvider){
          $locationProvider.hashPrefix('');
          $routeProvider
            .when('/',{template:'HOME'})
            .when('/about/:paramOne/:paramTwo',{template:'ABOUT',controller:'aboutCtrl'})
            .otherwise({template:'Not Found'});
    }
   //aboutUs controller 
    app.controller('aboutCtrl',function($routeParams){
          $scope.paramOnePrint=$routeParams.paramOne;
          $scope.paramTwoPrint=$routeParams.paramTwo;
    });

in index.html

<a ng-href="#/about/firstParam/secondParam">About</a>

firstParam e secondParam possono essere qualsiasi cosa in base alle tue esigenze.

Stavo riscontrando un problema simile e ho usato $stateParamsinvece dirouteParam