动态更改角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文件的配置使用决心。