Angular Routing/Dynamic Content

Question

I'm trying to find out what the best practice is for dynamic content in an angular app. I have an array that contains a set of phone numbers and i want to create a page/view base on the country of the phone numbers. So all German phone numbers should be listed under #/app/numbers/germany for example.

The array that holds the phone numbers will be fetched at page load - so it's ready for use and filtration.

Normally I would create a filtration based on the url parameters like ?country=Germany, but I don't suppose this is the right way to do it.

I use a filter for removing duplicates from the view in order to create a list over all countries (which should hold the link to the numbers under each country):

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

So basically I want to know what the best practice in this scenario is - using (dynamic) routes, load data based on URL or something entirely different?

Solution

I've found a solution by using $stateParams from the routing. My dynamic state:

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

In the controller I assign the $stateParams to a scope variable like this:

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

And finally in the view I use $scope.currentCountry to filter out the numbers that match the current state/route:

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

The great thing about this is that i don't need to load data more than once, but I can rely on controller logic.

Answer 1

If you have a service (PhoneNumberSvc) with the function "getNumbers(country)" that filters the phone numbers by 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;
                });
        };

    }
]);

Then you could do something like this in your config:

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

Then, in your controller, be sure to inject the parameter "data":

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

Answer 2

I would load only the data you need:

At first let's declare an angular route

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

Then in the NumbersController you can use the country parameter to query the backend and fetch the array of numbers related to the requested 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
   });
 });

The first benefit of this approach is that you don't have to load the entire array, but only what you need.

Furthermore you don't have to do filtering and parsing and other more complex operations.

There is not one single way to solve your problem, but this is a common approach in the angularJS world