I am trying to integrate angular routing with and existing app.
The webapp uses angular already but does not use routing per se.
I was able to manually integrate routing and my routing js looks like following
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/list1.jsp', {
templateUrl: '/mycontext/templates/list1.jsp',
}).
when('/list2.jsp', {
templateUrl: '/mycontext/templates/list2.jsp',
}).
otherwise({
});
}]);
After using routing for couple of files I found a common pattern, my #path was very similar to the path of the template. Thus I was wondering if there is any way to get the next url in the route itself so that I can dynamically create a fallback. For example
otherwise({
nextURL = $nxtURL;
redirectTo: '/mycontext/templates/'+nextURL;
});
Related
I'm writing a simple product information management app using angular js. To keep my app as modular as possible i've split it into multiple modules with one module "pim" as startpoint. For each module I want to have a different route, so that it is easy to plug in a new module or remove it without having to maintain a huge route in the pim module config.
Currently I have two routes (the first route):
(function(){
angular
.module("pim")
.config(router)
function router($routeProvider){
$routeProvider
.when("/",{
templateUrl: "view/info.html",
controller: "pimController"
})
.when("/info",{
templateUrl: "view/info.html",
controller: "pimController"
})
.when("/alcohol",{
templateUrl: "view/alcohol.list.html",
controller: "alcoholController"
});
}
})();
The second route
(function(){
angular
.module("alcohol")
.config(router)
function router($routeProvider){
$routeProvider
.when("/alcohol/list",{
templateUrl: "view/alcohol.list.html",
controller: "alcoholController"
})
.when("/alcohol/info",{
templateUrl: "view/alcohol.info.html",
controller: "alcoholController"
});
}
})();
As you can see /alcohol has a templateUrl and a controller, the same as /alcohol/list, but i want to know if there is a simple (standard) way to change to another URL for example /alcohol/list, so that I do not have to repeat the templateUrl and controller and keep this information in the alcohol module, where it belongs.
For example
.when("/alcohol",{
routeTo: "/alcohol/list"
})
Thank you for your help
SOLVED
The option to redirect exists, did not look in the $routeProvider documentation well enough:
.when("/alcohol",{
redirectTo:"/alcohol/list"
});
The code above works
You can use $routeProvider's redirectTo route map.
.when("/alcohol", {
redirectTo: "/alcohol/list"
});
Read more: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
I am using nodeJS as the middleware and using angularJS in the UI and for routing. This is a SPA application but currently routing is not working getting 404 error while trying to load template.
The application folder structure is as below:
Below code is used for routing:
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'templates/addStudent.html',
}).
when('/viewStudent', {
templateUrl: 'templates/viewStudent.html',
}).
otherwise({
redirectTo: '#'
});
}]);
I am having a hard time trying to figure out what is happening with routing in MVC and Angularjs. I am seeing different behavior between the 1.0.x version of Angularjs and the 1.3.x version.
I am building an MVC site with multiple "mini spas". I have an MVC controller called Registration and the route to it is http://mysite/Registration. The index view for that controller then renders a page containing the html and angular scripts.
I want to have angular routes that will render html templates and have set up the routing as follows.
// this works in 1.0.x
var registrationModule = angular.module("registrationModule", []);
registrationModule.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/Registration/Members', {
templateUrl: '/templates/members.html',
controller: 'MembersController' });
$routeProvider.when('/Registration/Updates', {
templateUrl: '/templates/updates.html',
controller: 'UpdatesController' });
$locationProvider.html5Mode(true);
});
When I have the above routing and reference angularjs 1.0.x everything work as I would expect. The views load correctly and it does not post back to the server for the /Registration/* routes.
However, when I reference angular 1.3.x and have the following routing:
// this does not work in 1.3.x
var registrationModule = angular.module("registrationModule", ['ngRoute']);
registrationModule.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/Registration/Members', {
templateUrl: '/templates/members.html',
controller: 'MembersController' });
$routeProvider.when('/Registration/Updates', {
templateUrl: '/templates/updates.html',
controller: 'UpdatesController' });
$locationProvider.html5Mode(true);
});
The views do not load on the /Registration/* routes and it posts back to the server for the RegistrationController to handle all /Registration/* routes.
Is there some fundamental difference in routing between the versions? Have I failed to implement angular routing correctly in the new version?
I have created a project with index.html with certain links to other pages. My routing works as intended but I'm wondering what's the best approach to go with when it comes to links on other pages.
To clarify it:
My index.html page has routes:
Feed
Bblog
Marketplace
Recruiting
Adverts
Now what I'm curious about is how do I for example route links inside these pages.
For example, my Bblog page has tabs which I want to be opened inside the same page. Now for example whenever I click some tab link, it redirects me to my index.html since my .otherwise route is set to /.
Not sure what engine or library you're using for your routing. Though I faced the same requirement not too long ago.
We're using ui-router for our routing. It's very similar to Angulars routing.
A snippet from our routing table contains something similar to this.
$stateProvider
.state('home', {
url: '/',
templateUrl: '/views/index',
})
.state('orders', {
url: '/orders',
templateUrl: '/views/orders',
})
.state('orderdetail', {
url: '/orders/detail/:id',
templateUrl: '/views/orderdetail',
})
.state('orderdetail.address', {
url: '/:addressId',
templateUrl: '/views/orderdetail',
})
Essentially you use the .dot notation to separate nested views. So the orderdetail.address is nested inside the orderdetail
This means that the routing above will go something allow you to see an overview of order details at /orders/detail/myOrderId and drill further in to, say, an address by visiting /orders/detail/myOrderId/myaddressId
If you're using ui-router then you will get more info on nested views on this link
If you're using angular ngRoute then the [ngRoute][3] docs and supporting plunker demonstrate how to stack up the routes.
So (from the plunker) -
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
// I will cause a 1 second delay
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
this will give you /book/myBookId and /book/myBoodId/ch/myChapterId
I'm trying start developing angular apps with yeoman. It may sounds stupid, but I have a problem with creating routes using yo:angular route.
When I create new route using:
yo:angular route foo
yeoman creates:
app/scripts/controllers/foo.js (controller)
app/views/foo.html (view)
app/test/spec/controllers/foo.js (testing the controller)
in app.js it creates:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/foo', {
templateUrl: 'views/foo.html',
controller: 'FooCtrl'
})
.otherwise({
redirectTo: '/'
});
});
so everything should work fine. Unfortunately the route doesn't work - when I try open
http://localhost:9000/foo
I get following error:
Cannot GET /foo
The idea of routes in yeoman looks pretty easy and I'm not sure where the problem is.
Did you enable HTML5 mode in your Angular application? If not, the URL would be:
http://localhost:9000/#/foo
And if you have enabled HTML5 mode in your Angular application, you have to make sure whatever server you're using has been configured to handle all routes as they were the root of the application.