文章/答案/技术大牛

发布

社区首页 >问答首页 >当我键入地址栏时，AngularJS $routeProviders无法工作。

问当我键入地址栏时，AngularJS $routeProviders无法工作。
EN

Stack Overflow用户

提问于 2015-09-27 23:13:26

回答 1查看 449关注 0票数 0

编辑: -我忘记说我用约曼和生成器-角(Grunt，Bower，角，角-路由)一起生成我的文件。

然后，我用了Grunt服务。。

只有当我点击我的菜单时，我在angularJS上的路由才能工作。当我在地址栏(地址栏)中键入url时，它说

Cannot GET /about

顺便说一下，我用下面的教程从url中删除了hashtag：

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安装连接-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

routes

angularjs

url

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-09-28 22:09:09

解决方案

首先，您需要通过npm安装连接-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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32813796

复制

相似问题

问当我键入地址栏时，AngularJS $routeProviders无法工作。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我键入地址栏时，AngularJS $routeProviders无法工作。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我键入地址栏时，AngularJS $routeProviders无法工作。
EN