I have a route like this:
$routeProvider.when('/test/item/:item', {
templateUrl: '/test/test.html'
, controller: 'TestController'
});
Now I want to load different templateUrl depending on different :item value, How do I do it in angularJS?
for example:
$routeProvider.when('/test/item/:1', {
templateUrl: '/test/test1.html'
, controller: 'TestController'
});
$routeProvider.when('/test/item/:2', {
templateUrl: '/test/test2.html'
, controller: 'TestController'
});
Thanks in advance.
templateUrl can be a function as well and you get the first argument will be route params:
So you can do something like this:-
$routeProvider.when('/test/item/:item', {
templateUrl: function(param){
return '/test/test' + param.name + '.html'
/*if(param.name === 'somevalue'){
return someurl;
}
return someotherurl;*/
}
, controller: 'TestController'
});
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.} - route parameters extracted from the current $location.path() by applying the current route
Related
My question is simple, but I couldn't find solution anywhere else.
For example I have a normal route state with parameter,
.state('page', {
url: '/page/:pageid',
templateUrl: 'templates/pages.html',
controller: 'pagesCtrl'
})
However for example, if I have 1000 pages, but for the Number 1 and Number 999 pages I have to use another template. How could I simply do this? Something like
.state('page', {
url: '/page/:pageid',
templateUrl: 'templates/pages.html',
controller: 'pagesCtrl'
})
.state('page', {
url: '/page/1',
templateUrl: 'templates/page1.html',
controller: 'pagesCtrl'
})
.state('page', {
url: '/page/999',
templateUrl: 'templates/page999.html',
controller: 'pagesCtrl'
})
Will this work？I tested, the later 2 options are not overriding the original state with parameter.
If I wish to use the same controller, how to load the 1 and the 999 as the pageid parameter in the controller?
Definitely you shouldn't have two more state for separate template. You should use single generic state which will take templateUrl with the help of passed state parameter.
Code
.state('page', {
url: '/page/:id',
templateUrl: function($stateParams){
var template = $stateParams.id.indexOf([1, 1000]) > -1?'pages.html'
:'page'+$stateParams.id+'.html';
return 'templates/'+template ,
}
controller: 'pagesCtrl'
})
I have a query related to setting controllers at runtime.
I want something like:
.state{'app.thisState',
url: '/thisUrl',
views:{
templateUrl: 'templates/some_template.html',
controller: 'XYZCtrlr' //This is where I want to set different controllers depending on the scenario.
}};
How can we set controllers at runtime?
You could use controllerProvider option of ui-router state
.state ('app.thisState', { //<-- correct syntax here
url: '/thisUrl',
views: {
templateUrl: 'templates/some_template.html',
controller: 'XYZCtrlr',
controllerProvider: function($stateParams) { //<-- add dependencies here
//perform logic here
var ctrlName = $stateParams.type + "Controller";
return ctrlName; //return string name here, which will the name of controller.
}
}
};
I've a table containing edit button to update the record. When I'm passing single id to ng-href its working fine and opening form page:
Ex: In my index.html table
<a class="btn btn-warning" ng-href="#/provider/{{row._id}}">Edit</a>
But I want to pass one more parameter along with row._id to ng-href like:
<a class="btn btn-warning" ng-href="#/provider/{{row._id}}/collectionName/{{collectionName}}">Edit</a>
Its not working and redirecting to home page.
Here's my controller:
$timeout(function () {
if ($routeParams.id !== undefined) {
$http.get('/providerlist/'+$routeParams.id, {
params:{
id:$routeParams.id,
collectionName:$routeParams.collectionName
}
}).success(function (response) {
alert(response);
$scope.providerList = response;
$scope.id = response['_id'];
});
}
});
app.js for routing:
var ProviderApp = angular.module('ProviderApp', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'templates/home/index.html',
controller: 'HomeController',
controllerAs: 'home'
})
.when('/provider', {
templateUrl: 'templates/provider/index.html',
controller: 'ProviderController',
controllerAs: 'provider'
})
.when('/provider/:id', {
templateUrl: 'templates/provider/form.html',
controller: 'ProviderController',
controllerAs: 'provider'
})
.otherwise({
redirectTo: '/home'
});
}]);
Here what exactly I want to do is after clicking on edit button it should redirect to form.html with parameter/data of id and collectionName
Any help would be appreciated.
If you want to use multiple params in ng-href you should also update your route url in app.js.
when you used multiple parameters in ng-href but no route matching with this route then worked otherwise route that redirect to home.
you can try it.
in html:
<a class="btn btn-warning" ng-href="#/provider/{{row._id}}/collectionName/{{collectionName}}">Edit</a>
add a route in app.js like
.when('/provider/:id/collectionName/:cName', {
templateUrl: 'templates/provider/form.html',
controller: 'YourController'
});
and in controller need to change like:
$http.get('/providerlist/'+$routeParams.id +'/collectionName/'+ $routeParams.cName)
.success(function (response) {
alert(response);
$scope.providerList = response;
$scope.id = response['_id'];
});
so server side route should be like: /providerlist/:id/collectionName/:cName
The path in ngRoute path can contain named groups starting with a colon and ending with a star like :name* , All characters are eagerly stored in $routeParams under the given name when the route matches.
For example, routes like : /color/:color/largecode/:largecode*/edit
For this sample URL : /color/brown/largecode/code/with/slashes/edit
And extract:
color: brown
largecode: code/with/slashes.
So in your case it the Route will be
.when('/provider/:id*\/collectionName/:collectionName*\', {
templateUrl: 'templates/provider/form.html',
controller: 'ProviderController',
controllerAs: 'provider'
})
This will ensure that even if there are special characters and forward slashes in your resultant href link you are redirected to proper controller and page...
i'm investigating if i can have what the title says.
Here's my thought.
Let's assume that i've got this routes:
.when('/', {
templateUrl : 'partials/homepage.html',
})
.when('/test', {
templateUrl : 'partials/test.html',
})
.when('/page/:pageID', {
templateUrl : 'partials/page.html',
})
.when('/page/single/:pageID', {
templateUrl : 'partials/page-single.html',
})
Until now i had the opportunity to add the templateUrl as also the controller details in the route and everything was working just fine.
Now the app is changed and there is only one controller with all the information needed and must remain one controller. And the routes will be something like that:
.when('/:templateName/:pageID', {
controller: 'myCtrl'
})
Can i set from the controller the template id by getting the templateName parameter? And if so how about the last route example /page/single/:pageID? How can i know that there is a second option in route?
I can take the templateName parameter and see it changing with the $routeChangeSuccess method but i cannot find any way to set the template on the fly.
Any ideas?
One solution could be the following one:
angular.module('myapp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/:templateName/:pageId', {
templateUrl: function(urlattr){
return '/pages/' + urlattr.templateName + '.html';
},
controller: 'YourCtrl'
});
}
]);
From the AngularJs 1.3 Documentation:
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
I would move your singleton logic from your controller to a service. Since you didn't provide much code below is an example to give you an idea how it could work.
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/homepage.html',
controller: 'SingleController'
})
.when('/test', {
templateUrl: 'partials/test.html',
controller: 'SingleController'
})
.when('/page/:pageId', {
templateUrl: 'partials/page.html',
controller: 'SingleController'
});
});
app.provider('appState', function() {
this.$get = [function() {
return {
data: {}
};
}];
});
app.controller('SingleController', function ($scope, appState) {
$scope.data = appState.data;
});
But if it must be a singleton controller you actually could use the ng-controller directive before your ng-view directive so it becomes a $rootScope like scope for all your views. After that just add empty function wrappers in your $routeProvider for the controllers.
$routeProvider
.when('/default', {
templateUrl: 'HTML/login.html',
controller : 'funct2'
}).when('/adminMenu/:username', {
templateUrl: 'HTML/adminMenu.html',
controller : 'admin'
}).otherwise({
redirectTo : '/default'
});
When i try to use the controller adminMenu i get a no adminMenu defined even though its defined with in the js files linked to adminMenu.html.
When going to the individual adminMenu.html page it loads, however when specifying the controller in routeProvider it never loads. Any ideas?
if you defined your controller like this:
function MyCtrl($scope) {
}
You will have to specify your controller like this (without the quotes):
.when('/default', {
templateUrl: 'myCtrl.html',
controller : MyCtrl
})