I am an amateur with angular. I am using route provider to load separate html pages and controllers. This works fine when I know what pages the site has and I can define them.
app.config(function($routeProvider) {
$routeProvider
.when("/page1", {
templateUrl: "../page1.html",
controller: "Page1Ctrl"
})
.when("/page2", {
templateUrl: "../page2.html",
controller: "Page2Ctrl"
})
.when("/page3", {
templateUrl: "../page3.html",
controller: "Page3Ctrl"
})
.otherwise({
redirectTo: "/page1"
});
});
However, in future, more pages may be added and I want to code a way for angular to take this into accout. Something like;
app.config(function($routeProvider) {
(..figure out n...)
$routeProvider
.when("/page"+n, {
templateUrl: "../page"+n+".html",
controller: "Page"+n+"Ctrl"
})
.otherwise({
redirectTo: "/page1"
});
});
I cannot figure out how to return a var listing the current page so I can remove '/page' to manipulate the int as n.
I tried console logging $routeProvider but .when simply returns a function. I don't think injecting $scope is wise because obviously a var is passed somewhere using $routeProvider alone.
If you use colon (:) in the route, Angular will parse that and populate the $routeParams with it, then, in your templateUrl, instead of a string, you can use a function which returns the template url. Just inject the $routeParams in the templateUrl's function and build the url you need.
$routeProvider
.when( '/page/:pageNumber', {
templateUrl: function ($routeParams) {
return 'page_' + $routeParams.pageNumber + '.html'
}
})
.otherwise( { redirectTo: '/page/1' } );
Here is a working fiddle.
Related
trying to set the default route when it fails but for some reason it does not work with my SPA.
here is the current code
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/index.html',
controller: 'IndexCtrl'
})
.otherwise({
redirectTo: '/'
});
});
also tried to change otherwise to
.otherwise({
redirecTo: function(){
return '/'
}
});
on the other hand if I put template url within otherwise it works
.otherwise({
templateUrl: 'templates/index.html',
controller: 'IndexCtrl'
});
really don't understand why it behaves differently !?
I edited one of my ng-Route tests to essentially have the same setup as your when('/') and otherwise methods, but mine is working just fine:
https://codepen.io/tcraw/pen/vRpOXz
The only thing I can think of at this point is that perhaps your templateUrl is incorrect...
Do you have another view to test in the templates directory? (e.g. templates/otherView.html)
Reference
$routeProvider
I have several views that use the same template, only the number of route params is different, how can I set it up so that the view doesn't get rerendered every time the route changes, tried with reloadOnSearch: false, but it didn't work for some reason.
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/feeds', {
templateUrl: 'partials/feeds.html',
controller: 'FeedsController'
})
.when('/feeds/:country', {
templateUrl: 'partials/feeds.html',
controller: 'FeedsController'
})
.when('/feeds/:country/:competition', {
templateUrl: 'partials/feeds.html',
controller: 'FeedsController'
})
.otherwise({
redirectTo: '/feeds'
});
}]);
According to the documentation, You cannot define multiple path's for one route. So in your case you should define two unique routes like:
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/feeds/:country/:competition/:event', {
templateUrl: 'partials/event.html',
controller: 'EventController'
})
.when('/feeds/:country/:competition', {
templateUrl: 'partials/feeds.html',
controller: 'FeedsController'
})
.otherwise({
redirectTo: '/feeds'
});
}]);
Difference, always call this URL with full params like:
http://yourapplication/feeds/false/false/false
http://yourapplication/feeds/1/false/false
http://yourapplication/feeds/1/2/false
http://yourapplication/feeds/1/2/3
And the one who is calling FeedsController is still unique with only two params:
http://yourapplication/feeds/1/2/
I just want to redirect a page without re-loading the page.
So I have tried the following
$location.path("/myPath");
But I doestn't redirect as expected. Since my module file is not getting hit while I do the same.
Here is my module file
angular.module("moduleName", [])
.config(["$routeProvider",
function ($routeProvider)
{
$routeProvider
.when("/myPath",
{
controller: "com/app/controller/myController",
templateUrl: "com/app/view/myTemplate"
}).otherwise(
{
redirectTo: "/somewhere"
});
}]);
Just give the controller name not its path
angular.module("moduleName", [])
.config(["$routeProvider",
function ($routeProvider)
{
$routeProvider
.when("/myPath",
{
**controller: "myController",**
templateUrl: "com/app/view/myTemplate"
}).otherwise(
{
redirectTo: "/somewhere"
});
}]);
angular.module("moduleName", [‘ngRoute’]); you need to mention the ngroute directive in angular 1.1.6 or later.
I'm a newbie with AngularJS and I got a problem that I think that's it's can be configurable in my routeProvider.
I have this route
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', function ($routeProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
the problem: When I just type http://localhost:53379 I'm redirected to http://localhost:53379/#/ . Where come from the /#/ ?
By default, AngularJS will route URLs with a hashtag.
For example:
http://domain.com/#/home
http://domain.com/#/about
You can very easy remove the hashtag from the URL by setting html5Mode to true in your config:
$locationProvider.html5Mode(true);
so in your code it will be:
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}
]);
Just after that you have to make sure that your backed will redirect all requests to your home page if you are doing "Single Page App"
Angular adds it by default. I don't know it this is the main reason, but one reason is that the routing doesn't work in older versions of IE. I had this problem in one angularjs app that didn't work in IE9 because of this reason.
Anyways, to remove the hashtag simply add $locationProvider.html5Mode(true); after your routing-declarations.
You can read more about it here: http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag
This /#/ is used to create a single page application. the # is used to prevent that the page is completely reloaded. Angular then catches the new URL and loads the correct controller and partials depending on your route configuration.
Since HTML5 it is possible to remove this behavior with $location.html5Mode(true).
Source:
AngularJS documentation
My /home template doesn't have an associated controller (it's blank). Anyway to skip loading the controller and just load the view? I'm using AngularAMD to lazy load so it's an additional call just to get a blank controller file.
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl 'home/home.html',
controller: 'HomeController' //is empty because page is just static text
})
.when('/login', {
templateUrl: 'login/login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/home'
});
});
Nvm, found that you can leave controller: '' blank and it works. It was just throwing an error in my case because I forgot to remove the ng-controller="HomeController" tag from the template/view. Once I removed that, the error was no longer being thrown (in console).