Develop Reference

Angular - Use routes parameter in route setup

I'm trying to create a BaseController which my controllers can extend to handle the history action for all models. Currently (for the other routes), I set it up like so:
$routeProvider.when('/', {
redirectTo: '/static/campaigns'
}).when('/static/campaigns/new', {
templateUrl: 'campaigns/new.html',
controller: 'CampaignNewController'
}).....
What I want to do for the history routes would be a general route which would cover all models, but I'm not sure if there's a way to use the route parameters within the setup like below.
when('/static/history/:model_name', {
templateUrl: model_name + '/history.html',
controller: model_name + 'Controller'
})

If you look at documentation :
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider#when
you may notice that, templateurl can be a string or a function. Perhaps if you created a function on the right hand side of templateUrl and injected $routeParams and read the value of model_name and returned a string with model_name, it might just work.
You wont be able to do the same for controller; however, you will have to create a service, that takes model_name as input and does the same logic as multiple controllers would.

use service property inside routeProvider

i am trying send service property catId with templateUrl request inside route
i have service formAction
myApp.factory('formAction', [function () {
var catId
return {
catId: catId,
}
}]);
route.js
function ($routeProvider) {
$routeProvider.when('/ad/step1', {
templateUrl: '/ad/place/step-one',
controller : 'Step1Controller'
}).when('/ad/step2', {
templateUrl: function () {
// i dont want pass catId as parametr
return '/ad/place/step-two?catId=' // formAction.catId.
},
controller : 'Step2Controller',
}).otherwise({
templateUrl: '/ad/place/step-one',
controller : 'Step1Controller'
});
}
when i go step2 it must be send catId with request
note: i dont want pass catId in route as parametr like:
templateUrl: function (param) {
return '/ad/place/step-two?catId=' + param.catId.
},
is there way i can do it?

So, as you're using the default (standard) angular routing, then we go to $routeProvider documentation where we can see the following:
templateUrl – {string=|function()=} – path or function that returns a
path to an html template that should be used by ngView.
If templateUrl is a function, it will be called with the following
parameters:
{Array.<Object>} - route parameters extracted from the current
$location.path() by applying the current route
Therefore, the parameters coming to templateUrl are fixed
It means that you can't inject your services into this function.
However, if you're using angular UI router (best angular routing module IMHO), then you can find that each state has an optional parameter 'templateProvider' which is a function that can be injected.
Hope it will help.

AngularJS - Conditionally set a controller for the route

I'm using the native AngularJS router and was wondering if there is a way to assign a controller to a route conditionally. For example, let's say I have three user types:
Guest
User
System Admin
When they come to the home page, I want to be able assign a different controller based on the user type. So I would have three registered controllers: guestHomeCtrl, userHomeCtrl, systemAdminHomeCtrl.
I imagined something like this:
$routeProvider
.when( '/' , {
controller: getHomeCtrl(),
controllerAs: 'homeCtrl'
})
I know I can just pass in the string of the registered controller, but the main issue is being able to find out what type of user is logged in. I have a userService that typically keeps track of that, but it doesn't seem like I can access it from where I set up the routes. Or am I mistaken?
Any direction would help out a lot.

I would suggest using userService with a single controller. Read through the page below, specifically the resolve argument.
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
This blog post also describes how to use the resolve.
http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx
Try sending the specific function or variable you need to the controller. I used userService.User.userAccountStatus, but it really depends on the setup in your service file.
$routeProvider
.when( '/' , {
controller: HomeCtrl,
controllerAs: 'HomeCtrl',
resolve: {
userService: function(userService) {
return userService.User.userAccountStatus();
}
}
})
I use ngInject for injecting dependencies, but I assume you get the gist of giving services to a controller.
angular
.module('app')
.controller('HomeCtrl', HomeCtrl)
/** #ngInject */
function HomeCtrl($scope, $log, $state, userService) {
}
I can provide further examples if you need them.

Dynamic page in Angular route

I am trying to have dynamic routing in Angular 1.3. Something similar to what it described here and here. The examples suggest something like this:
$routeProvider.when('/:group/:pagename', {
controller: 'RouteCtrl',
templateUrl: 'uirouter.html'
})
and then the controller will have access to group and pagename through $routeParams. That works
I am trying to make this routing a little more dynamic and have template and controller to be selected dynamically as well:
$routeProvider.when('/:group/:pagename', {
controller: $routeParams.group + 'Ctrl',
templateUrl: $routeParams.pagename + '.html'
})
When I put a breakpoint on when I can see that there is $get property with a function that has $routeParams as one of parameters. But I can't figure out how to retrieve its values.
The project is in very early stage - I can go with ui-router or with ng-router if any of them has this functionality.

For the dynamic templateUrl portion you could try:
$routeProvider.when('/:group/:pagename', {
controller: "SomeCtrl",
templateUrl: function(params){return params.pagename + '.html';}
})
Not sure if the same could be done with the controller however.

Instead of a direct value you can declare a function that will return a templateUrl string, i.e.:
$routeProvider.when('/:group/:pagename', {
controller: $routeParams.group + 'Ctrl',
templateUrl: function (routeParams) {
return routeParams.pagename + '.html';
}
});
I guess the same may be true for controller, but you have to test that one out, as I've never used it for controllers.
That being said, if you have so much dynamic logic in this place, maybe instead of treating this as different controllers, you could encapsulate those views as different directives and the ng-if certain directive depending on $routeParams which will be set in one wrapping controller?

Angularjs routing not working correctly

angular.module('Stations', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/documents/:stationId', {
templateUrl: '/Scripts/Modules/checklist/views/index.html',
controller: 'checklistController'
})
.when('/documents/details', {
templateUrl: '/Scripts/Modules/checklist/views/details.html',
controller: 'checklistDetailsController'
})
});
Now if i type the url /stations#/documents/4, it jumbs to to the documents view and show all the documents in that station. But if i go to the url stations#/documents/details?Id=3&type=note, it still go to the documents main view and not the details view.
Could you please give me a hint on what i'm doing wrong?

Here the router beleives that details is a :stationId
So it matches the first route /documents/:stationId and affects the value details to the stationIdparameter.
You should change the route for the details page to
.when('/details', {
Or if you want to say that stationId must be a number, you can do that with angular ui-router :
https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters

Probably you should change the route to
.when('/documents/details/:id/:note', {... });
This would be useful to get the params using $routeParams in your controller etc.

Because first route matched is executed and details in that URL is considered as stationId.
Put second route first so that it is matched first. Like this.
angular.module('Stations', ['ngRoute']).config(function ($routeProvider) {
$routeProvider
.when('/documents/details', {
templateUrl: '/Scripts/Modules/checklist/views/details.html',
controller: 'checklistDetailsController'
})
.when('/documents/:stationId', {
templateUrl: '/Scripts/Modules/checklist/views/index.html',
controller: 'checklistController'
})
});
But this will mean, if your stationId by any chance is the word 'details', then it will be matched to first route and not to the second route. So consider avoiding this type of configuration.

You need to put in the params in the route:
.when('/documents/details:documentId', {
templateUrl: '/Scripts/Modules/checklist/views/details.html',
controller: 'checklistDetailsController'
});
See: https://docs.angularjs.org/api/ngRoute/service/$route