在定义路由时,Angularjs应用程序崩溃并出现“错误:递归太多”

时间:2015-01-10 14:41:41

标签: javascript jquery angularjs node.js

我正在按照本教程使用angularjs和laravel:http://angular-tips.com/blog/2014/11/working-with-laravel-plus-angular-part-2/。但是,如果我在config.routes.js中定义一个指向控制器,任何控制器的路由,我的应用程序崩溃了。在控制台中出现错误“错误:太多的递归”,以及无用的堆栈跟踪。

我的所有文件与教程中的文件完全相同,我只更改了路径和控制器的名称,但这不应该有所作为。

我google了一下,似乎这个错误可能是由于使用了错误版本的jquery引起的。我使用angularjs 1.3.0并且我不知道我的应用程序使用的是哪个jquery版本,但是我使用了npm install angular,所以如果安装了错误的版本会很奇怪,对吗?

我完全迷失了为什么会发生这种情况而且非常沮丧,所以任何帮助都会非常感激。

感谢。

编辑:添加代码:

应用程序/ JS / config.routes.js

angular.module('app').config(function($routeProvider, $locationProvider)
{
    $locationProvider.html5Mode(true).hashPrefix('!');

    $routeProvider.when('/transactions', 
    {
        templateUrl: 'features/transactions/transactions.tpl.html',
        controller: 'Transactions'
    });
});

应用程序/ JS /交易/ transactions.js:

angular.module('app').controller('Transactions', function($scope, $http)
{
    $http.get('/api/transactions').then(function(result) 
    {
        $scope.shows = result.data;
    });
});

transactions.tpl.html为空。

app.js:

angular.module('app', ['ngRoute']);

编辑2:添加了gulp.js 我在这里唯一改变的是,我添加了'webserver'任务。

var gulp    = require('gulp');
var fs      = require('fs');
var plugins = require('gulp-load-plugins')();
var es      = require('event-stream');
var del     = require('del');

var publicFolderPath = '../public';

var paths = {
  appJavascript:     ['app/js/app.js', 'app/js/**/*.js'],
  appTemplates:      'app/js/**/*.tpl.html',
  appMainSass:       'app/scss/main.scss',
  appStyles:         'app/scss/**/*.scss',
  appImages:         'app/images/**/*',
  indexHtml:         'app/index.html',
  vendorJavascript:  ['vendor/js/angular.js', 'vendor/js/**/*.js'],
  vendorCss:         ['vendor/css/**/*.css'],
  finalAppJsPath:    '/js/app.js',
  finalAppCssPath:   '/css/app.css',
  specFolder:        ['spec/**/*_spec.js'],
  publicFolder:      publicFolderPath,
  publicJavascript:  publicFolderPath + '/js',
  publicAppJs:       publicFolderPath + '/js/app.js',
  publicCss:         publicFolderPath + '/css',
  publicImages:      publicFolderPath + '/images',
  publicIndex:       publicFolderPath + '/angular.html',
  publicJsManifest:  publicFolderPath + '/js/rev-manifest.json',
  publicCssManifest: publicFolderPath + '/css/rev-manifest.json'
};

gulp.task('scripts-dev', function() {
  return gulp.src(paths.vendorJavascript.concat(paths.appJavascript, paths.appTemplates))
    .pipe(plugins.if(/html$/, buildTemplates()))
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.concat('app.js'))
    .pipe(plugins.sourcemaps.write('.'))
    .pipe(gulp.dest(paths.publicJavascript));
});
gulp.task('scripts-prod', function() {
  return gulp.src(paths.vendorJavascript.concat(paths.appJavascript, paths.appTemplates))
    .pipe(plugins.if(/html$/, buildTemplates()))
    .pipe(plugins.concat('app.js'))
    .pipe(plugins.ngAnnotate())
    .pipe(plugins.uglify())
    .pipe(plugins.rev())
    .pipe(gulp.dest(paths.publicJavascript))
    .pipe(plugins.rev.manifest({path: 'rev-manifest.json'}))
    .pipe(gulp.dest(paths.publicJavascript));
});

gulp.task('styles-dev', function() {
  return gulp.src(paths.vendorCss.concat(paths.appMainSass))
    .pipe(plugins.if(/scss$/, plugins.sass()))
    .pipe(plugins.concat('app.css'))
    .pipe(gulp.dest(paths.publicCss));
});

gulp.task('styles-prod', function() {
  return gulp.src(paths.vendorCss.concat(paths.appMainSass))
    .pipe(plugins.if(/scss$/, plugins.sass()))
    .pipe(plugins.concat('app.css'))
    .pipe(plugins.minifyCss())
    .pipe(plugins.rev())
    .pipe(gulp.dest(paths.publicCss))
    .pipe(plugins.rev.manifest({path: 'rev-manifest.json'}))
    .pipe(gulp.dest(paths.publicCss));
});

gulp.task('images', function() {
  return gulp.src(paths.appImages)
    .pipe(gulp.dest(paths.publicImages));
});

gulp.task('indexHtml-dev', ['scripts-dev', 'styles-dev'], function() {
  var manifest = {
    js: paths.finalAppJsPath,
    css: paths.finalAppCssPath
  };

  return gulp.src(paths.indexHtml)
    .pipe(plugins.template({css: manifest['css'], js: manifest['js']}))
    .pipe(plugins.rename(paths.publicIndex))
    .pipe(gulp.dest(paths.publicFolder));
});

gulp.task('indexHtml-prod', ['scripts-prod', 'styles-prod'], function() {
  var jsManifest  = JSON.parse(fs.readFileSync(paths.publicJsManifest, 'utf8'));
  var cssManifest = JSON.parse(fs.readFileSync(paths.publicCssManifest, 'utf8'));

  var manifest = {
    js: '/js/' + jsManifest['app.js'],
    css: '/css/' + cssManifest['app.css']
  };

  return gulp.src(paths.indexHtml)
    .pipe(plugins.template({css: manifest['css'], js: manifest['js']}))
    .pipe(plugins.rename(paths.publicIndex))
    .pipe(gulp.dest(paths.publicFolder));
});

gulp.task('lint', function() {
  return gulp.src(paths.appJavascript.concat(paths.specFolder))
    .pipe(plugins.jshint())
    .pipe(plugins.jshint.reporter('jshint-stylish'));
});

gulp.task('testem', function() {
  return gulp.src(['']) // We don't need files, that is managed on testem.json
    .pipe(plugins.testem({
      configFile: 'testem.json'
    }));
});

gulp.task('clean', function(cb) {
  del([paths.publicJavascript, paths.publicImages, paths.publicCss, paths.publicIndex], {force: true}, cb);
});

gulp.task('watch', ['indexHtml-dev', 'images'], function() {
  gulp.watch(paths.appJavascript, ['lint', 'scripts-dev']);
  gulp.watch(paths.appTemplates, ['scripts-dev']);
  gulp.watch(paths.vendorJavascript, ['scripts-dev']);
  gulp.watch(paths.appImages, ['images-dev']);
  gulp.watch(paths.specFolder, ['lint']);
  gulp.watch(paths.indexHtml, ['indexHtml-dev']);
  gulp.watch(paths.appStyles, ['styles-dev']);
  gulp.watch(paths.vendorCss, ['styles-dev']);
});

gulp.task('webserver', ['indexHtml-dev', 'images-dev'], function() {
  plugins.connect.server({
    root: paths.tmpFolder,
    port: 5000,
    livereload: true,
    middleware: function(connect, o) {
      return [ (function() {
        var url = require('url');
        var proxy = require('proxy-middleware');
        var options = url.parse('http://localhost:8000/api');
        options.route = '/api';
        return proxy(options);
      })(), historyApiFallback ];
    }
  });
});

gulp.task('default', ['watch']);
gulp.task('production', ['scripts-prod', 'styles-prod', 'images', 'indexHtml-prod']);

function buildTemplates() {
  return es.pipeline(
    plugins.minifyHtml({
      empty: true,
      spare: true,
      quotes: true
    }),
    plugins.angularTemplatecache({
      module: 'app'
    })
  );
}

0 个答案:

没有答案