angular $routeProvider 未调用 templateUrl

Question

我现在正在学习 AngularJs 几天，但一直卡在错误中，最近两天无法解决。首先让我们先看看我的代码：

MainPage.html

<!DOCTYPE html>
<html>
<head>
    <title>Learn Angular Js - Scott Allen</title>
    <meta charset="utf-8" />
</head>

<body ng-app="LearnAngular">
    <h1>Git Hub Viwer</h1>
    <div ng-view></div>

    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <script src="App.js"></script>
    <script src="MainController.js"></script>
</body>
</html>

App.js

(function () {
    var app = angular.module("LearnAngular", ["ngRoute"]);

    app.config(function routeConfig($routeProvider) {
        $routeProvider
            .when("/main", {
                templateUrl: function () {
                    debugger;
                    return "Main.html";
                },
                controller: "MainController"
            })
            .otherwise({ redirectTo: "/mian" });
    });
}());

MainController.js

(function () {
    var MainController = function ($scope, $interval, $location) {
        alert("var MainController = function ($scope, $interval, $location) {};");

        var decrementCountdown = function () {
            $scope.countdown -= 1;
            if ($scope.countdown < 1) {
                $scope.search($scope.username);
            }
        };

        var countDownPromise = null;
        var startCountdown = function () {
            countDownPromise = $interval(decrementCountdown, 1000, $scope.countdown);
        };

        $scope.search = function (username) {
            if (countDownPromise) {
                $interval.cancel(countDownPromise);
                $scope.countdown = null;
            }

            // redirect to the url.
        };

        $scope.username = "angular";
        $scope.countdown = 5;
        startCountdown();
    };

    var app = angular.module("LearnAngular");
    app.controller("MainController", MainController);

}());

Main.html

<div>
    <h1>{{countdown}}</h1>
    <form name="searchUser" ng-submit="search(username)">
        <input type="search" required placeholder="Enter username to search" ng-model="username" />
        <input type="submit" value="Search" />
    </form>
</div>

当我运行申请时，我看到这个 url:
http://localhost:52108/HomePage.html#/mian
这表明我已成功重定向到主路由，但 Main.html 未显示在 HomePage.html 页面上，并且当我检查浏览器网络时，浏览器未请求 Main.html。

这是我的应用程序的屏幕截图：

我在互联网上搜索并尝试了很多解决方案，但其中 none 解决了我的问题。我不知道代码有什么问题。我在 VisualStudio

开发

在此先感谢您的帮助和时间。

Answer 1

您在 URL 中输入错误 otherwise 的 redirectTo 值，应该是 /main

.otherwise({ redirectTo: "/main" });

angular $routeProvider 未调用 templateUrl

templateUrl is not being called by angular $routeProvider

angularjs

angular-routing

route-provider