AngularJS – Hoe $routeParams te gebruiken bij het genereren van de templateUrl?

Onze applicatie heeft navigatie op 2 niveaus. We willen AngularJS $routeProvidergebruiken om dynamisch sjablonen te leveren aan een <ng-view />. Ik dacht eraan iets in de trant van dit te doen:

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

Ik weet gewoon niet hoe ik de onderdelen binnen de <<>>moet invullen. Ik weet dat de primaryNav en secundaireNav gebonden zijn aan de $routeParams, maar hoe krijg ik hier toegang tot $routeParams om de sjabloon dynamisch weer te geven?

Antwoord 1, autoriteit 100%

Deze zeer handige functie is nu beschikbaar vanaf versie 1.1.2 van AngularJS. Het wordt als onstabiel beschouwd, maar ik heb het gebruikt (1.1.3) en het werkt prima.

In principe kunt u een functie gebruiken om een ​​templateUrl-tekenreeks te genereren. De functie krijgt de routeparameters doorgegeven die u kunt gebruiken om de templateUrl-string te bouwen en terug te sturen.

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:'/'});
    }
);

Hartelijk dank aan https://github.com/lrlopezvoor het pull-verzoek.

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

Antwoord 2, autoriteit 64%

Ik kon geen manier vinden om de service $routeParamste injecteren en te gebruiken (waarvan ik aanneem dat dit een betere oplossing zou zijn). Ik probeerde dit omdat ik dacht dat het zou kunnen werken:

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

Wat deze fout opleverde:

Onbekende provider: $routeParams van myApp

Als zoiets niet mogelijk is, kunt u uw templateUrlwijzigen om te verwijzen naar een gedeeltelijk HTML-bestand dat alleen ng-includeheeft en vervolgens de URL in uw controller die $routeParams als volgt gebruikt:

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';
    }

Met dit als uw urlRouter.html

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

Antwoord 3, autoriteit 15%

templateUrl kan worden gebruikt als functie met het retourneren van gegenereerde URL. We kunnen de url manipuleren met een argument dat routeParams nodig heeft.

Zie het voorbeeld.

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

Ik hoop dat dit helpt.

Antwoord 4, autoriteit 5%

Ok, ik denk dat ik het snap…

Beetje achtergrond eerst:
De reden dat ik dit nodig had, was om Angular bovenop Node Express te plakken en Jade mijn deelstukken voor mij te laten verwerken.

Dus hier is wat je moet doen…
(drink bier en besteed er eerst 20+ uur aan!!!)…

Als u uw module instelt, slaat u de $routeProviderglobaal op:

// 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/');
});
...

Dat is misschien meer informatie dan nodig was…

• Kortom, u wilt de $routeProvider-var van uw Module globaal opslaan, bijvoorbeeld als routeProviderzodat deze toegankelijk is voor uw controllers.

• Dan kun je gewoon routeProvidergebruiken en een NIEUWE route maken (je kunt niet ‘RESET a route’ / ‘REpromise’; je moet een nieuwe maken), ik heb zojuist toegevoegd een schuine streep (/) aan het einde zodat het net zo semantisch is als de eerste.

• Vervolgens (in uw controller) stelt u de templateUrlin op de weergave die u wilt bereiken.

• Haal de eigenschap controllervan het object .when()uit, anders krijg je een oneindige verzoeklus.

• En tot slot (nog steeds in de controller), gebruik $location.path()om om te leiden naar de route die zojuist is gemaakt.

Als je geïnteresseerd bent in hoe je een Angular-app op een Express-app kunt slaan, kun je mijn repo hier forken: https://github.com/cScarlson/isomorph.

En met deze methode kun je ook de AngularJS bidirectionele gegevensbindingen behouden voor het geval je je HTML aan je database wilt binden met behulp van WebSockets: anders zullen je Angular gegevensbindingen zonder deze methode gewoon {{model.param}}.

Als je dit op dit moment kloont, heb je mongoDB op je computer nodig om het uit te voeren.

Ik hoop dat dit dit probleem oplost!

Cody

Drink je badwater niet.

Antwoord 5, autoriteit 2%

Router:-

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

Controller:-

...
// 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;
...

Ik geloof dat het een zwak punt is in angularjs dat $routeParams NIET zichtbaar is in de router. Een kleine verbetering zou een wereld van verschil maken tijdens de implementatie.

Antwoord 6, autoriteit 2%

Ik heb hiervoor ondersteuning toegevoegd in mijn vork van hoekig. Hiermee kunt u specificeren

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

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

Ik weet niet zeker of dit wordt opgepikt omdat het een beetje tegen de stroom in is voor hoekig, maar het is nuttig voor mij

Antwoord 7

//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 en secondParam kunnen alles zijn volgens uw behoeften.

Antwoord 8

Ik had een soortgelijk probleem en gebruikte $stateParamsin plaats van routeParam