2016-06-14 13 views
0

Ich lerne Angularjs und Probleme mit dem Routing. Ich schreibe ein sehr einfaches, schlankes Demo-Beispiel auf, welches die Out-of-the-Box MVC5 verwendet. Die Startseite wird zwar angezeigt, aber wenn ich auf den Link Über klicken klicke, wird die Seite Info nicht angezeigt und der Breakpoint von AboutController wird nicht berührt. Und bekam die folgende Fehlermeldung in der Konsole Fehler: [$ compile: tpload] Fehler beim Laden der Vorlage: templates/indexView.html (HTTP-Status: 404 nicht gefunden).Angularjs Routing

Wenn ich die zwei Routen vertauschen, dann wird meine About-Seite angezeigt, aber der Fehler beim Klicken auf Home Link, so bin ich sicher, dass der HTML-Code geladen werden kann. Was muss ich tun, damit das Routing funktioniert?

Unten ist die index.cshtml

@{ 
 
    ViewBag.Title = "Home Page"; 
 
    ViewBag.InitModule = "homeIndex"; 
 
} 
 
@section Scripts { 
 
<script src="~/Scripts/angular.js"></script> 
 
<script src="~/Scripts/angular-route.js"></script> 
 
<script src="~/js/home-index.js"></script> 
 
} 
 

 
<div data-ng-view=""></div>

Unten finden Sie die About.cshtml

@{ 
 
    ViewBag.Title = "About Page"; 
 
    ViewBag.InitModule = "homeIndex"; 
 
} 
 
@section Scripts { 
 
    <script src="~/Scripts/angular.js"></script> 
 
    <script src="~/Scripts/angular-route.js"></script> 
 
    <script src="~/js/home-index.js"></script> 
 
} 
 

 
<div data-ng-view=""></div>

unten ist die Heimat-i ndex.js

// home-index.js 
 
var module = angular.module("homeIndex", ["ngRoute"]); 
 

 
var angularFormsApp = angular.module('homeIndex', ["ngRoute"]); 
 

 
angularFormsApp.config(["$routeProvider", 
 
    function ($routeProvider) { 
 
     $routeProvider 
 
      .when("/", { 
 
       templateUrl: "templates/indexView.html", 
 
       controller: "HomeController" 
 
      }) 
 
      .when("/About", { 
 
       templateUrl: "templates/aboutView.html", 
 
       controller: "AboutController" 
 
      }); 
 
    }]); 
 

 

 
angularFormsApp.controller("HomeController", 
 
    ["$scope", 
 
    function ($scope) { 
 
     var x = 1; 
 

 
    }]); 
 

 

 
angularFormsApp.controller("AboutController", 
 
    ["$scope", 
 
    function ($scope) { 
 
     var x = 1; 
 

 
    }]);

Die var x = 1 hat keine Bedeutung, nur für mich einen Haltepunkt zu setzen.

Unten ist indexView.html

<h3>Arrived at Index Page</h3>
aboutView.html

<h3>About Page</h3>

Ich habe auch die in der unten stehenden _Layout.cshtml HTML-Tag in einzuhaken Winkel Daten-ng-app = "@ ViewBag.Init Modul "

+0

Hi Angular und MVC versuchen beide, das Routing zu handhaben, was zu unerwartetem Verhalten führen kann! Haben Sie tatsächlich die "templates/indexView.html" und "templates/aboveView.html" -Dateien? –

+0

@OliverMoolman ja.die 2 htmls Dateien sind in der Lösung unter Vorlagen Ordner – user1214916

+0

Warum verwenden Sie angular Routing in asp mvc Projekt? Verwenden Sie asp mvc Routing und eckig für Front-End, Asp anrufend. net mvc controller ist einfach, lassen Sie mich wissen, wenn Sie Beispiel Ps ich bin ziemlich sicher Asp-Controller-Greifer-Anfrage zuerst, sucht nach Controller und Index-Aktion in es, Sie haben wahrscheinlich nicht, deshalb 404 Seite nicht gefunden –

Antwort

0

Das Problem scheint zu sein, dass MVC das Routing verarbeitet, das von Angular erwartet wird.

einen Blick auf diese Frage haben für einige weitere Informationen über beide AngularJS und MVC im selben Projekt mit: Should I be using both AngularJS and ASP.NET MVC?

Hier ist eine schöne Anleitung, um zu beginnen die beiden zusammen mit bekommen, es berührt speziell auf das Routing auch: Getting started with AngularJS and ASP.NET MVC

Ich hoffe, dass hilft, lass es uns wissen, wenn Sie weitere Informationen benötigen, oder wenn etwas nicht klar ist.

+0

Vielen Dank für die Referenzen. Es hilft mir zu verstehen, wie MVC und Angular zusammenarbeiten – user1214916