AngularJS routes with Express Server
Question
I've started with Angular routes and Express together. When i click a route link, url change but nothing happens, Here is my code.When i click on a href , it change my url with something like that " http://localhost:3000/#!#%2Fhome " and nothing happens. i have tried changing the href without the "/" and "#" but nothing changed.
<html>
<head>
<base href="/" />
<meta charset="utf-8">
<title>Squared</title>
<link rel="stylesheet" href="/css/skeleton.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class="app-wrapper" ng-app = "myapp">
<div class="row app">
<div class="left">
<div class="left-search-wrapper">
<input type="text" name="search-bar" value="" placeholder="Search">
</div>
<div class="left-image-wrapper">
<img src="images/profilepic.png" class="left-image">
</div>
<div class="left-menu-wrapper">
<ul>
<li><a href="#/home">Home</a></li>
<li><a href="#/messages">Messages</a></li>
<li><a href="#/friends">Friends</a></li>
<li><a href="#/settings">Settings</a></li>
</ul>
</div>
</div>
<div class="columns eight right">
<div ng-view></div>
<script type="text/ng-template" id= "home.html">
<h2>Home</h2>
</script>
<script type="text/ng-template" id= "messages.html">
<h2>messages</h2>
</script>
<script type="text/ng-template" id= "friends.html">
<h2>friends</h2>
</script>
<script type="text/ng-template" id= "settings.html">
<h2>settings</h2>
</script>
</div>
</div>
</div>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
this is my app.js
var app = angular.module("myapp", ["ngRoute"]);
app.config(["$routeProvider", function($routeProvider){
$routeProvider
.when("/home", { templateUrl: "home.html"})
.when("/messages", { templateUrl: "messages.html"})
.when("/friends", { templateUrl: "friends.html"})
.when("/settings", { templateUrl: "settings.html"});
}]);
this is my Express server.js
var express = require("express");
var app = express();
var path = require("path");
app.use(express.static(__dirname));
function routeHandler(app){
app.get("/", function(req, res){
res.sendFile(__dirname + "/index.html");
});
}
routeHandler(app);
app.listen(3000);
this is my project directory organization:
- Root Folder
- index.html
- app.js
- server.js
- node_modules
- images
- css
3 answers
solution1
0 2016-12-31 11:13:32
您应该使用“ ng-href”而不是“ href”，因为在解析绑定之前跟随“ href”可能会导致错误的链接
solution2
0 ACCPTED 2016-12-31 12:15:24
Ok, now it works. I solved the problem by adding "$locationProvider.html5Mode(true);" now there is another problem: when i reload a url i receive a "Cannot get message"
solution3
-1 2016-12-31 11:06:00
define a template Url and handle it in your server and render the page.
.when("/home", { templateUrl: "/server/home"})
the url should route and match in your server side. And in your server.js
app.get('/home', function(req, res){
res.render('home.html')
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.