Angular route not matching with Asp.Net MVC 3

Question

I am attempting to use Angular in an already existing MVC 3 site. I have gotten my primary ngApp working with the first loaded item, but as soon as I add a module and attempt to implement $routeParams it appears that the route provider begins to break down. In my MVC 3 application, I have a valid route /Article/ReadArticle/key route that allows key to be null, and I have a corresponding Controller/Action that delivers the requested article. If key is null or empty, then it provides the latest entered article. I have another post action that does the same thing except that it returns a JsonResult instead of a view.

I modified my view to exclude any MVC constructed model so the action simply returns what is essentially an html page with all of the angular templating in it. The angular controller calls the post action for the JsonResult and all is peachy. I added routing in the angular module according to the samples, but for some reason it does not appear to be catching the route:

'use strict';

/* App Module */

angular.module('je', []).
  config(['$routeProvider', function ($routeProvider) {
      $routeProvider.
      when('/Article/ReadArticle/:key', { templateUrl: '/Angular/ArticleView.html', controller: ArticleCtrl }) //.
      //otherwise({ templateUrl: '/Angular/ArticleView.html', controller: ArticleCtrl });
  } ]);

I commented out the otherwise call. If I leave that in there, it works but only to bring the default article. Manually entering a valid route such as /Article/ReadArticle/Some_Valid_Key does not produce any appropriate $routeParams . Commented out, no routes appear to match so no templates are loaded and the page is blank.

function ArticleCtrl($scope, $routeParams, $http) {
    console.log($routeParams.key);
    $http.post("/Article/GetArticleText", { "textkey": $routeParams.key }).success(function (data) {
        console.log(data);
        $scope.article = data;
    }).
    error(function (data, status) {
        console.log(data);
        console.log("Request failed");
        console.log(status);
    });
} 

According to the samples, my expectation is that $routeParams.key should be populated with Some_Valid_Key at this point. Clearly my expectations are not in line with reality, but what piece am I missing to get the route to behave?

Answer 1

AngularJS routes are defined after the hash of the URL. So in your scenario, where your base URL was /Article/ReadArticle/key , no route is currently defined. This is why your default route was being followed (prior to commenting out the otherwise line). In order for AngularJS to follow your defined route, your URL must look something like the following: http://mysite.com/someurl/#/Article/ReadArticle/Some_Valid_Key .