Angularjs using $routeProvider without ng-view

Question

Angularjs using $routeProvider without ng-view

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

Answer 1

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

Answer 2

I also needed to use $routeProvider without ng-view. This plunker initiates $route service by adding $route as a dependency in the app run block. The idea is described here https://groups.google.com/forum/#!msg/angular/7K_agNCJ50Q/iaZmMp8t89IJ

http://plnkr.co/edit/S0ZgUkt4mqcKFbMrzISa?p=preview

Answer 3

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