ui-router(0.2.18)带点参数

时间:2016-03-22 21:05:45

标签: javascript angularjs angular-ui-router

我正在开发角度应用程序(1.5.2),并且在一种情况下具有状态函数的URL,如下所示

http://localhost:3000/payment/1.1/2/3

但是我收到了错误:

Cannot GET /payment/1.1/2/3

ui-router的版本 - 0.2.18。我读到他们解决了这个问题,但对我来说它不起作用。 SO上的相同答案对我也没有帮助。

状态配置:

.state('payment', {
          url: '/payment/:token/:id/:chanel_id',
          templateUrl: 'app/payment/payment.html',
          controller: 'PaymentController',
          controllerAs: 'vm'
      });

我的server.js文件:

    'use strict';

var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');

var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');

var util = require('util');

var proxyMiddleware = require('http-proxy-middleware');
var historyApiFallback = require('connect-history-api-fallback');

function browserSyncInit(baseDir, browser) {
  browser = browser === undefined ? 'default' : browser;

  var routes = null;
  if(baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) {
    routes = {
      '/bower_components': 'bower_components'
    };
  }


  var server = {
    baseDir: baseDir,
    routes: routes,
    middleware: [ historyApiFallback() ]
  };

  browserSync.instance = browserSync.init({
    startPath: '/',
    server: server,
    browser: browser
  });
}

browserSync.use(browserSyncSpa({
  selector: '[ng-app]'// Only needed for angular apps
}));

gulp.task('serve', ['watch'], function () {
  browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
});

gulp.task('serve:dist', ['build'], function () {
  browserSyncInit(conf.paths.dist);
});

gulp.task('serve:e2e', ['inject'], function () {
  browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []);
});

gulp.task('serve:e2e-dist', ['build'], function () {
  browserSyncInit(conf.paths.dist, []);
});

1 个答案:

答案 0 :(得分:2)

您的网络服务器是什么。

如果请求不是文件,您必须重定向index.html上的所有请求。

我认为你必须在你的路由器$ locationProvider.html5Mode(true);

中添加它

BrowserSync和Gulp的解决方案。

首先安装connect-history-api-fallback:

  

npm install connect-history-api-fallback --save-dev

然后编辑你的gulp / server.js并添加中间件:

var historyApiFallback = require('connect-history-api-fallback');
var server = {
    baseDir: baseDir,
    routes: routes,
    middleware: [ historyApiFallback() ]
};