Node + AngularJS ngRoute 没有显示正确的视图？答案

【问题标题】：Node + AngularJS ngRoute not displaying correct view?Node + AngularJS ngRoute 没有显示正确的视图？
【发布时间】：2015-08-23 21:33:29
【问题描述】：

我正在使用我将在下面发布的这个 JS 运行一个测试节点服务器。我的主要问题是：我正在使用 Angulars 的 ngRoute 创建一个路由（'/login'），但是当我访问该路由时它没有显示正确的 templateUrl？在下面检查我的代码。

server.js

var express = require('express'),
    app = express(),
    mongoose = require('mongoose'),
    bodyParser = require('body-parser'),
    apiRouter = require('./app/routes/api.js');

mongoose.connect('localhost', 'triviaattack');

app.use(bodyParser.urlencoded({ extended: false }));

app.use(apiRouter);
app.use(express.static('public'));

app.use('*', function(req, res, next) {
    res.sendFile(__dirname + '/public/index.html');
    next();
});

app.listen(1337);

console.log('\033[2J');
console.log('Server started!');

如您所见，我有一个 Node 路由器外部文件 api.js，其中包含一些 API 路由。其他所有内容我都有一个返回 /public/index.html 的包罗万象，这是加载 angular、angular-route 和我的 angular 应用程序的文件。

index.html

<!DOCTYPE html>

<html ng-app="myApp">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
    <script src="./app/app.js"></script>
</head>
<body>
    <div ng-controller="LoginCtrl">
        <a href="/login" ng-if="!loginData.isLoggedIn">Login!</a>
        <p ng-if="loginData.isLoggedIn">Welcome, you are logged in as {{ loginData.username }}</p>
    </div>
</body>
</html>

最后，这里是我的小型测试 Angular 应用程序，它在上面的 index.html 中使用相对路径 ./app/app.js 进行了引用

app.js

var myApp = angular.module('myApp',['ngRoute']);

myApp.controller('MainCtrl', ['$scope', function($scope) {

}]);

myApp.controller('LoginCtrl', ['$scope', function($scope) {
    $scope.loginData = {
        username: '',
        password: '',
        isLoggedIn: false
    }
}]);

myApp.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
        when('/login', { //Doesn't show!?!?!?!
            templateUrl: './app/views/login.html',
            controller: 'LoginCtrl'
        });
}]);

console.log('app.js loaded!');

【问题讨论】：

您可以尝试使用$stateProvider 代替路由提供程序。我发现这更容易使用
您的主页中没有<ng-view>。那就是路由器放置模板的地方
@DavidStampher 这里是我的一些代码的链接，它有$stateProvider github.com/joeLloyd/Scripto5000/blob/master/CordovaApp/…
在开发工具网络选项卡中检查模板的 ajax 请求，看它是否成功。抛出任何错误？即使模板未显示，网址是否仍保留在 login 上？
你用的是什么网址...里面有#/吗？如果不是，您正在尝试连接到服务器页面

标签： javascript angularjs node.js

【解决方案1】：

正如@charlieftl 在 cmets 中所述，您需要在 url 中包含 /#/ 才能使 Angular 的路由系统正常工作。但是，您也可以使用 html5Mode 来使您的原始请求正常工作。

只需注入$locationProvider，然后使用：

$locationProvider.html5Mode(true);

您可以阅读更多相关信息：

这将使您不需要在您的网址中使用#。

【讨论】：