角度のjsでテンプレートURLを動的に変更

Question

データがJSONファイルに保存されるSPAを開発しています。 JSONファイルには、IDを含むページへのリンクも含まれています。ユーザーがIDを検索するたびに、そのIDに対応するページの内容をロードする必要があります。どうやってするの？

Answer 1

検索の実装は、おそらく指示文とは別にする必要があります。あなたがすでに何かをしているのでなければ、それに対する良い答えはありません。

ただし、ダイナミックテンプレートの読み込みは、IDなどのURLパラメータを読み取り、それに応じてリダイレクトする方法で実現できます。これらの方法の1つは$ locationですが、あなたのケースで最も良いのは$ routeParamsです。この度、あなたのURLの形式であると

（従ってをUI-ルータライブラリにngRouteを切り替えて調整し、より高度な制御のために）

const app = angular.module("app", ['ngRoute']); 

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider. 
    when('/some_path/:ID', { 
    templateUrl: 'templates.html', 
    controller: 'templateCtrl' 
    }); 
} 

：ここ

は一例ですwww.example.com/some_path/10 $ routeParams.IDの値が「10」のページにリダイレクトされます。

テンプレートコントローラでは、$ routeParamsを使用してJSONファイルをロードし、それに応じてページの$ scope値を入力できます。

app.controller("templateCtrl", function ($scope, $routeParams, $http) { 
    var id = $routeParams.ID; 
    $http.get('myFile.json'). 
    then((res) => { 
    // match your ID and load the data 
    let data = res.data; 
    let model; 
    for (let i = 0; i<data.length; i++){ 
     if (data[i].id == id){ 
     model = data[i].content; 
     break; 
     } 
    } 
    $scope.model = model; 
    }); 
}); 

データがロードされるまで、あなたのページのコンテンツを表示する前に、あなたの希望は、あなたのJSONファイルをロードする適切な工場/サービスを設定して決意を使用し、待機する場合。