Integrating AngularJS 1.2 into existing MVC site

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.

Chandermani · Accepted Answer · 2013-11-26 05:26:04Z

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.

edited Nov 26, 2013 at 5:26

answered Nov 26, 2013 at 5:20

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Integrating AngularJS 1.2 into existing MVC site

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related