Question

我想在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.

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

Answer 1

你的代码中有一些错误：

：使用添加

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";
});

Answer 2

我希望它可以通过配置来遏制。请检查以下链接！ Angular force an undesired exclamation mark in url

角度路线未显示视图

2 个答案: