AngularJS $routeProvider and relative URLs in ASP.NET MVC

Question

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?

Answer 1

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.

Answer 2

Routeprovide should be setup like below.

$routeProvider.when('/Workflow/WorkflowTransition', {
    templateUrl: "WorkflowTransition.html",
    controller: WorkflowTransitionCtrl
});

and URL should be enter in below formate.

http://localhost/#/Workflow/WorkflowTransition ?