Search code examples
angularjsangular-translate

Error: "[$controller:ctrlreg] http://errors.angularjs.org/1.7.4/$controller/ctrlreg?p0=AppCtrl"

I want to translate my website/webpage in 2 languages but when I press the buttons to change the language nothing happens and this error appeared in console.

Index.html

<html ng-app='mpdmApp' lang="en">
  <head>
      <base href="/">
    <meta charset="utf-8">

  <script src="assets/js/libs/angular.min.js"></script>
    <script src="assets/js/libs/angular-animate.js"></script>
    <script src="assets/js/libs/angular-sanitize.js"></script>

      <script src="assets/js/libs/angular-messages.min.js"></script>
    <script src="assets/js/libs/angular-aria.js"></script>
    <script src="assets/js/libs/angular-route.js"></script>
    <script src="assets/js/libs/angular-material.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/app.config.js"></script>

    <script src="app/seafood/seafood.module.js"></script>
    <script src="app/seafood/seafood.component.js"></script>

    <!--scripturi angular translate-->
        <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.18.1/angular-translate.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-interpolation-messageformat/2.18.1/angular-translate-interpolation-messageformat.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-cookie/2.18.1/angular-translate-storage-cookie.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-local/2.18.1/angular-translate-storage-local.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-url/2.18.1/angular-translate-loader-url.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-static-files/2.18.1/angular-translate-loader-static-files.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-handler-log/2.18.1/angular-translate-handler-log.js"></script>
    <script src="app/script.js"></script>

  </head>

<body class="mp_sc_0">

    <mpdm-menu></mpdm-menu>

    <div ng-controller="MainCtrl">
      <div ng-view class="mpdmView"></div>
    </div>

</body>

app.js

var translationsEN = {
      seafood: 'Seafood',
      grill: 'Grill',
      BUTTON_LANG_DE: 'German',
      BUTTON_LANG_EN: 'English'
    };

    var translationsDE= {
      seafood: 'Preparate peste',
      grill: 'Preparate la gratar',
      BUTTON_LANG_DE: 'Deutsch',
      BUTTON_LANG_EN: 'Englisch'
    };

var mpdmApp = angular.module('mpdmApp', [
  'ngRoute', 'ngAnimate', 'ngSanitize','ngMaterial', 'ngMessages',  'mpdmSeafood', 'mpdmGrill', 'mpdmMeniu', 'pascalprecht.translate'
  ]);

 mpdmApp.config(['$translateProvider', function ($translateProvider) {
      // add translation tables
      $translateProvider.translations('en', translationsEN);
      $translateProvider.translations('de', translationsDE);
      $translateProvider.fallbackLanguage('de');
      $translateProvider.preferredLanguage('en');
    }]);

//----controllerul pentru traduceri
 mpdmApp.controller('MainCtrl', ['$translate', '$scope', function ($translate, $scope) {

      $scope.changeLanguage = function (langKey) {
        $translate.use(langKey);
      };
    }]);

mainpage.html - In this page I put the words that I want to be translated. I believe that because of that error in console I can't switch the languages.

 <div class="btn1">
   <a href="/seafood" translate="seafood"></a>
    </div>

    <div class="btn2>
    <a href="/grill">{{'grill' | translate}}</a>
      </div>

<button ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE"></button>
 <button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button>
Solution

  • app.config.js

    mpdmApp.config(function($routeProvider, $locationProvider) {
      $routeProvider
      .when('/', {
          template: '<mpdm-main-page></mpdm-main-page>'
        })
        .when('/seafood', {
          template: '<mpdm-seafood></mpdm-seafood>'
        })
        .when('/contact', {
          template: '<mpdm-contact></mpdm-contact>'
        })
        .when('/desprenoi', {
          template: '<mpdm-desprenoi></mpdm-desprenoi>'
        })
        .when('/multumim', {
          template: '<mpdm-multumim></mpdm-multumim>'
        })
        .when('/grill', {
          template: '<mpdm-grill></mpdm-grill>'
        })
        .when('/meniu', {
          template: '<mpdm-meniu></mpdm-meniu>'
        }).
                when('/notfound', {
          template: '<mpdm-coming-soon></mpdm-coming-soon>'
        }).
        otherwise({redirectTo:'/notfound'});

        $locationProvider.html5Mode(true);

    });