I have two URLs in my config file like:
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/:param1', {
templateUrl: 'shop.html',
controller: 'RouteController'
}).
when('/contact', {
templateUrl: 'contact.html',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}
]);
I am using 'param1' variable to fetch data from server. But when I route to '/contact' it considers 'contact' as a variable too and route it to the upper route i.e. variable route. How can I avoid this without using any extra identifier in route1.
Related
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 try to declare a route to use angular,in my security.yml after authentication i well be redirect to #/welcome but consider it a comment
default_target_path: #/welcome
my app.js
routeApp.config(['$routeProvider',function($routeProvider) {
// Routing system
$routeProvider
.when('/login', {
templateUrl: Routing.generate('login'),
controller: 'SecurityController'
})
.when('/welcome', {
templateUrl: Routing.generate('ard_backend_test'),
controller: 'WelcomeController'
})
.otherwise({
redirectTo: '/login'
});
}]);
Just add a double quote for your string and the hash # character will be able to escape.
default_target_path: "#/welcome"
Update: Do not define the default client route in your yml configuration.
This should be part of your angular router configuration. Depending which router you are using of course.
Here is an example with angular's default routeService:
angular.module('MyApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/welcome', {
templateUrl: 'partials/welcome.tpl.html',
controller: 'WelcomeCtrl'
}).
when('/some-other-route', {
templateUrl: 'partials/some-other-route.tpl.html',
controller: 'SomeOtherCtrl'
}).
otherwise({
redirectTo: '/welcome'
});
}]);
I have 2 urls /dev and /app. My angular routes is as follows
$routeProvider.
when('/home', {
templateUrl: 'homeTemp',
controller: 'homeCtrl',
}).
when('/home/:pageId', {
templateUrl: 'homeTemp',
controller: 'homeCtrl'
}).
when('/apps', {
templateUrl: 'devTemp',
controller: 'devCtrl',
}).
when('/app/:appId', {
templateUrl: 'devAppTemp',
controller: 'devCtrl'
}).
otherwise({
redirectTo: '/home'
});
Now when my url is /dev#/apps it loads the dev controller and when it's /apps#/home it loads the home controller
What change do I need to add in my routes so that when the url is just /dev it loads the dev controller
Currently because of the otherwise it redirects to /dev#/home
You could create a root level controller that just checks the url and redirects you as needed.
In your $routeProvider add
when('/', {
controller: 'isDevCtrl',
template:""
})
Then in isDevCtrl look at the url and redirect accordingly
yourApp.controller("isDevCtrl", function($location){
if($location.path() == '/dev'){
$location.path("/apps")
}else{
$location.path("/home")
}
});
I have a single page application where I route to different pages based on url address, I would like to redirect to Homepage when user enters non existing page in the url, so I use otherwise statement, however it causes 404 error, here is my routing config.:
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
redirectTo: '/products'
}).
when('/products/:id?', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/orders/:id?', {
templateUrl: 'partials/orders.html',
controller: 'OrdersController'
}).
when('/auto', {
templateUrl: 'partials/AutoComplete.html',
controller: 'TypeaheadCtrl'
}).
otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}]);
EDIT:
Changed it as suggested below buts till the same affect, when I type non existing page it goes to Error 404 instead of /products
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
redirectTo: '/products'
}).
when('/products', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/products/:id?', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/orders/:id?', {
templateUrl: 'partials/orders.html',
controller: 'OrdersController'
}).
when('/auto', {
templateUrl: 'partials/AutoComplete.html',
controller: 'TypeaheadCtrl'
}).
otherwise({ redirectTo: function () { return '/' } });
$locationProvider.html5Mode(true);
}]);
You don't need the when('/'... and the otherwise as they essentially do the same thing.
The otherwise is a catchall to get anything that isn't matched so you don't need to route the '/' specifically.
$routeProvider.
when('/products/:id?', ...).
when('/orders/:id?', ...).
when('/auto', ...).
otherwise({
redirectTo: '/products'
});
EDIT The problem is that redirecting to '/products' won't match '/products/:id'. You'll need to add another route like as follows:
when('/products', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
})
I'm working a fairly simple AngularJS project with some deep route nesting to select from a nested data structure:
angular.module('doccat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
when('/:p0', { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
when('/:p0/:p1', { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
when('/:p0/:p1/:p2', { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
when('/:p0/:p1/:p2/:p3', { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
when('/:p0/:p1/:p2/:p3/:p4', { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
otherwise({ redirectTo: '/' });
}]);
function DocDetailCtrl($scope, $routeParams) {
var path = [];
if ($routeParams.p0) path.push($routeParams.p0);
if ($routeParams.p1) path.push($routeParams.p1);
if ($routeParams.p2) path.push($routeParams.p2);
if ($routeParams.p3) path.push($routeParams.p3);
if ($routeParams.p4) path.push($routeParams.p4);
// do stuff with path
}
This has up to 5 layers in the path, which should be plenty for my purposes, so it is good enough for now. However, the underlying data could be nested arbitrarily deep, which would require arbitrary routing.
I think the ideal for this would be a route that says 'all the rest of the path goes to any array of parameters', but it doesn't look like there is a way to do anything like that in AngularJS. Just for the sake of completeness, does anyone know of a way to do this?
Check $routeProvider in the doc
angularjs $routeProvider.
Especially, in the definition of 'when', you can read: "path can contain named groups starting with a star (*name). All characters are eagerly stored in $routeParams under the given name when the route matches." So you just need to make sure the route matches and you'll get plenty parameters stored in $routeParams.
I hope it helps.