角度路线未显示视图答案

【问题标题】：Angular route is not showing the view角度路线未显示视图
【发布时间】：2017-12-10 10:38:43
【问题描述】：

我想在 angularjs 的 ngRoute 中使用 routeProvider 来查看我的 home.html 或 delete.html 或 add.html

app.js

var app = angular.module('MyApp', ['ngRoute']);

MyApp.config([
    '$routeProvider',
    function($routeProvider) {
        $routeProvider
            .when('/Add', {
                templateUrl: 'html/add.html',
                controller: 'AddController'
            })
            .when('/Edit', {
                templateUrl: 'html/edit.html',
                controller: 'EditController'
            })
            .when('/Delete', {
                templateUrl: 'html/delete.html',
                controller: 'DeleteController'
            })
            .when('/Home', {
                templateUrl: 'html/home.html',
                controller: 'HomeController'
            })
            .otherwise({
                redirectTo: '/Home'
            });
    }
]);

MyApp.controller('AddController', function($scope) {
    $scope.message = "In add view"
});

MyApp.controller('DeleteController', function ($scope) {
    $scope.message = "In delete view"
});

MyApp.controller('EditController', function ($scope) {
    $scope.message = "In edit view"
});

MyApp.controller('HomeController', function ($scope) {
    $scope.message = "In home view"
});

index.html

<!DOCTYPE html>
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <!-- bootstrap css -->
    <link href="Content/bootstrap.min.css" rel="stylesheet"/>
    <!-- Jquery js -->
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/internal/app.js"></script>

</head>
<body>

<div class="container">
    <nav role="navigation" class="navbar navbar-inverse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="html#!Home">Home</a></li>
            <li class=""><a href="html#!Add">Add</a></li>
            <li class=""><a href="html#!Edit">Edit</a></li>
            <li class=""><a href="html#!Delete">Delete</a></li>
        </ul>
    </nav>

    <div ng-view>

    </div>

    <!-- Footer -->
    <h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
</div>

</body>
</html>

当我运行我的应用程序并单击任何链接时，它会给我这个网址：http://localhost:51285/html/#!Edit

而在体内是这个……

HTTP Error 403.14 - Forbidden
The Web server is configured to not list the contents of this directory.

在我关注的示例中，它没有该错误，它只是更改为消息。

【问题讨论】：

标签： angularjs

【解决方案1】：

你的代码有错误：

在你的html中：使用添加

2.在您的app.js:instead 或MyApp.config 或MyApp.controller 中使用app.config 和app.controller。MyApp 是您的应用程序的名称，但您必须使用您的应用程序存储在其上的变量。

以下将起作用：你的html：

   <!DOCTYPE html>
    <html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>

        <!-- bootstrap css -->
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <!-- Jquery js -->
        <script src="Scripts/jquery-1.9.1.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <script src="Scripts/angular.min.js"></script>
        <script src="Scripts/angular-route.min.js"></script>
        <script src="internal/app.js"></script>

    </head>
    <body>

        <div class="container">
            <nav role="navigation" class="navbar navbar-inverse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#!Home">Home</a></li>
                    <li class=""><a href="#!Add">Add</a></li>
                    <li class=""><a href="#!Edit">Edit</a></li>
                    <li class=""><a href="#!Delete">Delete</a></li>
                </ul>
            </nav>

            <div ng-view></div>

            <!-- Footer -->
            <h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
        </div>

      </body>
      </html>

您的应用：

var app = angular.module('MyApp', ['ngRoute']);

    app.config([
        '$routeProvider',
        function ($routeProvider) {
            $routeProvider
                .when('/Add', {
                    templateUrl: 'html/add.html',
                    controller: 'AddController'
                })
                .when('/Edit', {
                    templateUrl: 'html/edit.html',
                    controller: 'EditController'
                })
                .when('/Delete', {
                    templateUrl: 'html/delete.html',
                    controller: 'DeleteController'
                })
                .when('/Home', {
                    templateUrl: 'html/home.html',
                    controller: 'HomeController'
                })
                .otherwise({
                    redirectTo: '/Home'
                });
        }
    ]);

    app.controller('AddController', function ($scope) {
        $scope.message = "In add view";
    });

    app.controller('DeleteController', function ($scope) {
        $scope.message = "In delete view";
    });

    app.controller('EditController', function ($scope) {
        $scope.message = "In edit view";
    });

app.controller('HomeController', function ($scope) {
    $scope.message = "In home view";
});

【讨论】：

【解决方案2】：

我希望它可以与配置有关。请检查下面的链接！ Angular force an undesired exclamation mark in url

【讨论】：