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

我正在使用这个JS运行一个测试Node服务器，我将在下面发布。我的主要问题是:我正在使用angular的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('33[2J');
console.log('Server started!');

如你所见，我有一个Node路由器外部文件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>

最后，这里是我的小测试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!');

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

只需注射$locationProvider，并使用:

$locationProvider.html5Mode(true);

你可以阅读更多关于它:

https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

这将允许您在url中不需要#。

相关内容

最新更新

热门标签：