Routing error with ASP.Net and AngularJS: Tried to load angular more than once

Question

I am trying to set up an AngularJS application with a ASP.Net MVC server-side framework on a MacBook Air with Xamarin. I am moving from a Node.js runtime environment to ASP.Net and I cannot figure out how the routing is supposed to work with Angular.

I want to have a single route on the server-side and let all the other routes be controlled by Angular on the client side. However I keep getting this message:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. angular.min.js?_=1466979148289:290 WARNING: Tried to load angular more than once

I know Angular is being loaded more than once, so how would I set the Angular application as I'd like it? The relevant code is below:

Server-Side

App_Start/routeconfig.cs

using System.Web.Mvc;
using System.Web.Routing;

namespace MyApp
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

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

Controllers/HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace MyApp.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

Views/Home/index.cshtml

<div ng-controller="MainController" class="main-guy">

    <div ui-view></div>

</div>

Client-Side

Scripts/javascripts/app.js

angular.module('app').config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider){
    $urlRouterProvider
        .when('', '/main')
        .when('/', '/main')
        .otherwise(function($injector){
            $injector.get('$state').go('404', {}, { location: false });
        });

    $stateProvider
        .state('main',{
            url: '/main',
            templateUrl: 'Views/Route/main',
            controller: 'MainController'
        })
        .state('freeplay',{
            url: '/freeplay',
            templateUrl: 'Views/Route/freeplay',
            controller: 'FreeplayController'
        })
        .state('404', {
            url:'/404',
            templateUrl: 'Views/Route/404'
        });

    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });

Directory structure

Win · Accepted Answer · 2016-06-27 03:35:20Z

1

This might not answer your question. Instead, this will be alternative approach to implement ASP.Net MVC with AngularJs.

I personally like Miguel A Castro's Mini SPA (Silos). You can watch the video here, and download the source at his website.

What it does is when a request comes in, it goes to ASP.Net MVC Route first. Then, Angular Route takes over the rest. It is a very slick design.

FYI: Angular 2 is right around the corner, so you want to use Angular 1.5 Compotent as much as possible so that you can convert to Angular 2 easily later.

answered Jun 27, 2016 at 3:35

Win

62.4k13 gold badges106 silver badges190 bronze badges

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

1 Comment

Les Paul Over a year ago

Will keep that in mind for next time. Luckily, this is an application that doesn't need to be updated in the future! But I do agree, I should study Angular 2.

Roshni Gandhi · Accepted Answer · 2016-06-27 03:02:19Z

0

For this you have to load your script to your view. After that you have to create div with ng-app, ng-controller and ng-view. You can go in detail through this link given below.

http://www.c-sharpcorner.com/UploadFile/cd7c2e/mvc-routing-with-angularjs-routing/

answered Jun 27, 2016 at 3:02

Roshni Gandhi

3481 gold badge4 silver badges13 bronze badges

Comments

Les Paul · Accepted Answer · 2016-06-27 03:19:20Z

0

Found my answer: didn't complete my route filenames so it was an endless loop:

$stateProvider
        .state('main',{
            url: '/main',
            templateUrl: 'Views/Route/main.cshtml',
            controller: 'MainController'
        })
        .state('freeplay',{
            url: '/freeplay',
            templateUrl: 'Views/Route/freeplay.cshtml',
            controller: 'FreeplayController'
        })
        .state('404', {
            url:'/404',
            templateUrl: 'Views/Route/404.cshtml'
        });

answered Jun 27, 2016 at 3:19

Les Paul

1,2785 gold badges23 silver badges47 bronze badges

Collectives™ on Stack Overflow

Routing error with ASP.Net and AngularJS: Tried to load angular more than once

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related