Angularjs路由

Question

我正在学习 Angularjs 并且遇到路由问题。我写了一个非常简单的苗条演示示例，它使用开箱即用的 MVC5。主页显示正常，但当我单击关于 link 时，它不显示关于页面，并且未命中 AboutController 断点。并在控制台中出现以下错误错误：[$compile:tpload] 加载模板失败：templates/indexView.html（HTTP 状态：404 未找到）。

如果我调换这两条路线，则会显示我的“关于”页面，但在单击“主页”link 时出现错误，因此我确定 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>

下面是家-index.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;

    }]);

var x=1 没有任何意义，只是为了设置断点。

下面是indexView.html

<h3>Arrived at Index Page</h3>

aboutView.html

<h3>About Page</h3>

我在 _Layout.cshtml html 标签中也有下面的钩子 angular data-ng-app="@ViewBag.InitModule"

Answer 1

问题似乎是 MVC 正在处理您希望由 Angular 处理的路由。

查看此问题，了解有关在同一项目中同时使用 AngularJS 和 MVC 的更多信息： Should I be using both AngularJS and ASP.NET MVC?

这是开始将两者结合使用的很好的指南，它还特别涉及到路由： Getting started with AngularJS and ASP.NET MVC

希望对您有所帮助，如果您需要更多信息或有任何不清楚之处，请告诉我们。

Angularjs路由

Angularjs routing

angularjs

angularjs-routing

asp.net-mvc-5