不工作的WAMP Angular.js路线 [英] Angular.js routes not working on WAMP

问题描述

我的工作建立建有防爆preSS，节点，MySQL的堆栈中Angular.js单页的应用程序。我已经设置了以下code的路线：

  angular.module（对myApp'，['myApp.filters'，'myApp.services'，'myApp.directives']）。
  配置（['$ routeProvider'，'$ locationProvider'，函数（$ routeProvider，$ locationProvider）{
     $ routeProvider
      。什么时候（'/'， {
        templateUrl：谐音/索引，
        控制器：IndexCtrl
      }）
      。当（'/ addPost'，{
        templateUrl：谐音/ addPost'，
        控制器：AddPostCtrl
      }）
      。当（'/ readPost /：身份证'，{
        templateUrl：谐音/ readPost'，
        控制器：ReadPostCtrl
      }）
      。当（'/ editPost /：身份证'，{
        templateUrl：/谐音/ editPost'，
        控制器：EditPostCtrl
      }）
      。当（'/ deletePost /：身份证'，{
        templateUrl：谐音/ deletePost'，
        控制器：DeletePostCtrl
      }）
      。当（'/待办事项，{
        templateUrl：谐音/待办事项，
        控制器：TodosCtrl
     }）
     。除此以外（{
        redirectTo：'/'
     }）;

    $ locationProvider.html5Mode（真正的）;
  }]）;
 

当我去我的应用程序本地主机：3000，然后点击一个链接，本地主机：3000 /待办事项一切正常，但是当我刷新页面，我碰到一个错误无法GET /待办事项。经过一番研究，我发现，问题是，当你刷新服务器改掉加载/待办事项，并且由于资源不存在它的错误。该解决方案似乎是成立mod_rewrite的任何页面重定向到该指数也是正确的角度可以将其路由。

所以，我确信mod_rewrite的是未提交在httpd.conf，并更新了以下部分：

 ＆LT;目录/＆GT;
    所有的AllowOverride
    订购允许，拒绝
    所有允许
＆LT; /目录＆GT;
 

然后创建一个.htaccess文件里面有app.js.我的根目录里面我创建的.htaccess文件中添加以下code：

 ＆LT; IFModule mod_rewrite.c＆GT;
    RewriteEngine叙述上
    重写规则^（。*）$'/'
＆LT; / IFModule＆GT;
 

然后我重新启动Apache和命中刷新在localhost：3000 /待办事项，并得到了相同的无法获取/待办事项的消息。我在做什么错在这里？

有些想法我是

1. 在我不知道哪个目录放的.htaccess的，所以我只是把它的根。
2. 在我不知道'/'是向用户发送到，我希望它去到索引正确的地方，但因为我只有内部/public/index.jade一个index.jade文件，我想知道如果我需要指出，不知怎的，但翡翠的扩展似乎是错误的。
3. 是重写规则我写了要带的用户登陆页面或者刷新了正确的页面/书签，即刷新在localhost：3000 /待办事项应该把你的待办事项页面而不是网页

解决方案

mod_alias中或aliasmatch可能会有所帮助。

http://httpd.apache.org/docs/2.2/mod/ mod_alias.html

您基本上需要为你的脚本内容，在这是为你的应用程序的有效途径的任何URL。

我认为这将做到这一点：

  Alias​​Match ^ /待办事项（。*）/
Alias​​Match ^ / deletePost（。*）/
Alias​​Match ^ / editPost（。*）/
...
 

有一件事要小心，如果你的应用程序需要以实际获取的内容返回给用户（如您的模板），确保他们不是在说正在被混淆为您路线相同的目录结构。

例如，如果你有一个叫做待办事项/ todos.html模板，当浏览器试图获取它，它反而会得到你的/页面的副本。

I am working on setting up an Angular.js single page application built with an Express, Node, mySQL stack. I have set up the following code for the routes:

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
  config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
     $routeProvider
      .when('/', {
        templateUrl: 'partials/index',
        controller: IndexCtrl
      })
      .when('/addPost', {
        templateUrl: 'partials/addPost',
        controller: AddPostCtrl
      })
      .when('/readPost/:id', {
        templateUrl: 'partials/readPost',
        controller: ReadPostCtrl
      })
      .when('/editPost/:id', {
        templateUrl: '/partials/editPost',
        controller: EditPostCtrl
      })
      .when('/deletePost/:id', {
        templateUrl: 'partials/deletePost',
        controller: DeletePostCtrl
      })
      .when('/todos', {
        templateUrl: 'partials/todos',
        controller: TodosCtrl
     })
     .otherwise({
        redirectTo: '/'
     });

    $locationProvider.html5Mode(true);
  }]);

When I go to my application localhost:3000 and then click on a link for localhost:3000/todos everything works, however when I refresh the page I get an error "Cannot GET /todos". After some research I have found that the problem is that when you refresh the server trys to load /todos and since the resource doesn't exist it errors. The solution seems to be to set up mod_rewrite to redirect any page to the index so angular can route it correctly.

So I made sure that mod_rewrite is uncommitted in the httpd.conf, and updated the following section:

<Directory />
    AllowOverride all
    Order Allow,Deny
    Allow from all
</Directory>

Then created a .htaccess file inside my root directory with app.js. Inside the .htaccess file I created I added the following code:

<IFModule mod_rewrite.c>
    RewriteEngine on
    RewriteRule ^(.*)$ '/'
</IFModule>

Then I restarted apache and hit refresh on localhost:3000/todos and got the same "Cannot GET /todos" message. What am I doing wrong here?

Some thoughts I have are

1. I don't know what directory to put .htaccess in, so I just put it in the root.
2. I'm not sure '/' is the correct place to send the user to, I want it to go to the index but since I only have an index.jade file inside /public/index.jade I'm wondering if I need to point to that somehow but the jade extension seems wrong.
3. Is the RewriteRule I wrote going to take the user to the landing page or the correct page they refreshed/bookmarked, i.e. refreshing on localhost:3000/todos should take you to the todos page not the homepage

解决方案

mod_alias or aliasmatch might be helpful.

http://httpd.apache.org/docs/2.2/mod/mod_alias.html

You basically need to serve your script contents at any URL that is a valid route for your application.

I think this would do it:

AliasMatch ^/todos(.*) /
AliasMatch ^/deletePost(.*) /
AliasMatch ^/editPost(.*) /
...

One thing to be careful of, if your application needs to actually fetch content back to the user (such as your templates) make sure they are not under the same directory structure that's being aliased for your routes.

For example, if you had a template called "todos/todos.html", when the browser tried to fetch it, it would instead get a copy of your "/" page.

这篇关于不工作的WAMP Angular.js路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！