我正在尝试使用 AngularJS 设置一个单页应用程序。 我将 Node 与 Express 一起使用，并且我有一个用作中间件的 apache 服务器(如果这很重要的话)。 我的 index.html 页面加载良好，但 ng-view 内没有加载任何 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>
我找不到我的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
关于javascript - AngularJS 无法加载 ng-view inti index.html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47333066/