ngRoute 在 angularJS 中不工作

Question

我有以下代码

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/styles/bootstrap.min.css" rel="stylesheet" />
    <link href="~/styles/bootstrap-theme.min.css" rel="stylesheet" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
</head>
<body ng-app="appName">
    <a href="/view1">view1</a>
    <a href="/view1">view2</a>
   <div>
    this is a dynamic message:  {{message}}
</div>
<div ng-view>

</div>
    <script type="text/javascript">
        var app = angular.module('appName', ['ngRoute']);

        app.config(function ($routeProvider) {
            $routeProvider.when('/', {
                templateUrl: 'pages/home.html',
                controller: 'HomeController'
            })
                .when('/view1', {
                    templateUrl: 'pages/about.html',
                    controller: 'FirstController'
                })
                .when('/view2', {
                    templateUrl: 'pages/contact.html',
                    controller: 'SecondController'
                })
                .otherwise({
                    redirectTo: '/'
                });
        });
        app.controller('FirstController', function ($scope) {
            $scope.message = 'first controller';
        });
        app.controller('SecondController', function ($scope) {
            $scope.message = 'Second controller';
        });
        app.controller('HomeController', function ($scope) {
            $scope.message = 'Home controller';
        });
    </script>
</body>
</html>

但是当我点击 view1 或 view2 锚标签时，什么也没有发生，我得到了这样的错误 resource not found error

我在控制台中没有收到任何错误，任何人都可以帮我找出问题所在。

Answer 1

在你的html你错过了 ngview指令添加它。

<div ng-view></div>

如需进一步帮助，请参阅此 link http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

Answer 2

使用 ng-view 显示内容，您错过了 # 锚标签

<body ng-app="appName">
    <a href="#/view1">view1</a>
    <a href="#/view1">view2</a>
   <div ng-view>
    this is a dynamic message:  {{message}}
   </div>
   <script>
    <!-- script here -->
   </script>
</body>

Answer 3

您没有 ng-view

在 html 中添加以下内容以加载页面

<div ng-view></div>

试试这个应用程序配置

app.config(function (locationProvider, $routeProvider) {
            $locationProvider.hashPrefix('#');
            $routeProvider.when('/', {
                templateUrl: 'pages/home.html',
                controller: 'HomeController'
            })
                .when('/view1', {
                    templateUrl: 'pages/about.html',
                    controller: 'FirstController'
                })
                .when('/view2', {
                    templateUrl: 'pages/contact.html',
                    controller: 'SecondController'
                })
                .otherwise({
                    redirectTo: '/'
                });
        });

ngRoute 在 angularJS 中不工作

ngRoute not working in angularJS

angularjs

angularjs-ng-route