angularjs ng-include未显示文件 [英] angularjs ng-include not showing file
本文介绍了angularjs ng-include未显示文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试实现一个基本的节点表达角度应用程序，其中包括ng-include指令.
I'm trying to implement a basic node-express angular app which includes an ng-include directive.
这是我的应用程序的结构:
This is the structure of my app:
- 应用程序:
- server.js
- package.json
- public:
- js
- css
- index.html
- 部分:
- header.html
- partial-about.html
- partial-homt.html
server.js的内容如下:
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);这是我的index.html的内容:
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>但是，当我尝试将index.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>header.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?
推荐答案
要使Angular接管(并按指令生效的顺序)，您需要初始化模块:
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>这篇关于angularjs ng-include未显示文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
