2016-05-02 21 views
0

私はui-routerモジュールを使用するAngularJSアプリケーションを持っています。英語 アプリケーションの初期化コントローラへのパラメータの取得方法

  • site.com/en/login中>ホームページ - - >ログインページ英語で

    • site.com/en: 私はこのようなアプリケーションのURLで言語を管理したいです
    • site.com/de -
    • ドイツsite.com/de/login中>ホームページ - ドイツ
    • で>ログインページ....

    私の目標は、取得することですこの言語 - この言語がアプリケーションで利用可能かどうかを確認するには、 - アプリケーションを初期化するためにいくつかのWSを要求します。

    私はルートを管理するには、次のapp.routes.tsファイルを作成しました:

    app.routes.ts:

    'use strict'; 
    myApp.config(function($locationProvider: ng.ILocationProvider, 
               $stateProvider: ng.ui.IStateProvider, 
               $urlRouterProvider: ng.ui.IUrlRouterProvider) { 
    
    $stateProvider 
        .state('notFound', { 
         url: '/notFound', 
         views: { 
          '[email protected]': { 
           templateUrl: 'app/notFound/notFoundView.html', 
           controller: 'NotFoundController', 
           controllerAs: 'vm' 
          } 
         } 
        }) 
        .state('root', { 
         url: '/:languageCode', 
         abstract: true, 
         views: { 
          'header': { 
           templateUrl: 'app/header/headerView.html', 
           controller: 'HeaderController', 
           controllerAs: 'vm' 
          }, 
          'footer': { 
           templateUrl: 'app/footer/footerView.html', 
           controller: 'FooterController', 
           controllerAs: 'vm' 
          } 
         } 
        }) 
        .state('root.home', { 
         url: '', 
         views: { 
          '[email protected]': { 
           templateUrl: 'app/home/homeView.html', 
           controller: 'HomeController', 
           controllerAs: 'vm' 
          } 
         } 
        }) 
        .state('root.login', { 
         url: '/login', 
         views: { 
          '[email protected]': { 
           templateUrl: 'app/login/loginView.html', 
           controller: 'LoginController', 
           controllerAs: 'vm' 
          } 
         } 
        }); 
    
    $urlRouterProvider.otherwise('/en'); 
    
    //html5 removes the need for # in URL 
    $locationProvider.html5Mode({ 
        enabled: true 
    }); 
    
    }); 
    

    私はindex.htmlをのコントローラを定義しています

    index.htmlをの

    一部:

    <html ng-app="myApp" ng-controller="InitializationController"> 
    

    そして、私は言語InitializationController中(パラメータで使用される '言語コード')取得したい:

    initializationController.ts:

    'use strict'; 
    /** 
    * InitializationController is used as controller of the index page 
    * Used to initialize the main parameters of the application 
    */ 
    class InitializationController { 
    
    static $inject = ['$stateParams', 'ParametersService', 'LayoutService']; 
    
    constructor(private $stateParams: any, 
          private parametersService:ParametersService, 
          private layoutService: LayoutService) { 
        // Retrieve the language used in the url 
        console.log('test:' + this.$stateParams); 
        // Retrieve the main parameters of the application from configuration files 
        parametersService.initialize() 
         .then(this.initApplication.bind(this)); 
    } 
    
    /** 
    * Initialize the web application 
    */ 
    private initApplication(): void { 
        // Retrieve the language used in the url 
        console.log('test:' + this.$stateParams); 
        // Retrieve the language to use to display labels 
        var language: string = ""; //TODO 
        // Retrieve the data used in all pages : header, footer and menu 
        this.layoutService.retrieveLayoutByLanguage(language); 
    } 
    
    } 
    
    myApp.controller('InitializationController', InitializationController); 
    

    app.routes.tsで定義されたルートをOKと思われます。

    このコントローラでlanguageCodeパラメータを取得することはできますか?

    デバッグモードでは、$ stateParamsが空であることがわかります:languageCodeパラメータはありません。

    ありがとうございます。

  • 答えて

    0

    私はこの問題の解決策が見つかりました:

    initializationController:initializationController.tsで

    を、私はその後、私は今、私の言語パラメータを取得することができる午前、$ stateChangeStartにリスナーを追加しています。 ts:

    'use strict'; 
    /** 
    * InitializationController is used as controller of the index page 
    * Used to initialize the main parameters of the application 
    */ 
    class InitializationController { 
    
        static $inject = ['$stateParams', 'ParametersService', 'LayoutService']; 
    
        constructor(private $stateParams: any, 
         private parametersService:ParametersService, 
         private layoutService: LayoutService) { 
         // Retrieve the parameters 
         $rootScope.$on('$stateChangeStart', this.retrieveParameters.bind(this)); 
         // Retrieve the main parameters of the application from configuration files 
         parametersService.initialize() 
         .then(this.initApplication.bind(this)); 
        } 
    
        /** 
        * Initialize the web application 
        */ 
        private initApplication(): void { 
         // Retrieve the language to use to display labels 
         var language: string = ""; //TODO 
         // Retrieve the data used in all pages : header, footer and menu 
         this.layoutService.retrieveLayoutByLanguage(language); 
        } 
    
        private retrieveParameters(event: any, 
              toState: angular.ui.IState, 
              toParams: any, 
              fromState: angular.ui.IState, 
              fromParams: any): void { 
         this.languageInUrl = toParams.languageCode; 
        } 
    
    } 
    
    myApp.controller('InitializationController', InitializationController); 
    
    関連する問題