文章/答案/技术大牛

发布

社区首页 >问答首页 >Html5 Pushstate与AngularJS，ui.Router和yeoman

问Html5 Pushstate与AngularJS，ui.Router和yeoman
EN

Stack Overflow用户

提问于 2014-08-20 09:22:33

回答 1查看 3.3K关注 0票数 6

我想用我的角质js应用程序修复肝脏。我使用的是带有html5推状态的yoeman ui路由器.

一个人要做什么？

html

mod-rewrite

angularjs-directive

pushstate

connect-modrewrite

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-20 09:22:33

用于搜索引擎的索引，您必须在<head> of <head> index.html中添加以下内容

<meta name="fragment" content="!">
<base href="/">

应用程序在您的app.js中，您必须注入以下依赖项并添加函数。

angular
  .module('yourApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ui.router',
  ])
  .config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

  // HTML5 PUSH STATE
  $locationProvider.html5Mode(true).hashPrefix('!');

  $urlRouterProvider.otherwise('/');

  // STATES
  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'views/home.html',
      controller: 'homeCtrl'
    });
});

中间件

解决这一问题的方法是调整连接-modrewrite中间件。

在您的控制台中的your文件夹中安装带有节点数据包管理器的中间件。

npm install connect-modrewrite

然后调整Gruntfile.js

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


livereload: {
    options: {
      open: true,
      base: [
        '.tmp',
        '<%= yeoman.app %>'
      ],
      middleware: function (connect, options) {
        var middlewares = [];

        middlewares.push(modRewrite(['^[^\\.]*$ /index.html [L]'])); //Matches everything that does not contain a '.' (period)
        options.base.forEach(function (base) {
          middlewares.push(connect.static(base));
        });

        middlewares.push(
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          )
        );

        return middlewares;
      }
    }
  },

现在使用命令开始您的咕噜

grunt serve

票数 11

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

原文链接：

https://stackoverflow.com/questions/25401114

复制

相似问题

问Html5 Pushstate与AngularJS，ui.Router和yeoman
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Html5 Pushstate与AngularJS，ui.Router和yeomanEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Html5 Pushstate与AngularJS，ui.Router和yeoman
EN