I'm using $routeProvider to change a page (telmplate) and controller when user click a link.
Like this:
$routeProvider.when('/profile/', {
templateUrl: '/app/views/profile.html',
controller: 'ProfileCtrl'
}).when('/timeline/', {
templateUrl: '/app/views/timeline.html',
controller: 'TimelineCtrl'
}).when('/chat/:username', {
templateUrl: function(param){
if(param){
return '/app/views/chat.html?' + param;
}
return '/';
},
controller: 'ChatCtrl'
}).otherwise({ redirectTo: '/' });
The problem is there are so many pages on my app and I need to register every single url on .when condition repetitively, whereas the template url and controller name is loaded based on link path.
My question is: Can I generalized all those when condition into a single when statement?
Like this:
$routeProvider.when(url, {
templateUrl: '/app/views/' + url + '.html',
controller: url + 'Ctrl'
});
Thanks in advance :)
You can try something like below:
angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/page/:name', {
templateUrl: function(urlattr){
return '/pages/' + urlattr.name + '.html';
},
controller: urlattr.name+'Ctrl.js'
});
}
]);
Please try it. In this case I am assuming your html page name is same as Controller name and have 'Ctrl' as suffix.
Related
I am an AngularJS beginner. I have the following code:
A component defined by the following js file:
angular.module('EasyDocsUBBApp')
.component('loginTag', {
templateUrl: 'login-tag/login-tag.html',
controller: function () {
alert(1);
this.login = function () {
console.log(this.username + ':' + this.password);
};
}
});
The content of my app.js file, where I also configured the routing is:
var app = angular.module('EasyDocsUBBApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login-tag/login-tag.html'
})
.when('/test', {
templateUrl: 'test.html'
})
.otherwise({
redirectTo: 'login-tag/login-tag.html'
});
});
My issue is that the controller is not loaded (the alert window does not appear). Could someone indicate me what I did wrong? (if any supplementary details on my code are needed, please tell me)
In your configuration for $routeProvider, try this:
.when('/', {
template: '<login-tag></login-tag>'
})
Remember to add your component.js to your index file.
I'm using routeProvider to set the controller and a route param when my application is configured. Here's the code that I'm using:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/person/:uuid/report', { controller: 'CandidateCtrl' }).
when('/person/:uuid/confirm', { controller: 'ConfirmCtrl', }).
when('/person/add', { controller: 'AddCtrl' })
}]);
However, the controller is not being set correctly. Additionally, when I set the controller with ng-controller in the page itself, the routeParams object is empty. What am I doing wrong?
Edit:
I've also tried this, which also isn't associating the controller with the page nor setting the route-params.
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/person/:uuid/report', { controller: 'CandidateCtrl', template: 'templates/report.html' }).
when('/person/:uuid/confirm', { controller: 'ConfirmCtrl', template: 'templates/confirm.html' }).
when('/person/add', { controller: 'AddCtrl', template: 'templates/add.html' })
}]);
Here's the controller that I'm testing this out with:
appController.controller('CandidateCtrl', ['$routeParams',
function($routeParams) {
console.log($routeParams);
}]);
Try to add templateUrl
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/person/:uuid/report', {
templateUrl: 'partials/CandidateCtrl.html', //TODO : replace with the good template
controller: 'CandidateCtrl'
}).
when('/person/:uuid/confirm', {
templateUrl: 'partials/ConfirmCtrl.html', //TODO : replace with the good template
controller: 'ConfirmCtrl'
}).
when('/person/add', {
templateUrl: 'partials/AddCtrl.html', //TODO : replace with the good template
controller: 'AddCtrl'
}).
otherwise({
redirectTo: 'Something' //TODO : replace with the good url
});
}]);
I was serving the views by via my web-mvc. I've since changed it to serve a layout and have the partial pages be kept in the resource folder.
From below angularJS code I want to get parameter namee in templateUrl please help me to generate dynamic templateurl.
sampleApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/AddNewOrder/:namee', {
controller: 'AddOrderController',
templateUrl:'templates/'+namee +'.html';
}).
when('/ShowOrders/:name', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder/add_orders'
});
}]);
You can pass a function as a value to templateUrl. The function return value will be the value for templateUrl. Function have access to the url attributes.
Note that the wildcard url name will be the value that you want to access. In your case its namee. console.log(attrs), if you want to see details of the attrs.
$routeProvider.
when('/AddNewOrder/:namee', {
controller: 'AddOrderController',
templateUrl: function(attrs) {
return 'templates/'+ attrs.namee +'.html';
}
})
is it possible to load url from controllers in routeProvider?
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/LALA', {
controller: 'LalaController',
templateUrl: '/mlala.html'
})
.when('/HOHO', {
controller: 'HohoController',
templateUrl: '/hoho.html'
})
.otherwise({redirectTo: '/'});
and I would like something like this:
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/MO', {
controller: 'MOController',
templateUrl: $scope.url
})
.when('/MOCache', {
controller: 'MOCacheController',
templateUrl: $scope.url
})
.otherwise({redirectTo: '/'});
Route URLs would be defined in Controllers.
Well, no.
But you can use named groups, assign a function to templateUrl and get the route parameters passed in:
.when('/MO/:page', { // <-- ':page' is a named group in the pattern
controller: 'MOController',
templateUrl: function (params) {
// use the route parameters to return a custom route
return 'views/partials/mo/' + params.page + '.html';
}
})
Than you can just inject whatever custom parameter you like in your views, e.g.:
<!-- 'paws' and 'whiskers' will be passed to the route params -->
paws page!
whiskers page!
Look, mommy, no controllers!
Reference
$routeProvider on the AngularJS docs.
I have a 'route' in Angular JS as follows
$routeProvider.when('/foos/:fooId', { controller: FooController, templateUrl: 'foo.html'});
and it works great, unless the :fooId component contains either a '/' or '%2F' (encoded form)
How can I make this work, my 'fooId' can contain /s ?
You can't easily do this because if you use a link with %2F in it, the browser will just decode it for you and it'll end up being /. AngularJS currently doesn't allow you to use / in $route params.
You can double encode it, like in this plnkr: http://plnkr.co/edit/e04UMNQWkLRtoVOfD9b9?p=preview
var app = angular.module('app', []);
app.controller('HomeCtrl', function ($scope, $route) {
});
app.controller('DirCtrl', function ($scope, $route) {
var p = $route.current.params;
$scope.path = decodeURIComponent(p.p1);
});
app.config(function ($routeProvider) {
$routeProvider
.when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'})
.when('/dir/:p1', {templateUrl: 'dir.html', controller: 'DirCtrl'})
.otherwise({redirectTo: '/'});
});
And the link would be: click here.
Another option, if you have a set number of / characters in your parameters can be found here: How can I make the angular.js route the long path
Based on the answer of Langdon, I created a filter which encodes everything twice, and another one which decodes:
.filter('escape', function() {
return function(input) {
return encodeURIComponent(encodeURIComponent(input));
};
})
.filter('unescape', function() {
return function(input) {
return decodeURIComponent(input);
};
});
I use this in my product links as follows:
<a href="#/p/{{product.id}}/{{product.name | escape}}">
On the product page, I decode the product name:
<h1>{{product.name | unescape}}</h1>
You need not to encode anything here. Just add * in your path Param as mentioned below and enable html5Mode
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {templateUrl: 'home.html', controller: 'HomeCtrl'})
.when('/base/:path*', {templateUrl: 'path.html', controller: 'pathCtrl'})
.otherwise({redirectTo: '/home'});
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
include
$locationProvider.hashPrefix('');
in your config.