Angular Routing/Dynamic 内容

Question

我正在尝试找出 angular 应用中动态内容的最佳做法。我有一个包含一组 phone 数字的数组，我想根据 phone 数字所在的国家/地区创建一个 page/view。例如，所有德国 phone 号码都应列在 #/app/numbers/germany 下。

包含 phone 数字的数组将在页面加载时获取 - 因此它已准备好使用和过滤。

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

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

.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 过滤掉匹配当前 state/route:

的数字

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

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

Answer 1

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

首先让我们声明一个angular路由

$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

如果您的服务 (PhoneNumberSvc) 具有按国家/地区过滤 phone 号码的功能 "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;
    }
]);

Angular Routing/Dynamic 内容

Angular Routing/Dynamic Content

javascript

angularjs

angular-routing