All geek questions in one place

Does AngularJS have dynamic routing?

Does angular support dynamic routing? Maybe some trick like this:

$routeProvider.when('/:ctrl/:action', getRoute($routeParams.ctrl,$routeParams.action)) function getRoute(ctrl, action){ return { templateUrl: ctrl+"-"+action+".html" controller: 'myCtrl' } }

Please help me, I need to get templateUrl from route Params

+4
source share
2 answers

This is a late answer, but I myself ran into this problem, but it turns out that the Dan solution conflicts with the ngAnimate classes in the ngView directive and the view is displayed, but the ng-leave animation will be applied immediately and hide the view opened by its dynamic routing.

I found the perfect solution here and it is available in 1.1.5 +

In $routeProvider value of templateUrl can be a function and passed in route parameters:

 app.config(function ($routeProvider) { $routeProvider .when('/:page', { templateUrl: function(routeParams){ return '/partials/'+routeParams.page+'.html'; } }) });

Although the controller cannot be specified as a function, so my solution is to give it in the html template, as usual, using ng-controller="HomeCtrl" .

Using this solution, we can route by convention in Angular. Hope this helps others who were not interested in manually adding each route to routeProvider.

+7
source

You want to bring it to the controller level.

In this example, I redefine whole pages as well as partial subdomains:

app.js

 config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider.when('/', { template: 'home' }); $routeProvider.when('/contact', { template: 'contact' }); $routeProvider.otherwise({redirectTo: '/'}); }])

controllers.js

 controller('AppController', ['$scope','Views', function($scope, Views) { $scope.$on("$routeChangeSuccess",function( $currentRoute, $previousRoute ){ $scope.page = Views.returnView(); }); $scope.returnView = function(partial){ return Views.returnView(partial); } }])

services.js

 factory('Views', function($location,$route,$routeParams,objExistsFilter) { var viewsService = {}; var views = { subdomain1:{ 'home':'/views/subdomain1/home.html' }, subdomain2:{ }, 'global.header':'/views/global.header.html', 'global.footer':'/views/global.footer.html', 'home':'/views/home.html', 'home.carousel':'/views/home.carousel.html', 'contact':'/views/contact.html', }; viewsService.returnView = function(partial) { var y = (typeof partial === 'undefined')?$route.current.template:partial; var x = $location.host().split("."); return (x.length>2)?(objExistsFilter(views[x[0]][y]))?views[x[0]][y]:views[y]:views[y]; }; viewsService.returnViews = function() { return views; }; return viewsService; }).

filters.js

 filter('objExists', function () { return function (property) { try { return property; } catch (err) { return null } }; });

index.html

 <!doctype html> <html lang="en" ng-controller="AppController"> <body> <ng-include src="returnView('global.header')"></ng-include> <ng-include src="page"></ng-include> <ng-include src="returnView('global.footer')"></ng-include> </body> </html>
+3
source

Source: https://habr.com/ru/post/1486675/

More articles:


All Articles