角度路由;在浏览器中直接访问URL时不起作用，但在单击时起作用

Angular routing doesn't work when URL is directly visited in browser but works when clicked to?

本文关键字：起作用 URL 不起作用 访问 单击 路由 浏览器      更新时间：2024-05-26

我有一个带目录结构的angular应用程序

app 
..views
....partials
......main.jade
......foo.jade
....index.jade

以及定义的路线，如：

"严格使用"；

angular.module('myApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute', 
  'firebase', 
  'myApp.config'
])
  .config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);  
    $routeProvider
      .when('/', {
        templateUrl: '/partials/main',
        controller: 'MainCtrl'
      })
      .when('/foo/:fooName', {
        templateUrl: '/partials/foo',
        controller: 'FooCtrl'
      })            
      .otherwise({
        redirectTo: '/'
      });
  });

我在服务器端使用express，相关代码是：

    // server.js 
   app.configure('development', function(){
     app.use(express.static(path.join(__dirname, '.tmp')));
     app.use(express.static(path.join(__dirname, 'app')));
     app.use(express.errorHandler());
   });
   app.configure('production', function(){
    app.use(express.favicon(path.join(__dirname, 'public/favicon.ico')));
    app.use(express.static(path.join(__dirname, 'public')));
   });
    app.get('/', routes.index);
    app.get('/partials/:name', routes.partials);
    //routes.js
    exports.index = function(req, res){
      res.render('index');
    };

    exports.partials = function(req, res){
      var name = req.params.name;
      res.render('partials/' + name);
    };

主路线"/"加载良好，当我单击"/foo/bar"时，局部视图foo.jade会按预期加载。然而，当我尝试直接访问URL中的"/foo/bar"时，我从Express "cannot GET /foo/bar"得到了404响应，这是有意义的，因为在Express中没有定义这样的路由。然而，我认为这就是定义角度路由器的全部意义。。即它应该拦截该请求并实际请求CCD_ 6。我试着添加

//redirect all others to the index (HTML5 history)
app.get('*', routes.index);

但它并没有解决这个问题，似乎甚至捕捉到了对静态js资产的请求，并用index.html的内容进行了响应，这非常糟糕。我确信我做错了什么。如何修复问题，以便直接访问URL？

路由之所以如此，是因为打开了html5mode。注意行：$locationProvider.html5Mode(true);

您需要了解，当您尝试直接访问"/foo/bar"时，浏览器会向该URL发送HTTP GET请求。当你试图通过点击链接访问这个url时，就像你说的那样，Angular正在拦截这个动作，并调用History.pushState，它只更新浏览器的链接。

为了使html5mode路由工作，您需要做的是实现url重写。每个请求都必须重定向到引导AngularJS应用程序的索引文件，但这需要在服务器上完成。Angular将自己呈现所需的页面。

看看连接mod重写繁重的任务，它做得很糟糕。

您也可以直接使用这个中间件。

相关文章：