Javascript 节点+；AngularJS ngRoute未显示正确的视图？_Javascript_Angularjs_Node.js

Javascript 节点+；AngularJS ngRoute未显示正确的视图？

javascript angularjs node.js

Javascript 节点+；AngularJS ngRoute未显示正确的视图？,javascript,angularjs,node.js,Javascript,Angularjs,Node.js,我正在运行一个测试节点服务器，我将在下面发布这个JS。我的主要问题是：我正在使用Angulars的ngRoute创建一个路由（'/login'），但是当我访问该路由时，它没有显示正确的templateUrl？检查下面的代码 server.js var express = require('express'), app = express(), mongoose = require('mongoose'), bodyParser = require('body-parser

我正在运行一个测试节点服务器，我将在下面发布这个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!');

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!');

如您所见，我有一个节点路由器外部文件api.js，其中包含一些api路由。我还有一个catchall返回/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>

正如@charlieftl评论中所述，您需要在url中包含

/#/

，angular的路由系统才能正常工作。但是，也有

HTML5模式

，您可以使用它使原始请求也能工作

只需注入

$locationProvider

，然后使用：

$locationProvider.html5Mode(true);

您可以阅读更多关于它的信息：

这将允许您不需要在url中使用

。

正如@charlieftl的评论中所述，您需要在url中包含

/#/

，angular的路由系统才能工作。但是，也有

HTML5模式

，您可以使用它使原始请求也能工作

只需注入

$locationProvider

，然后使用：

$locationProvider.html5Mode(true);

您可以阅读更多关于它的信息：

这将允许您在URL中不需要

。

您可以尝试使用

$stateProvider

而不是路由提供程序。我发现在你的主页上没有

，使用起来容易多了。这就是路由器要放的地方templates@DavidStampher这里是我的一些代码的链接，它有

$stateProvider

检查dev-tools-network选项卡中的ajax请求模板，看看是否成功。有错误吗？即使模板未显示，url是否仍保持在登录状态？您使用的url是什么…其中是否包含

#/

？如果没有连接到服务器页面，您可以尝试使用

$stateProvider

而不是路由提供程序。我发现在你的主页上没有

，使用起来容易多了。这就是路由器要放的地方templates@DavidStampher这里是我的一些代码的链接，它有

$stateProvider

检查dev-tools-network选项卡中的ajax请求模板，看看是否成功。有错误吗？即使模板未显示，url是否仍保持在登录状态？您使用的url是什么…其中是否包含

#/

？如果没有，则尝试连接到服务器页面