角度js - ng-view - ng-route - ビューを読み込むときの条件

Question

3言語を使用する単純なWebアプリケーションを構築していますが、部分的なHTMLファイルを使用してテキストブロックからコンテンツを動的に変更したい選択された言語。私が調査したところによると、w3schoolsからng-view機能をセットアップすることはあまり難しくありません。 ng-routing - w3schools

私が達成したいことはかなりシンプルかもしれませんが、私はw3schoolsから取った同じコードブロックを使用して私のアイデアを表現しようとします（次のコードはうまくいかないでしょうが、私の考えを説明できることを願っています）：

var app = angular.module("myApp", ["ngRoute"]); 
    app.config(function($routeProvider) { 
     // declare variable to evaluate 
     var lang = "(dynamic value)"; // this value will be set dynamically. 
     $routeProvider 
     // condition if variable value is "es" 
     if (lang == "es") { 
     .when("/es", { 
      templateUrl : "es.htm" 
     }) 
     } 
     // else if , load the other language 
     else if (lang == "ja") { 
     .when("/ja", { 
      templateUrl : "ja.htm" 
     }) 
     } 
     // if the value is none of above, then load the "default" one 
     else { 
     .when("/en", { 
      templateUrl : "en.htm" 
     }); 
    } 
    }); 

私の質問があまりにも混乱しないように願っています。私は$ resolveと$ route callbackについても研究しましたが、私はそれらを理解できません。

Answer 1

このロジックはそうngIncludeディレクティブを使用してのようなコントローラで構成することができる。

コントローラー：

app.module("myApp") 
    .controller("myController", 
    function() { 
     var self = this; 
     self.lang = "(dynamic value)"; 
     self.templatePath = ""; 
     if (lang === "es") { 
      self.templatePath = "(es path here)"; 
     } else if (lang === "ja") { 
      self.templatePath = "(ja path here)"; 
     } else { 
      self.templatePath = "(en path here)"; 
     } 
    }); 

閲覧：

<div ng-controller="myController as myCtrl"> 
    <div ng-include="myCtrl.templatePath"></div> 
</div> 

これもを行うことができ$routeProviderでtemplateUrl経由で楽しい例：

app.config(function($routeProvider) { 
    $routeProvider. 
     when('/:lang/somePage', { 
      templateUrl: function(urlAttr) { 
       if (urlAttr.lang === "es") { 
        return "/pathForEs"; 
       } else if (urlAttr.lang === "ja") { 
        return "/pathForJa"; 
       } else { 
        return "/pathForEn"; 
       } 
      }, 
      controller: "somePageController" 
     }). 
     otherwise({ 
      routeTo: "/", 
     }); 
});