angularjs ng-include not showing file

帅比萌擦擦* 提交于 2020-01-06 11:04:58

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!