Question

编辑：我忘了说我使用Yeoman和生成器角度（Grunt，Bower，Angular，angular-route来生成我的文件。

然后，我使用 Grunt Serve。

我在angularJS上的路线仅在我单击菜单时才有效。当我在地址栏（URL栏）中输入网址时，它会显示

Cannot GET /about

顺便说一句，我使用以下教程从url中删除了主题标签：
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

当我点击菜单时它工作正常。

我的index.html菜单：

<!doctype html>
<html>
  <head>
    ...
    <base href="/">
  </head>
  <body ng-app="myApp">
    ...
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="/about" class="pure-menu-link">ABOUT</a></li>
        <li class="pure-menu-item"><a href="/work" class="pure-menu-link">WORK</a></li>
        <li class="pure-menu-item"><a href="/blog" class="pure-menu-link">BLOG</a></li>
        <li class="pure-menu-item"><a href="/contact" class="pure-menu-link">CONTACT</a></li>
    </ul>
  ...
  </body
</html>

我的路线app.js：

angular
  .module('myApp', [
    'ngAnimate',
    'ngResource',
    'ngRoute',
    'ngTouch'
  ])
  .config(['$routeProvider','$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        redirectTo: '/about'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .otherwise({
        redirectTo: '/'
      });
      //check browser support
      if(window.history && window.history.pushState){
        // if you don't wish to set base URL then use this
        $locationProvider.html5Mode({
          enabled: true
        });
      }
    }]);

解

首先，您需要通过npm：

安装connect-modrewrite

npm install --save-dev connect-modrewrite

然后确保在Gruntfile.js的顶部声明了以下内容：

var modRewrite = require('connect-modrewrite');

最后一步：在Gruntfile.js中的中间件中添加它

modRewrite(['^[^\\.]*$ /index.html [L]']),

这里是完整的代码：

livereload: {
    options: {
        open: true,
        middleware: function (connect) {
            return [
                modRewrite(['^[^\\.]*$ /index.html [L]']),
                connect.static('.tmp'),
                connect().use(
                    '/bower_components',
                    connect.static('./bower_components')
                ),
                connect.static(appConfig.app)
            ];
        }
    }
},

感谢Kryx AngularJS html5Mode using Grunt connect. grunt 0.4.5

Answer 1

解