角路由/动态内容

Question

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

包含电话号码的数组将在页面加载时获取-这样就可以使用和过滤了。

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

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

.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

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

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

$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世界中的一种通用方法

Answer 2

如果您有一项具有功能“ 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”：

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