javascript - Angular 路由/动态内容

Question

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

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

通常我会根据 ?country=Germany 等 url 参数创建过滤，但我认为这不是正确的方法。

我使用过滤器从 View 中删除重复项，以便创建所有国家/地区的列表(其中应包含指向每个国家/地区下的数字的链接):

.filter('unique', function(){
   return function(collection, keynam){
      var output = [];
          keys = [];
   angular.forEach(collection, function(item){
      var key = item[keyname];
      if(keys.indexOf(key) === -1) {
         keys.push(key);
         output.push(item);
      }
  });
   return output;
 };
})

所以基本上我想知道这种情况下的最佳实践是什么 - 使用(动态)路由、基于 URL 加载数据或完全不同的东西？

解决方案

我通过使用路由中的 $stateParams 找到了解决方案。我的动态:

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

在 Controller 中，我将 $stateParams 分配给范围变量，如下所示:

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

最后，在 View 中，我使用 $scope.currentCountry 过滤出与当前状态/路线匹配的数字:

ng-repeat="数字项 | 过滤器:{Country:currentCountry}"

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

Answer 1

如果您的服务 (PhoneNumberSvc) 具有“getNumbers(country)”功能，可按国家/地区过滤电话号码:

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);
        }
    }
});

然后，在您的 Controller 中，请务必注入(inject)参数“data”:

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