0

我有一个angular由Grunt.js. 我将角度路由器用于不同的页面：

索引.html

...
<body ng-app="app">
   ...
   <div ng-view></div>
   ...
</div>
...

_users.html

<h1>Users</h1>
...

应用程序.js

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

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'views/_home.html',
            controller: 'HomeCtrl'
        }).
        when('/users', {
            templateUrl: 'views/_users.html',
            controller: 'UsersCtrl'
        }).
        otherwise({ redirectTo: '/' });
}]);

// ... controllers

路由适用于客户端渲染，例如表单请求site.com等site.com/#/users。如果我申请$locationProvider.html5Mode({ enabled: true })，直接调用site.com/users将失败，因为没有users.html或users/index.html文件。是否有一个智能的 grunt 插件知道在构建分发目录时渲染布局内的视图？也就是说，为每个嵌套视图生成一个目录结构：

dist
├── index.html
└── users
│   └── index.html
├── css
│   └── app.css
└── js
    └── app.js

谢谢。

4

1 回答 1

1

所以，总结一下我们在评论中的讨论：

  1. 要获得漂亮的网址：您应该配置$locationProvider并设置html5Mode为true

  2. 然后，您的服务器应该查看请求的文件夹（即查看 URL site.com/my-folder/ 的文件夹 my-folder），这样它就不会工作

  3. 所以你必须在你的 htaccess 中制定一个基本的重写规则（假设你正在使用 Apache 服务器），类似的东西（假设 index.html 是你的应用程序的入口点：

>

RewriteEngine on
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_URI} !\.(gif|jpe?g|png|css|js)$
RewriteRule .* /index.html [L,R=302]

来自 Angular 文档：https : //docs.angularjs.org/guide/$location#server-side

除非您真的想将静态文件提供给客户端（出于任何原因），否则这就是解决方案。

于 2014-11-25T12:54:55.983 回答