AngularJS无法加载ng-view inti index.html
我正在尝试使用AngularJS设置一个页面的应用程序。 我使用的是Express，我有一个Apache服务器作为中间件，如果有的话。 我的index.html页面加载得很好，但是在ng-view中没有加载视图。
这是我的代码
<!DOCTYPE html> <html> <head> <link rel="icon" type="image/png" href="public/img/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="public/img/favicon-16x16.png" sizes="16x16"> <link rel="stylesheet" type="text/css" href="vendor/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="vendor/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <link rel="stylesheet" type="text/css" href="public/css/style.css"> <link rel="stylesheet" type="text/css" href="public/css/font-awesome-4.7.0/css/font-awesome.min.css"> <script type="text/javascript" src="vendor/angularjs/1.4.7/js/angular.min.js"></script> <script type="text/javascript" src="vendor/angularjs/1.4.7/js/angular-base64.min.js"></script> <script type="text/javascript" src="vendor/angularjs/1.4.7/js/angular-sanitize.js"></script> <script type="text/javascript" src="vendor/lodash.js/4.16.4/js/lodash.min.js"></script> <script type="text/javascript" src="vendor/jquery/1.11.3/js/jquery.min.js"></script> <script type="text/javascript" src="vendor/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script> <script> var myApp = angular.module('lispCDpoc', ['ngRoute']); myApp.config(function($routeProvider, $locationProvider) { console.log('oui'); $locationProvider.hashPrefix(''); $routeProvider. when('/', { templateUrl: 'pages/test.html', controller: 'testController' }). otherwise({ redirectTo: '/' }); }); myApp.controller('testController', function($scope) { $scope.message = 'Message for my test page'; }); </script> <meta charset="utf-8"> <title>LISP Monitoring POC</title> </head> <body> <div> <nav class="navbar navbar-default navbar-custom"> <div class="navbar-header"> <a class="navbar-brand" href="#"><img src="public/img/sg_logo_small.png" class="sg-logo"></a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#dashboard">Dashboard</a></li> <li><a href="#releasenote">Release Note</a></li> </ul> <div> <img class="logo-lisp" src="public/img/lisp2.png"> </div> </nav> <div ng-view></div> </div> </body> </html> 我无法find我的index.html页面加载的原因，但它不插入test.html代码
<div> <h1>Test Page</h1> <p>{{message}}</p> </div>
不要忘记在主模板中声明你的应用程序模块。
<body ng-app="lispCDpoc"> <div> <nav class="navbar navbar-default navbar-custom"> <div class="navbar-header"> <a class="navbar-brand" href="#"><img src="public/img/sg_logo_small.png" class="sg-logo"></a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#dashboard">Dashboard</a></li> <li><a href="#releasenote">Release Note</a></li> </ul> <div> <img class="logo-lisp" src="public/img/lisp2.png"> </div> </nav> <div ng-view></div> </div> </body>
这是一个可行的Plunkr： https ：//plnkr.co/edit/HlYxdCsLzfCNCY1dq7vp ？ p = preview