不能在angular spa上加载不同的页面

cannot load different page on angular spa

本文关键字：加载 angular spa 不能      更新时间：2023-09-26

我正在express/node服务器上构建一个angular应用程序。有两页。我将它们设置为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，什么也没有。我应该在routeProvider中设置另一个when，然后重新加载users的页面吗?有没有更聪明的方法来做到这一点，不使用routeProvider ?我在app.js中为users声明了不同的路由，为什么它不只是加载页面?

Thanks in advance

更新

I changed this

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


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

仍然没有

更新2我在路由中也有一个otherwise案例和一个相对的"notFoundController"控制器。为了使问题简短，我一开始没有把它们包括在内。当我点击users时，我在页面上看到"似乎找不到你想要的页面"。

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

试试这个:

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

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

相关文章：