AngularJS $routeProvider and relative URLs in ASP.NET MVC

angularjs, asp.net-mvc, hashbang

Solution

From my observation, the hash has to be removed when matching routes. I have a link like

<a href="#Objects">

resulting in the URL

http://localhost:55033/#/Objects

My route Setup is

$routeProvider.when("/Objects", {
    templateUrl: "objects.html",
    controller: ObjectCtrl
});

And this works as expected, pulling in the correct partial. Note that I am not Rendering partials through ASP.NET MVC Controllers in this case. Instead I have objects.html lying around as plain html file and I am using the hash in the href so the ASP.NET MVC Routing does not kick in.

Problem

I'm totally new to AngularJS. Just wanted to try out relative URLs with $routeProvider. Here is the scenario: I have a "Edit" page, the ASP.NET MVC link to the page would be: ``` http://localhost/Workflow/Edit ``` So the ASP.NET MVC Controller is "WorkflowController" and the action is "Edit". For the Partials I have Controller actions that each return a Partial View like this: ``` public ActionResult WorkflowTransition() { return PartialView("WorkflowTransition"); } public ActionResult WorkflowTransitionApprovers() { return PartialView("WorkflowTransitionApprovers"); } ``` Following is the AngularJS module configuration - note: a PartialView (as mentioned above) is called for each of the routes (this could be incorrect): ``` $routeProvider.when('Workflow/WorkflowTransition', { templateUrl: '/Workflow/WorkflowTransition', controller: 'transitionCtrl', }); $routeProvider.when('Workflow/WorkflowTransitionApprovers', { templateUrl: '/Workflow/WorkflowTransitionApprovers', controller: 'approversCtrl' $routeProvider.otherwise({ redirectTo: '/' }); ``` Note: I have not specified either of the following: $locationProvider.html5Mode(false); OR $locationProvider.html5Mode(false).hashPrefix('!'); The href links are specified like this: ``` <a href="#/Workflow/WorkflowTransition">{{workflow.Identifier}}</a> ``` This generates links of this form: ``` http://localhost/Workflow/Edit#/Workflow/WorkflowTransition ``` This is obviously wrong (and clicking the link doesn't do anything probably because the browser tried to navigate to the hash), so I have tried the leading '/', but no luck there too: ``` <a href="/#/Workflow/WorkflowTransition">{{workflow.Identifier}}</a> ``` If I navigate the partial directly i.e. `http://localhost/Workflow/WorkflowTransition`, the browser renders the html as-is (along with the angularjs curly braces {{}}). My question is: How does AngularJS treat the '#' or '#!' when it comes to determining relative URLs? For e.g. does this route (assuming I knock off the /Edit part from the URL in the anchor tag): `$routeProvider.when('Workflow/WorkflowTransition',` match the URL: `http://localhost/Workflow/#WorkflowTransition` ? Does it remove the '#' from the URL and then check it against the URL pattern in $routeProvider.when() ? Can someone please suggest correct routes for the relative URLs?

Original source