I have a simple single page app that shows images on it.

On first load the page is blank and people add their own images however if they then return to the page with their saved id in the url then I want the page to grab the previous model.

Now all my previous attempts to use routeProvider have failed unless I put ng-view somewhere in the page. But this then affects the scopes that are inside the ng-view scope.

Basically I need to respond differently on the page depending if there is an id in the url or not but I'm not changing the view and I need to get the id from the route parameters.

So I was just wondering how you guys would go about doing this as I seem to be barking up the wrong trees! Any help would be much appreciated.

I have a simple single page app that shows images on it.

On first load the page is blank and people add their own images however if they then return to the page with their saved id in the url then I want the page to grab the previous model.

Now all my previous attempts to use routeProvider have failed unless I put ng-view somewhere in the page. But this then affects the scopes that are inside the ng-view scope.

Basically I need to respond differently on the page depending if there is an id in the url or not but I'm not changing the view and I need to get the id from the route parameters.

So I was just wondering how you guys would go about doing this as I seem to be barking up the wrong trees! Any help would be much appreciated.

• javascript
• angularjs

4 Answers 4

Here's one way to handle url with and without id, using standard routeProvider setup, with one controller:

JS:

var app = angular.module('plunker', []);

app.config(function($routeProvider){
  return $routeProvider
    .when('/', {
      controller: 'HomeController',
      templateUrl: 'home.html'
    })
    .when('/:id', {
      controller: 'HomeController',
      templateUrl: 'home.html'
    })
    .otherwise({ redirectTo: '/' });
});

app.controller('HomeController',
    [
      '$scope',
      '$routeParams',
      function($scope, $routeParams) {
        if($routeParams.id){
          $scope.id = $routeParams.id;
          // handle scenario when there is an id in URL
          return;
        }

        // handle scenario when there is no id
        $scope.id = 'no ID!!';
      }
    ]
  );

Plunker

And here's another way, without using ng-view and relying on $location service:

var app = angular.module('plunker', []);

app.config(
    ['$locationProvider',
      function($locationProvider) {
        $locationProvider.html5Mode(true);
      }
    ]
  );

app.controller('HomeController',
    [
      '$scope',
      '$location',
      function($scope, $location) {

        $scope.$watch(function(){
            return $location.hash();
          },
          function(id){
            $scope.id = id;
          }
        );

        $scope.$watch('id', function(id){
          if(id){
            // handle scenario when there's id available
            return;
          }
          // handle scenario when there is no id
        });

      }
    ]
  );

Plunker

This plunker initiates a $route service by adding $route as a dependency in the app run block. The idea is described here.

angular.module('myApp', ['myApp.controllers'])
  .config(function($routeProvider) {
    return $routeProvider.when("/", {
      controller: 'firstCtrl'
    }).when("/numbers/:number", {
      controller: 'secondCtrl'
    });
  }).run(function($route) {});

angular.module("myApp.controllers", [])
  .controller("firstCtrl", function($scope) {
    $scope.numbers = [1, 2, 3];
  })
  .controller("secondCtrl", function($scope,$routeParams, $rootScope, $location) {
    return $rootScope.$on("$routeChangeSuccess", function(event, current) {
      $scope.current_path = $location.$$path;
      $scope.number = $routeParams['number'];
    });
  });

You could do something similar to what Ben Nadel suggests. That is using ng-switch and have a hash value for a key in deciding what template to render coupled with ng-include. That way when you change to a different url path, you listen for that change, update the the model, and fire off a new include/partial.

Ben Nadel - Nested Views, Routing, And Deep Linking With AngularJS

You can always define your own url parser. Create a service and then use when and where you want.

angular.module('app').service('urlParser', function(){
    this.parse = function(url){
        var query = url.split('?')
        if (url.length == 1){ return {} } //it means it has no parameters
        else{
            var paramsArray = query.split('&')
            var params = {} //this is going to be your return object
            var i;
            for ( i=0; i < paramsArray.length; i++ ){
                var arr = paramsArray[i].split('=')
                var param = arr[0]
                var value;
                //check if is set with some value
                if( arr.length == 1 )
                    value = null
                else
                    value = arr[1]
                obj[param] = value
            }
            return obj;
        }
    }
})

And you will be calling it from you controller as a service. Name of service: urlParser Name of method: parse(:string)

Example:
var url = "http://www.yourwebsite./yourroute?page=1&user=1000"
var params = urlParser.parse(url)
params.page //gives you 1
params.user //gives you 1000

Hope this helped