问题
I'm trying to implement a basic node-express angular app which includes an ng-include directive.
This is the structure of my app:
- App:
- server.js
- package.json
- public:
- js
- css
- index.html
- partials:
- header.html
- partial-about.html
- partial-homt.html
The content of my server.js is the following:
var express = require("express");
var app = express();
var port = process.env.PORT || 8080;
app.configure(function () {
app.use(express.static(__dirname + "/public"));
app.use(express.logger("dev"));
});
app.listen(port);
console.log("App listening on port: " + port);
This is the content of my index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS UIRouter demo</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
</head>
<body ng-app="MyApp">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">DD test Angular-UI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a href="./partials/partial-home.html">Home</a></li>
<li><a href="./partials/partial-about.html">About</a></li>
</ul>
</nav>
<div ui-view></div>
</body>
</html>
However when I try to simplify index.html to this:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS UIRouter demo</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
</head>
<body ng-app="MyApp">
<div ng-include="'./partials/header.html'" ></div>
<div ui-view></div>
</body>
</html>
With header.html obviously including:
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">DD test Angular-UI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a href="./partials/partial-home.html">Home</a></li>
<li><a href="./partials/partial-about.html">About</a></li>
</ul>
</nav>
It doesn't work, any ideas?
回答1:
In order for Angular to take over (and on order for the directives to become effective), you need to initialize the module:
<head>
...
<script type="text/javascript">
angular.module('MyApp', ['ui.router']);
</script>
</head>
来源:https://stackoverflow.com/questions/23191975/angularjs-ng-include-not-showing-file