Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular routing vs MVC routes

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: "/" });
});
like image 316
bitshift Avatar asked Feb 16 '26 23:02

bitshift


1 Answers

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

like image 63
pedrommuller Avatar answered Feb 18 '26 11:02

pedrommuller



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!