Angularjs routing

Question

Я изучаю Angularjs и имею проблему с маршрутизацией. Я пишу очень простой пример slim demo, который использует из коробки MVC5. Отображение главной страницы прекрасно, но когда я нажимаю ссылку «О программе», на ней не отображается страница «О странице», а точка останова AboutController не попадает. И получил следующую ошибку в консоли Ошибка: [$ compile: tpload] Не удалось загрузить шаблон: templates/indexView.html (статус HTTP: 404 не найден).

Если я поменяю два маршрута, то отобразится страница «О нас», но при ошибке нажмите ссылку «Главная», поэтому я уверен, что html можно загрузить. Что мне нужно сделать, чтобы заставить маршрутизацию работать?

Ниже 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>

Ниже 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>

ниже является домом-я 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; 
 

 
    }]);

Значение переменной х = 1 не имеет значения, просто для меня, чтобы установить точку останова.

Ниже indexView.html

<h3>Arrived at Index Page</h3>

aboutView.html

<h3>About Page</h3>

Я также ниже в _Layout.cshtml HTML тега зацепить в угловой data-ng-app = "@ ViewBag.Init Модуль «

Answer 1

Проблема заключается в том, что MVC обрабатывает маршрутизацию, которую вы ожидаете обработать с помощью Angular.

Взгляните на этот вопрос для некоторых больше информации о том, Оба AngularJS и MVC в одном проекте: Should I be using both AngularJS and ASP.NET MVC?

Вот хороший гид, чтобы начать работу, используя два вместе, в частности, затрагивает маршрутизации а также: Getting started with AngularJS and ASP.NET MVC

Надеюсь, что это поможет, пожалуйста, сообщите нам, если вам нужна дополнительная информация или если что-то неясно.