Fatal编程技术网

ngRoute在angularJS中不工作

angularjs

ngRoute在angularJS中不工作,angularjs,angularjs-ng-route,Angularjs,Angularjs Ng Route,我有以下代码 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/styles/bootstrap.min.css" rel="stylesheet" /> <link href="~/st

我有以下代码

<!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>


指数
这是一条动态消息：{{message}
var app=angular.module（'appName'，['ngRoute']）；
app.config（函数（$routeProvider）{
$routeProvider.when（“/”{
templateUrl:'pages/home.html'，
控制器：“HomeController”
})
.when（“/view1”{
templateUrl:'pages/about.html'，
控制器：“第一控制器”
})
.when（“/view2”{
templateUrl:'pages/contact.html'，
控制器：“第二控制器”
})
.否则({
重定向到：'/'
});
});
app.controller（'FirstController'，函数（$scope）{
$scope.message='first controller'；
});
应用控制器（'SecondController'，函数（$scope）{
$scope.message='Second controller'；
});
应用程序控制器（'HomeController'，函数（$scope）{
$scope.message='Home controller'；
});
但是当我点击view1或view2锚定标记时，什么都没有发生，我得到了这样一个错误

控制台中没有任何错误，有人能帮我找出到底是什么错误。

在您的html中，您错过了 ngview指令添加它

有关更多帮助，请参阅此链接

使用
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>


这是一条动态消息：{{message}
您没有ng视图

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

<div ng-view></div>
你所说的服务器是什么意思，我使用cdna？你的链接中缺少：
href=“#/view1”
你真的试过了吗，请使用我的代码试试，因为它对meSo不起作用，最后你决定我记下了这个问题。即使你不知道是谁记下了这个问题，但你在责怪我。你能检查一下我的代码吗？我实际上有一个ng view指令 
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: '/'
                });
        });