lundi 27 juin 2016

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

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

Directory

Aucun commentaire:

Enregistrer un commentaire