.NET MVC and Angular with 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?

guzart · Accepted Answer · 2014-04-01 23:54:22Z

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.

answered Apr 1, 2014 at 23:54

guzart

3,73030 silver badges23 bronze badges

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

Comments

Jim Crandall · Accepted Answer · 2016-06-22 15:11:20Z

0

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');
    });
}]);

answered Jun 22, 2016 at 15:11

Jim Crandall

845 bronze badges

Comments

sarin · Accepted Answer · 2016-06-22 15:36:25Z

0

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.

edited Jun 22, 2016 at 15:36

answered Jun 22, 2016 at 15:30

sarin

5,3173 gold badges39 silver badges65 bronze badges

1 Comment

mortware Over a year ago

Over the course of the last couple of years - i've been doing just this. Although more recently I've been working on something that started life as a very MVC-centric application, and I've had plumb in angular around it. Good to see someone else shares the same opinion on MVC WebApi :)

Collectives™ on Stack Overflow

.NET MVC and Angular with ui-router

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related