anglejsアプリケーションがコード連結後に機能しない

Question

私はanglejsアプリケーションを持っています。JSファイルを1つのファイルに連結したいと考えています。現在、Grunt.jsを使用してJavaScriptを連結する自動ビルドプロセスをセットアップしようとしていますファイル。 $インジェクター：modulerr モジュールエラー

は、しかし、私のアプリは、私のアプリは、エラースローファイルをconcatinating後concatenation.But前にエラーなしで実行されます。

は以下のjsファイルを縮小化しているときは、厳密にDIのInline Array Annotationまたは$inject Property Annotationのいずれかを実行する必要があり縮小

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

 

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

 
app.config(function ($routeProvider) { 
 
    'use strict'; 
 
    $routeProvider 
 
     .when('/', { 
 
     templateUrl: 'views/main.html', 
 
     controller: 'mainCntrl' 
 
     }) 
 
     .when('/about', { 
 
     templateUrl: 'views/about.html', 
 
     controller: 'aboutCntrl', 
 
     controllerAs: 'about' 
 
     }) 
 
     .otherwise({ 
 
     redirectTo: '/' 
 
     }); 
 
    }); 
 

 
    app.controller('mainCntrl',['$scope', function ($scope) { 
 
    \t 'use strict'; 
 

 
    this.awesomeThings = [ 
 
     'HTML5 Boilerplate', 
 
     'AngularJS', 
 
     'Karma' 
 
    ]; 
 
    
 
    }]); 
 

 
app.controller('aboutCntrl',['$scope', function ($scope) { 
 
    'use strict'; 
 
    this.awesomeThings = [ 
 
     'HTML5 Boilerplate', 
 
     'AngularJS', 
 
     'Karma' 
 
    ]; 
 
    }]);

どれヘルプappreciated.Thanks :)

Answer 1

後に私のコードです。

app.config(function ($routeProvider) { 
    'use strict'; 
    //code 
}); 

は以下のコードに変更する必要があります。

Inline Array Annotation

app.config(['$routeProvider', function ($routeProvider) { 
    'use strict'; 
    //code as is 
}]); 

$inject Property Annotation

var config = function($routeProvider) { 
    'use strict'; 
    //code as is 
} 
config.$inject = ['$routeProvider']; 
app.config(config); 

Answer 2

設定行があなたの問題であるように思える、はい、あなたの注釈が適切ではないapp.config(['$routeProvider', function ($routeProvider) { ... }]);

Answer 3

を試してみてください。それは、安全でクリーンでシンプルなソリューションとして

app.config(['$routeProvider', function ($routeProvider) { 
    'use strict'; 
    //code 
}]); 

使用ng-annotateでなければなりません。

gruntはあなたの定義に適切な方法で注釈を付けるので、Angularの奇妙な方法に対処する必要はありません。

実行

app.config(function($routeProvider) { 
    'use strict'; 
    //code 
}); 

にNG-注釈、それは縮小のためにそれオートコンプリートされます：あなたはまた、ビルドワークフローに別のステップを追加することができます

app.config(["routeProvider", function($routeProvider) { 
    'use strict'; 
    //code 
}]); 

Answer 4

からgrunt-ng-annotateその場合には、あなたほぼすべての厳しいDI注釈をスキップすることができます。このプラグインを使用すると、サービスを簡素化することができます/コントローラの定義例えば：

app.controller('mainCntrl', function ($scope) { 
    'use strict'; 

    this.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma' 
    ]; 
    }); 

あなたはコントローラまたは別のサービスに注入するためのサービスの長いリストをつくとき、それは非常に便利です。それぞれの依存関係を2回覚えておく必要はありません。