AngularJS 当我在地址栏中输入时 $routeProviders 不起作用

Question

编辑： 我忘了说我使用了 Yeoman 和生成器-angular（Grunt、Bower、Angular、angular-生成我的文件的路径。

然后，我使用了 Grunt Serve。

我在 angularJS 上的路线只有在我点击我的菜单时才有效。当我在地址栏（URL 栏）中键入 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

解决方案

首先，您需要通过 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

AngularJS 当我在地址栏中输入时 $routeProviders 不起作用

AngularJS $routeProviders does not work when I type in the address bar

url

routes

angularjs

解决方案

解决方案