動態更改角js中的模板url

Question

我正在開發一個SPA，其中的數據存儲在JSON文件中。 JSON文件還包含指向包含ID的頁面的鏈接。每當用戶搜索一個ID時，應該加載與該ID對應的頁面內容。怎麼做？

Answer 1

您的搜索實施應該是單獨的，也許是一個指令。除此之外，沒有什麼好的答案，除非你有一些工作。

但是，動態模板加載可以通過允許您讀取URL參數（如ID）並相應地重新指定的方法來實現。其中一種方法是$ location，而對於您的情況最好的方法是$ routeParams。

下面是一個例子：

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

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

（對於更高級的控制，切換ngRoute到UI的路由器庫和相應地調整）

有了這個一旦你的URL是在一種形式：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文件的配置使用決心。