Routing-Fehler mit ASP.Net und AngularJS: Versucht, Winkel mehr als einmal laden

Question

Ich versuche, eine AngularJS-Anwendung mit einem ASP.Net MVC serverseitigen Rahmen auf einem MacBook Air mit Xamarin einzurichten. Ich gehe von einer Node.js Laufzeitumgebung zu ASP.Net und ich kann nicht herausfinden, wie das Routing mit Angular funktionieren soll.

Ich möchte eine einzelne Route auf der Serverseite haben und alle anderen Routen von Angular auf der Clientseite gesteuert werden. Allerdings halte ich diese Meldung bekommen:

Synchron XMLHttpRequest auf dem Hauptthread ist veraltet, weil seine schädlichen Auswirkungen auf die Erfahrung des Endbenutzers. Für weitere Hilfe, überprüfen Sie https://xhr.spec.whatwg.org/. angular.min.js _ = 1466979148289: 290 ACHTUNG: Versuchte laden Winkel mehr als einmal

Ich weiß Angular wird mehr belastet als einmal, so wie würden stelle ich die Angular Anwendung als Ich mag würde es? Der entsprechende Code ist unten:

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" } 
      ); 
     } 
    } 
} 

Controller/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(); 
     } 
    } 
} 

Ansichten/Home/index.cshtml

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

    <div ui-view></div> 

</div> 

Client-seitiges

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

Verzeichnisstruktur

Answer 1

meine Antwort gefunden: habe meine Route Dateinamen nicht abgeschlossen, so dass es eine Endlosschleife war:

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

Answer 2

Dazu müssen Sie Ihr Skript zu Ihrer Ansicht laden. Danach musst du div mit ng-app, ng-controller und ng-view erstellen. Sie können im Detail über den folgenden Link gehen.

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

Answer 3

Dies könnte Ihre Frage nicht beantworten. Stattdessen wird dies ein alternativer Ansatz sein, um ASP.Net MVC mit AngularJs zu implementieren.

Ich persönlich mag Miguel A Castro Mini SPA (Silos). Sie können das Video here ansehen und die Quelle unter seiner website herunterladen.

Wenn eine Anfrage eingeht, geht es zuerst zu ASP.Net MVC Route. Dann übernimmt die Angular Route den Rest. Es ist ein sehr glattes Design.

FYI: Angular 2 ist gleich um die Ecke, so dass Sie Angular 1,5 Compotent so viel wie möglich verwenden möchten, so dass Sie Angular 2 später leicht umwandeln kann.