.NET MVC和Angular与ui-router

Question

I have a scenario where I am using .NET MVC to serve up an initial page 'index.cshtml' which then delivers all the Angular components required to run a single page app. For routing, I am using the excellent ui-router component by the Angular-UI team, and for the most part it works well.

My issue is with the very first page load. When browsing to the site, it doesn't go to the very first state/url. It just loads up my 'shell' with no content. My app config code looks like this:

app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: "/home",
            views: {
                "content": {
                    templateUrl: "app/dashboard/dashboard.html",
                    controller: 'DashboardController'
                },
                "subNav": {}
            },
        });

If I click around the navigation (generated by ui-sref attributes) everything works fine. It's only the first page load. My first thought was that it was the .NET MVC routing that is somehow borking up the first request, so I think I've disabled it by changing the default route to the following:

        routes.MapRoute(
            name: "Default",
            url: "{*url}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );

But I can't be sure this has done what I wanted it to do. It certainly didn't fix my issue.

Any ideas?

Answer 1

Your angular code looks good to me. I have the exact same code on my project and when I hit / I get redirected to /home .

It might be that the template url is not accessible because of ASP.Net MVC router.

Other tips:

• Make sure that when you refresh the page on /home it works correctly
• Make sure you are adding the DashboardController to y our app module.
• Manually hit app/dashboard/dashboard.html to check if you can get the template.

Answer 2

I think you have to actively set a route for otherwise to be used.

You can solve the problem by setting the state in the run block and handle the $stateChangeError.

app.run(['$rootScope','$state',function($rootScope,$state) {
    $state.transitionTo('home');

    $rootScope.$on('$stateChangeError', 
      function(event, toState, toParams, fromState, fromParams, error){ 
      $state.transitionTo('home');
    });
}]);

Answer 3

A more radical alternative is to remove your reliance on .net MVC to serve up any pages. You could then move all your server side code into a .net webApi for a reuseable api including all security etc. (although you should replicate your security in your front end also). Your Angular app with ui-router would then be responsible for all navigation and routing. Makes it less complex in my opinion. No need to mix an angular SPA and MVC. All the features in MVC such as bundling/minification/routing etc can be done in your front end angular app using bower/grunt/gulp packages and configuration. Just requires you to do a bit more reading...leaves you with a cleaner less complex solution and only and index.html and associated assets to deploy (alongside your Webapi which you can re-use). To do this you can create a web project (non MVC) add an index.html and off you go. If you want to add in Modern Web development techniques you can use one of the .net vNext web application templates which allows you to integrate with npm/gulp/grunt/bower. Microsoft have already built this in. Deployment can ignore the vNext project and just work on the html/js/assets. Productivity enhancements from the vNext project, yet simplicity from losing MVC.