Question

我正在快速/节点服务器上构建一个角度应用程序。有两页。我在app.js

上设置了它们

var routes = require('./routes/index');
var users = require('./routes/users');

app.use('/', routes.list);
app.use('/users/', users.showUsers);

这里是路线（index.js和users.js）

exports.list = function(req, res){
res.render('index')
};

exports.showUsers = function(req, res){
res.render('users')
};

现在，users.ejs只是一个虚拟页面，如

<!DOCTYPE html>
<html >    
    <div id="main">
     this is where content will be injected 
    </div>
</html>

但index.ejs是水疗风格，如

<html ng-app="sp">
var sp = angular.module('sp', ['ngRoute']);

sp.config(function ($routeProvider,  $locationProvider) {
    // configure the routes


    $routeProvider
    .when('/', {
    // route for the home page
        templateUrl: 'http://localhost:4800/home.html',
        controller: 'homeController'
    })

    .when('/about', {
    // route for the about page
        templateUrl: 'http://localhost:4800/about.html',
        controller: 'aboutController'
    })
    .otherwise({
        templateUrl: 'http://localhost:4800/routeNotFound.html',
       controller: 'notFoundController'
    });

    $locationProvider.html5Mode(true).hashPrefix('!');

});

sp.controller('homeController', function ($scope) {
    $scope.message = 'Welcome to my home page!';
});

sp.controller('aboutController', function ($scope) {
    $scope.message = 'Find out more about us.';
});

   sp.controller('notFoundController', function ($scope) {
       $scope.message = 'There seems to be a problem finding the page you wanted';
    });

<li><a href="/"> Home</a></li>
<li><a href="about"> About</a></li>          
<li><a href="/users/"> users</a></li>

    <div id="main">
        <div ng-view></div>
    </div>

链接是main div中的菜单和索引加载的不同模板。但是，当我点击<li><a href="/users/"> users</a></li>它没有加载页面时，它认为是另一个加载索引并失败的模板。我甚至试图像http://localhost:4800/users那样设置不同的链接。我应该在when中设置另一个routeProvider，然后重新加载users的页面吗？不使用routeProvider是否有更明智的方法可以做到这一点？我在app.js为users宣布了一条不同的路线，为什么它只是加载页面？

提前致谢

更新

我改变了这个

app.use('/', routes.list);
app.use('/users/', users.showUsers);

到这个

app.get('/', routes.list);
app.get('/users/', users.showUsers);

仍然没有

更新2 我在路由中还有一个otherwise个案例和一个相对的“notFoundController”控制器。我一开始没有把它们包括在内，以简化问题。当我点击用户时，我会在页面上看到“找到你想要的页面时出现问题”。

更新3 我的原始代码是 sp.config(function ($routeProvider, $locationProvider) {。在相同的配置功能中 $locationProvider.html5Mode(true).hashPrefix('!');。如果将其删除并将菜单网址前缀从/更改为#（用户仍然/），则一切正常。但我不明白为什么html 5模式打破了整个代码而我不想使用#

Answer 1

试试这个：

 <li><a href="/users/" target="_self"> users</a></li>

target属性将强制angular不使用自己的路由，只执行服务器请求。

不能在角度spa上加载不同的页面

1 个答案: