angular $ routeProvider

时间:2016-08-27 17:15:03

标签: angularjs angular-routing route-provider

我现在正在学习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

以下是我的应用程序的屏幕截图: Screen Shot of my application.

我在网上搜索并尝试了很多解决方案,但没有一个能解决我的问题。我不知道代码有什么问题。我正在开发 VisualStudio

提前感谢您的帮助和时间。

1 个答案:

答案 0 :(得分:1)

URL otherwiseredirectTo中有错字,应为/main

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