模板的角度路由答案

【问题标题】：Angular-Route for Templates模板的角度路由
【发布时间】：2017-02-21 18:47:13
【问题描述】：

我无法让我的路线在我的 Angular 应用程序中工作。它正在正确显示主模板，但是当我单击另一个模板的链接时，没有任何反应。这是我的代码：

INDEX.HTML

<!DOCTYPE html>
<html>
<head>
   <title>Node, NPM and Bower</title>
   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
   <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
   <link rel="stylesheet" href="style.css">
</head>
<body ng-app="app">

<nav>
    <h3>Angular App</h3>
    <a href="/">Home</a>
    <a href="/about">About</a>
</nav>

<div ng-view></div>

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="./app/app.js"></script>
</body>
</html>

APP.JS

angular.module("app", ["ngRoute"]).
config(function($routeProvider) {
   $routeProvider
   .when("/", {
      template : "<h1>Home</h1>"
   })
   .when("/about", {
      template : "<h1>About</h1>"
   });
});

另外，当我尝试将本地主机与 Express 和 Node 一起使用时，Bootstrap 和 Angular 是否根本不起作用？例如，如果我在浏览器中拉出 index.html，文本是 sans-serif 等，但如果我使用 localhost 拉出它，它仍然是默认的 serif 字体。

SERVER.JS

var express = require('express');
var app = express();
var path = require('path');

app.get('/', function(req, res) {
   res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(3000, function() {
   console.log('app started');
});

【问题讨论】：

标签： javascript angularjs node.js express

【解决方案1】：

Angular 1.5
因此，您需要使用基本的 1.5 路由：

   <a href="#about">About</a>

击中路线。见Plunker for more info

Angular 1.6
如果您使用的是 Angular 1.6，它是：

<a href="#!about">About</a>

查看AngularJS: ngRoute Not Working 了解其他选项。

引导问题
应该没有问题，缓存正常。

【讨论】：

感谢您的帮助！那固定的东西。但是，它仍然无法在 localhost 上运行。我将添加我的 server.js 文件，以便您也可以查看。
您的 server.js 文件对我来说看起来不错。没有错误吗？是角度未加载还是服务器未运行？
我想通了。我必须添加这三行：app.use(express.static(__dirname + '/views')); app.use('/bower_components', express.static(__dirname + '/bower_components')); app.use('/public', express.static(__dirname + '/public'));

【解决方案2】：

我想出了答案。您需要告诉服务器从它们的目录中路由您的静态文件，如下所示：

app.use(express.static(__dirname + '/views'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.use('/public', express.static(__dirname + '/public'));

【讨论】：