Question

我试图找出角度应用中动态内容的最佳做法。我有一个包含一组电话号码的数组，我想在电话号码的国家/地区创建一个页面/视图。因此，所有德国电话号码都应列在＃/ app / numbers / germany下。

保存电话号码的阵列将在页面加载时获取 - 因此可以使用和过滤。

通常情况下，我会根据?country=Germany这样的网址参数创建过滤，但我不认为这是正确的方法。

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

.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'
   }
 }
})

在控制器中，我将$stateParams分配给范围变量，如下所示：

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

最后在视图中我使用$scope.currentCountry过滤掉与当前状态/路线匹配的数字：

ng-repeat="item in numbers | filter:{Country:currentCountry}"

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

Answer 1

我只会加载您需要的数据：

首先让我们声明一个角度路线

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

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

Æ -> AE
Ø -> O
Å -> A

这种方法的第一个好处是您不必加载整个阵列，而只需加载您需要的。

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

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

Answer 2

如果您的服务（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);
        }
    }
});

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

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

角度路由/动态内容

2 个答案: