AngularJs routeProvider 404 [英] AngularJs routeProvider 404

问题描述

code波纹管是AngularJs教程和点点被我修改。我想从URL中移除哈希值。其实，我成功了，但现在我有其他的问题。

当我使用本地主机连接，它工作得很好，我重定向到l​​ocalhost /手机。但在情况下，我尝试直接链接本地主机/手机，浏览器会引发了我404错误。为什么会这样？

code：

  VAR phonecatApp = angular.module（'phonecatApp'，[
ngRoute'，
phonecatControllers
]）;phonecatApp.config（['$ routeProvider'，'$ locationProvider'，函数（$ routeProvider，$ locationProvider）{
$ routeProvider
    。当（'/手机'，{
        templateUrl：'谐音/电话list.html'，
        控制器：'PhoneListCtrl
    }）。
    当（'/手机/：phoneId'，{
        templateUrl：'谐音/电话detail.html'，
        控制器：'PhoneDetailCtrl
    }）。
    除此以外（{
        redirectTo：'/电话
    }）;    $ locationProvider.html5Mode（真）.hash preFIX（！）;
}]）
 

解决方案

您必须处理URL重写服务器端为。

根据您的服务器上，你必须补充：

在阿帕奇（htaccess的为例）：

 ＆LT; IfModule mod_rewrite.c＆GT;
    RewriteEngine叙述在
    重写规则！\\。\\ w + $的index.html [L]
＆LT; / IfModule＆GT;
 

如果您正在使用咕噜咕噜-contrib请连，只是这个正则表达式添加一个中间件（modRewrite）：

 连接：{
  选项​​：{
      端口：9002，
      主机名：'localhost'的//把这里的IP，如果你想外部访问
  }，  开发：{
      选项​​：{
          中间件：功能（连接）{
              返回[
                  // modRewrite用于妥善处理angularjsHTML5模式
                  modRewrite（[
                      ^ [^ \\\\] * $ /index.html [L]'
                  ]）
              ]
          }
      }
  }
}
 

PS：你的主入口点必须在此情况下的index.html

PPS：您可能需要调整该正则表达式具体情况

Code bellow is from AngularJs tutorials and little bit modified by me. I wish to remove hash from url. I actually succeed, but now I have other problem.

When I use link localhost, it works just fine and redirect me to localhost/phones. But in case, that I try with direct link localhost/phones, browser throws me 404 error. Why is that so?

Code:

var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);

phonecatApp.config(['$routeProvider', '$locationProvider' ,function($routeProvider,       $locationProvider) {
$routeProvider
    .when('/phones', {
        templateUrl : 'partials/phone-list.html',
        controller : 'PhoneListCtrl'
    }).
    when('/phones/:phoneId', {
        templateUrl : 'partials/phone-detail.html',
        controller : 'PhoneDetailCtrl'
    }).
    otherwise({
        redirectTo : '/phones'
    });

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

解决方案

You have to handle url rewriting server-side for that.

Depending on your server, you'll have to add:

In apache (.htaccess for example) :

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule !\.\w+$ index.html [L]
</IfModule>

If you're using grunt and grunt-contrib-connect, just add a middleware (modRewrite) with this regexp :

connect: {
  options: {
      port: 9002,
      hostname: 'localhost' // put here any ip if you want external access
  },

  dev: {
      options: {
          middleware: function(connect) {
              return [
                  //modRewrite is used to handle properly angularjs' html5 mode
                  modRewrite([
                      '^[^\\.]*$ /index.html [L]'
                  ])
              ]
          }
      }
  }
}

ps: that your main entry point must be index.html in this case.

pps: you may have to tune this regexp for specific cases.

这篇关于AngularJs routeProvider 404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！