Yeoman and angular - routing doesn't work - javascript

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.

Related

Angular $route change url based on route

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

Angular ngRoute don't work with Express 4

I try set up client side route with Angular and Express 4.
I worked with guide ngView and without Express that's good, but when Express routing is enable ngRoute don't work. How can I setup Express that it work with ngRoute?
A little bit of code:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/category/:catgegoryName', {
templateUrl: 'category',
controller: 'categoryController',
controllerAs: 'category'
})
.when('/category/:catgegoryName/device/:deviceName', {
templateUrl: 'device',
controller: 'deviceController',
controllerAs: 'device'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}
]);
Since you configured HTML5 mode you don't need to replicated the same route structure on the Express side. Instead you need to make sure server always responds with landing page (usually index.html) where Angular app is configured and bootstraped.
So it will be that for say route /category/something server still responds with index.html. Then Angular will parse URL and understand that it need to inject template and controller corresponding to .when('/category/:catgegoryName', {...}) route.

Target route while using angular routing

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;
});

ASP.Net MVC "mini spas" and Angularjs Routing

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?

Can't fix the hashtag in my angularjs app path

I know you guys are going to say "It's duplicated" but it doesn't work for me.
I'm doing exactly the same thing and here's what happens.
This is my config code:
portfolioApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller: 'portfolioController',
templateUrl: 'partials/home.htm'
})
.otherwise({redirectTo: '/home'});
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
});
The URL without the locationProvider and setting path to "/" instead of "/home" would be:
http://localhost:8080/portfolio/#/
Okey, i would like to remove the hashtag and the "portfolio" path so that way it would be:
http://localhost:8080/home
With the config i've posted, it does it (the first time i refresh). But what happens? happens that if I refresh the page again with the new path... i get a 404 Tomcat Error.
In the first refresh when i write localhost:8080/portfolio and the path gets converted into "/home", I get in the console an error saying that the "partials/home.htm" can't be found 404.
So either way, it can't read my partial, and then when I refresh everything is broken.
How can I solve this? what am I doing wrong?
Make sure your including these to scripts in the header of your HTML document Where you are implementing your module. The two provided below are for implementing the most current version of angular as well as the most current version of the angular route script:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-route.js"></script>
Make sure your injecting ngRoute into your module, here's an example of mine:
angular.module('controller', ['ngRoute','ngResource', 'ngCookies', 'ngSanitize'])
Here is an example of my config block, make sure you inject both routeProvider and locationProvider:
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: '../partials/member.php',
controller: 'Member',
access: 'member'
})
.when('/leaderboard', {
templateUrl: '../partials/leaderboard.html',
controller: 'Leaderboard',
access: 'member'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}])
If your doing all of this and it still doesn't work post a plunker of your code. Thanks.

Categories