Question

我刚安装了角度翻译，但此后的网页无效。

在这里你可以找到我的代码：

app.js

angular
.module('frontEndApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ngStorage',
    'ngResource',
    'angular-translate'
])
.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl',
            controllerAs: 'main'
        })

的index.html。

  <script src="bower_components/angular-translate/angular-translate.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/controllers/prueba/pruebaController.js"></script>
<script src="scripts/controllers/loginController.js"></script>
<script src="scripts/controllers/department/departmentController.js"></script>
<script src="config/appConstants.js"></script>
<script src="config/languajes.js"></script>

languajes.js

'user strict';

var app = angular.module('frontEndApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {

    $translateProvider.translations('en', {
        code: 'Code',
        department: 'Deparment',
        description: 'Description',
        boss: 'Boss',
        project: 'Project'
    });

    $translateProvider.translations('es', {
        code: 'Código',
        department: 'Deparmento',
        description: 'Descripción',
        boss: 'Jefe',
        project: 'Proyecto'
    });

    $translateProvider.preferredLanguage('en');
    // $translateProvider.useSanitizeValueStrategy('escapeParamenters');
}]);

    app.config(['$locationProvider', function ($locationProvider) {
      $locationProvider.html5Mode(true);
    }]);

    app.controller('Ctrl', function ($scope, $translate) {
        $scope.changeLanguage = function (key) {
        $translate.use(key);
      };
    });

bower.json

 {
"name": "front-end",
"version": "0.0.0",
"dependencies": {
"angular": "^1.6.6",
"bootstrap-sass-official": "^3.2.0",
"angular-animate": "^1.6.6",
"angular-aria": "^1.6.6",
"angular-cookies": "^1.6.6",
"angular-messages": "^1.6.6",
"angular-resource": "^1.6.6",
"angular-route": "^1.6.6",
"angular-sanitize": "^1.6.6",
"angular-touch": "^1.6.6",
"bootstrap-sass": "bootstrap-sass-official#^3.3.7",
"ngstorage": "^0.3.11",
"angular-translate": "^2.16.0"
},
"devDependencies": {
"angular-mocks": "^1.6.6",
"angularLocalStorage": "ngStorage#^0.3.2"
},
"appPath": "app",
"moduleName": "frontEndApp",
"overrides": {
"bootstrap": {
  "main": [
    "less/bootstrap.less",
    "dist/css/bootstrap.css",
    "dist/js/bootstrap.js"
    ]
   }
 }
}

问题是系统工作正常，但是当我插入脚本时一切都消失了，网页只有空白，只显示标题。

我尝试了几种解决方案，但我不知道。

https://docs.angularjs.org/error/ $注射器/ NOMOD？P0 = pascalprecht.translate

https://angular-translate.github.io/docs/#/guide

和这里的一些链接。你能救我吗？

Answer 1

在 languajes.js ：

angular.module('frontEndApp', ['pascalprecht.translate'])

告诉angular创建一个名为frontEndApp的模块 - 它会覆盖您在 app.js 中创建的模块。

（由于HTML中脚本的顺序，因为 app.js 在 languajes.js 之前运行，所以会覆盖。）

您需要做什么：

app.js

angular
.module('frontEndApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ngStorage',
    'ngResource',
    'pascalprecht.translate'
])
.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl',
            controllerAs: 'main'
        })

languajes.js

'user strict';

var app = angular.module('frontEndApp');

app.config(['$translateProvider', function ($translateProvider) {

    $translateProvider.translations('en', {
        code: 'Code',
        department: 'Deparment',
        description: 'Description',
        boss: 'Boss',
        project: 'Project'
    });

    $translateProvider.translations('es', {
        code: 'Código',
        department: 'Deparmento',
        description: 'Descripción',
        boss: 'Jefe',
        project: 'Proyecto'
    });

    $translateProvider.preferredLanguage('en');
    // $translateProvider.useSanitizeValueStrategy('escapeParamenters');
}]);

app.config(['$locationProvider', function ($locationProvider) {
  $locationProvider.html5Mode(true);
}]);

app.controller('Ctrl', function ($scope, $translate) {
    $scope.changeLanguage = function (key) {
    $translate.use(key);
  };
});

Answer 2

坦克，一切正常。这是解决方案。 'use strict';

/**
 * @ngdoc overview
 * @name frontEndApp
 * @description
 * # frontEndApp
 *
 * Main module of the application.
 */

angular
.module('frontEndApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ngStorage',
    'ngResource',
    'pascalprecht.translate'
]).config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl',
            controllerAs: 'main'
        })
        .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutCtrl',
            controllerAs: 'about'
        })
        .when('/prueba', {
            templateUrl: 'views/prueba/prueba.html',
            controller: 'pruebaController',
            controllerAs: 'prueba'
        })
        .when('/login', {
            templateUrl: 'views/login/login.html',
            controller: 'loginController',
            controllerAs: 'login'
        })
        .when('/department', {
            templateUrl: 'views/department/department.html',
            controller: 'departmentController',
            controllerAs: 'departmentController',
            data: {
                title: 'department',
                section: 'department'
            }
        })
        .otherwise({
            redirectTo: '/'
        });
}).config(['$translateProvider', function ($translateProvider) {

    $translateProvider.translations('en', {
        code: 'Code',
        department: 'Deparment',
        description: 'Description',
        boss: 'Boss',
        project: 'Project'
    });

    $translateProvider.translations('es', {
        code: 'Código',
        department: 'Deparmento',
        description: 'Descripción',
        boss: 'Jefe',
        project: 'Proyecto'
    });

    $translateProvider.preferredLanguage('en');
    // $translateProvider.useSanitizeValueStrategy('escapeParamenters');
}]);

angular-translate不工作但不是错误

2 个答案: