将AngularJS 1.2集成到现有的MVC网站

Question

I currently have an existing ASP MVC4 application that returns views (razor) from controllers and would like to start transitioning the application into a SPA (single page application) using web api and angular js. My question is can i slowly start transitioning specific views/urls to be routed by angular and have other views/urls call back to the legacy controllers in the MVC application that render razor views? For example I have my main angular js file stating the following

window.EcentralSPA = angular.module('EcentralSPA', ['ngRoute']);

EcentralSPA.config(['$routeProvider', function ($routeProvider) {
  $routeProvider.when('/users', {
    templateUrl: 'app/views/users.html',
    controller: 'UsersController'
  });
}]);


EcentralSPA.controller('UsersController', ['$scope', function ($scope) {
  //TODO
}]);

Basically i'd just like the /users url to get handled by angular and the rest of the urls to call back to the web server to the correct mvc controller and render back the razor view. However with my current configuration above all calls to anything besides /users returns empty data. Any suggestions? Thank you.

Answer 1

If you decide part of application is SPA and another is not for some url, you need to then stop AngularJS from intercepting url changes. For this when you render <a> tags use one of the following ways to ignore angularjs routing

• Links that contain target element. Example: <a href="/ext/link?a=b" target="_self">link</a>
• Absolute links that go to a different domain. Example: <a href="http://angularjs.org/">link</a>
• Links starting with '/' that lead to a different base path when base is defined. Example: <a href="/not-my-base/link">link</a>

See the location documentation for more details.

Also i don't think you can then perform navigation using $route or $location service for urls that you want to handle outside angularjs.

Full page refresh will always cause the full framework to reload for all AngularJS SPA pages.