AngularJS 模块中的多重配置答案

【问题标题】：multiple configuration in AngularJS moduleAngularJS 模块中的多重配置
【发布时间】：2015-11-28 12:50:07
【问题描述】：

我同时使用 ng-route 和 ng-translate，两者都需要在模块中进行配置。显然我的路由工作正常，但我的 ng-translate 存在与路由配置相同的问题。

"use strict";
(function(){
var app = angular.module('ratingApp', ['ngRoute', 'ui.bootstrap', 'ngMessages', 'ngFileUpload', 'ngAnimate', 'pascalprecht.translate']);
app.config(function($routeProvider, $translateProvider){
    $routeProvider
        .when('/', {
            templateUrl: 'views/list.html',
            controller: 'candidatescontroller'
            })
        .when('/candidate/:candiateIndex', {
            templateUrl: 'views/candiate.html',
            controller: 'candidatecontroller'
            })
    // .when('', )
        .otherwise({ redirectTo: '/'});
    $translateProvider.translations('en', {
        'TOPIC':'Candidate Poll'
            });
    $translateProvider.translations('fr', {
        'TOPIC':'Poll de Candidate'
            });
    $translateProvider.preferredLanguage('en'); 

});
}());

这是我得到的错误：

Unknown provider: $translateProvider <- $translate <-andidatescontroller

顺便说一句：这里是我的 index.html 在包含要求方面的结尾

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/vendor/angular.min.js"></script>
    <script src="js/vendor/angular-translate.min.js"></script>  
    <script src="js/vendor/angular-messages.min.js"></script>
    <script src="js/vendor/angular-route.min.js"></script>
    <script src="js/vendor/ui-bootstrap-tpls.min.js"></script>
    <script src="js/vendor/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
    <script src="js/vendor/ng-file-upload.min.js"></script> 
    <script src="js/vendor/angular-animate.min.js"></script>  
    <script src="js/rateApp.js"></script>
    <script src="js/services/candidates.js"></script> 
    <script src="js/services/modal.js"></script>       
    <script src="js/candidatescontroller.js"></script>
    <script src="js/candidecontroller.js"></script>

ng-tranlate相关的控制器代码：

use strict";
(function(){
var candidatescontroller = function($scope, $http, candidatesFactory, $timeout, modalService, $location, $anchorScroll, $translate){
    $scope.changeLanguage = function (key) {
            $translate.use(key);
    };
candidatescontroller.$inject = ['$scope', '$http', 'candidatesFactory', '$timeout', 'modalService', '$location', '$anchorScroll', ' $translate'];
angular.module('ratingApp').controller('candidatescontroller', candidatescontroller);
}());

我正在关注ng-newsletter 文章，当我在另一个没有路由的应用程序中使用它时，它对我有用，

另外，在将这个 ng-translate 配置添加到模块之前，我的路由工作正常。

我的代码的现场演示可以找到here

【问题讨论】：

您是否包含参考资料？
是的，我的朋友，它在 angular.min.js 和我的应用程序之上
你能创建一个 plunker 代码或 jsfiddle 吗？
当然。是的，让我把项目最小化，把最小的放在那里。
贴出这个控制器的代码。

标签： javascript angularjs ngroute angular-translate

【解决方案1】：

你在$translate有一个空格

candidatescontroller.$inject = ['$scope', '$http', 'candidatesFactory', '$timeout', 'modalService', '$location', '$anchorScroll', ' $translate'];

删除它

candidatescontroller.$inject = ['$scope', '$http', 'candidatesFactory', '$timeout', 'modalService', '$location', '$anchorScroll', '$translate'];

【讨论】：

【解决方案2】：

在底部的 Candidatecontroller.js 文件中，您有一个注入“$translate”的空间，删除该空间

candidatescontroller.$inject = ['$scope', '$http', 'candidatesFactory', '$timeout', 'modalService', '$location', '$anchorScroll', '$translate'];
angular.module('ratingApp').controller('candidatescontroller', candidatescontroller);

【讨论】：