Question

所以，我是Grunt的新手，我正在制作一个小应用来测试手表，concat，uglify和cssmin插件。

我正在连接我的JS代码并丑化了连接的文件。但是我得到了一个＆＃34;错误：[ng：areq]＆＃34;在我的控制台上。如果我单独调用我的JS文件而不使用uglify和concat，它可以正常工作。

这是我的代码：

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="ezSeguros">
<head>
    <meta charset="UTF-8">
    <title>Gestión de Seguros</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <!-- Styles -->
    <link rel="stylesheet" href="build/css/styles.min.css" />
</head>
<body>
    <div class="container">
        <div class="row" ng-controller="InputController as nameCtrl">
            <input type="text" ng-change="nameCtrl.showName(name)" ng-model="name" />
        </div>
    </div>
    <!-- jQuery -->
    <script src="assets/libs/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="assets/libs/bootstrap.min.js"></script>
    <!-- Angular -->
    <script src="assets/libs/angular.min.js"></script>
    <!-- Scripts -->
    <script src="build/js/scripts.min.js"></script>
</body>
</html>

app.js

angular
    .module('ezSeguros',[]);

controller.js

function showCtrl() {
    this.showName = function(name){
        console.log(name);
    }
}

angular
    .module('ezSeguros',[])
    .controller('InputController',[showCtrl]);

Gruntfile.js

module.exports= function(grunt){

    // Project configuration. 
    grunt.initConfig({
        watch: {
            js: {
                files: ['app/**/*.js'],
                tasks: ['concat:js','uglify'],
            },
            css: {
                files: ['assets/css/custom/**/*.css'],
                tasks: ['concat:css','cssmin'],
            },
        },
        concat: {
            options: {
                banner: '(function () {',
                separator: '})(); (function () {',
                footer: '})();'
            },
            js: {
                src: ['assets/js/**/*.js','app/**/*.js'],
                dest: 'build/js/scripts.js',
            },
            css: {
                src: ['assets/css/custom/**/*.css'],
                dest: 'build/css/styles.css',
            },
        },
        uglify: {
            options: {
                mangle: false
            },
            scripts: {
                files: {
                    'build/js/scripts.min.js': ['build/js/scripts.js']
                }
            }
        },
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            target: {
                files: {
                    'build/css/styles.min.css': ['build/css/styles.css']
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    grunt.registerTask('default',['concat','uglify','cssmin','watch']);

};

这就是错误本身：

https://docs.angularjs.org/error/ng/areq?p0=InputController&p1=not%20a%20function,%20got%20undefined

谢谢！

Answer 1

Grunt不是问题。你要两次引导一个新的Angular模块。

示例：

angular
  .module('ezSeguros') // Your new angular module is already defined in app.js
  .controller('InputController',[showCtrl]);

另见：

Angular模块：Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined

角度缩小最佳做法：Angularjs minify best practice

Grunt的Uglify打破了我的Angularjs代码吗？

1 个答案: