Angular routing vs MVC routes

Question

Im building a MVC web app. There are two main sections that will function as single-page applications. Two different MVC layouts are used, one for each different scenario (one with a menu on the side, one with a full screen). Long story short - ive got 2 different Angular modules also, each scoped to the level of the main layout thats being used.

question: With Angular - using the routeProvider, is the path referenced with the promise relative to the Angular app context, or the site url as a whole ? So I re-read the Angular tutorial on routing, and I'm still not sure, so I posted the question here.
In other words, when a url is selected by the browser and the root of that url brings in a new Angular module, does angular see its base as that new url, or the root url of the site? Basically, this is a question about routing when dealing with multiple modules/apps.

When setting up the 2nd module, I had my MVC controller working but when I went to setup the route for its angular controller, the MVC view would display but not the Angular view I had defined. See snippets below.

MVC route is: /rating (what you see in the browser address window)
Angular incorrect route:

var app = angular.module('ratingIndex', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider.when("/rating", {
        controller: "ratingController",
        templateUrl: "templates/ratingView.html"
    });

    $routeProvider.otherwise({ redirectTo: "/" });
});

MVC route is: /rating (what you see in the browser address window)
Angular correct route:

var app = angular.module('ratingIndex', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider.when("/", {
        controller: "ratingController",
        templateUrl: "templates/ratingView.html"
    });

    $routeProvider.otherwise({ redirectTo: "/" });
});

Basically if your site is located on subpath ,e.g. /rating/ you can set in your <head> <base href="/rating/" />. And define angularJs routes related to this base — dr11
– dr11, Commented Apr 8, 2015 at 13:27
No the website itself is not located on a subpath, yet when you go to a specific path (or route in the MVC sense), the url will change, eg: localhost:5555/ -vs- localhost:5555/rating. Also its these two different paths that get two different AngularJS modules or apps involved. So when the /rating path is selected, the different module gets used. — bitshift
– bitshift, Commented Apr 8, 2015 at 14:05
usually you have hash root for AngularJs, e.g. /#/rating. Or are you using html5Mode(true)? Basically in case you are navigating /rating/ it interpret it as /rating/#/ -> angularjs routes to '/' — dr11
– dr11, Commented Apr 8, 2015 at 14:07
Not using html5Mode, but that reminds me I need to look at that. However, when I make a request to localhost/rating, the resulting url is localhost/rating#/ - which gets a different Angular module involved than the root of the site localhost/ — bitshift
– bitshift, Commented Apr 8, 2015 at 14:23

pedrommuller · Accepted Answer · 2015-04-08 14:24:50Z

3

You got 2 different scenarios here your server route and your client route which is quite obvious, but we can easily get confused by both routes mechanisms if you hit directly to the browser you'll hit the server route either "/" or "/rating".

in the client side by default you'll get a # over the route, in this case your URL for your homepage could be something like

localhost/#!/ or localhost/#!/rating

if you plan to do a redirect try using $location it could be something like $location.path('/rating') and handle it on a button.

basically according to your example if you want to hit the client route directly from the browser try to use localhost/#!/rating instead localhost/rating

answered Apr 8, 2015 at 14:24

pedrommuller

16.1k11 gold badges82 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bitshift Over a year ago

Yes, I think you mentioned the key difference - server routing vs client routing. So my hunch seems correct that when I am using the 2nd module, its relative to the server route of /rating. So that means my "effective" client route is simply "/", which is in fact what works. In other words, any angular routing setup is more or less relative to the server route, or is that not really accurate or a wrong way to look at it?

pedrommuller Over a year ago

well I'd say server goes first when you hit '/' you'll get the server route and then you'll notice a small change in the URL to /#!/ is when your client loads after that you can handle the routing from the client.

bitshift Over a year ago

ok, but regarding my primary question concerning routing in general - does Angular routing reference its starting point at root of the url where the app gets brought in, or relative to the root of the website? I think its the former instead of the latter. So when you have 2 different modules your dealing with and each one sets up its own routing, that routing is relative to the root of the app, not the site as a whole. So if a request is made to /rating and this causes a new/different app (module) to get brought in, the routing setup for that module is now relative to the new request url?

pedrommuller Over a year ago

you are going to get the "routing" of that specific module with its own routes, I would suggest you to use the location path to move from one module to another maybe this post works for you stackoverflow.com/questions/20902353/…

Collectives™ on Stack Overflow

Angular routing vs MVC routes

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related