node.js - angularjs ng-include not showing file -
i'm trying implement basic node-express angular app includes ng-include directive.
this structure of app:
- app:
- server.js
- package.json
- public:
- js
- css
- index.html
- partials:
- header.html
- partial-about.html
- partial-homt.html
the content of server.js 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 content of 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 try simplify index.html 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 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, ideas?
in order angular take on (and on order directives become effective), need initialize module:
<head> ... <script type="text/javascript"> angular.module('myapp', ['ui.router']); </script> </head> 
Comments
Post a Comment