Javascript 角度路由/动态内容

我试图找出在angular应用程序中动态内容的最佳实践。我有一个包含一组电话号码的数组，我想根据电话号码所在的国家/地区创建一个页面/视图库。因此，所有德国电话号码都应该列在#/app/numbers/germany下

保存电话号码的数组将在页面加载时获取，因此它可以随时使用和过滤

通常我会根据url参数创建一个过滤，比如

？country=Germany

，但我认为这不是正确的方法

我使用过滤器从视图中删除重复项，以便在所有国家/地区创建一个列表（该列表应包含指向每个国家/地区下数字的链接）：

所以基本上我想知道这个场景中的最佳实践是什么——使用（动态）路由、基于URL加载数据还是完全不同的东西

解决方案

我通过使用路由中的

$stateParams

找到了一个解决方案。我的动态状态：

.state('app.single', {
 url: '/numbers/:country',
 views: {
   'menuContent': {
     templateUrl: 'templates/country.html',
     controller: 'CountryCtrl'
   }
 }
})

在控制器中，我将

$stateParams

分配给如下范围变量：

.controller('CountryCtrl', function($scope, $stateParams, Numbers) {
  //Load Firbase ref and get data
  $scope.numbers = Numbers;
  $scope.currentCountry = $stateParams.country;
})

最后，在视图中，我使用

$scope.currentCountry

筛选出与当前状态/路线匹配的数字：

ng repeat=“数字中的项目|过滤器：{Country:currentCountry}”

---

这样做的好处是，我不需要多次加载数据，但我可以依赖控制器逻辑。

我只加载您需要的数据：

首先，让我们声明一条有角度的路线

$routeProvider
        .when('/numbers/:country',{
            templateUrl : '/foo/bar/baz/numbers.html',
            controller : 'NumbersController'
        })

然后在NumbersController中，您可以使用country参数查询后端并获取与请求国家相关的数字数组

app.controller("NumbersController",function($scope,$http,$routeParams){
   $http({
    url: "some_url", 
    method: "GET",
    params: {country: $routeParams.country}
   }).success(function(response){
     //Handle the data here
   }).error(function(response){
     //Handle errors here
   });
 });

这种方法的第一个好处是不必加载整个阵列，只需加载所需的内容

此外，您不必进行过滤、解析和其他更复杂的操作

没有一种方法可以解决您的问题，但这是angularJS世界中的一种常见方法

如果您有一项功能为“getNumbers（country）”的服务（PhoneNumberSvc），可以按国家过滤电话号码：

app.module('appName')
.service('PhoneNumberSvc', [
    '$http',
    function ( $http ) {

        this.getNumbers = function ( country ) {
            return $http.get('numbers.json')
                .then(function ( response ) {
                    var return_data = [];
                    angular.forEach(response.data, function ( item ) {
                        if ( item.country = country ) {
                            return_data.push(item);
                        }
                    });
                    return return_data;
                });
        };

    }
]);

然后，您可以在配置中执行以下操作：

$routeProvider.when('/app/numbers/:country', {
    templateUrl: 'yourview.html',
    controller: 'YourController',
    resolve: {
        data: function ( $route, PhoneNumberSvc ) {
            var country = $route.current.params.country;
            return PhoneNumberSvc.getNumbers(country);
        }
    }
});

然后，在控制器中，确保插入参数“data”：

---

在阅读这篇文章之前，我自己也找到了一个类似的解决方案（你可以在上面看到）。不管怎样，我都会将此标记为正确答案，以供您解决问题。谢谢

$routeProvider.when('/app/numbers/:country', {
    templateUrl: 'yourview.html',
    controller: 'YourController',
    resolve: {
        data: function ( $route, PhoneNumberSvc ) {
            var country = $route.current.params.country;
            return PhoneNumberSvc.getNumbers(country);
        }
    }
});

angular.module('appName')
.controller('YourController', [
    '$scope',
    'data',
    function ( $scope, data ) {
        $scope.numbers = data;
    }
]);