Angularjs using $ routeProvider without ng-view

Question

I have a simple one-page application that displays images on it.

At the first load, the page is empty and people add their own images, however, if they return to the page with the saved identifier in the URL, I want the page to capture the previous model.

Now all my previous attempts to use routeProvider have failed if I did not put ng-view on the page. But this affects the areas that are inside the ng-view area.

Basically, I need to respond differently on the page depending on whether there is an identifier in the URL or not, but I do not change the view, and I need to get the identifier from the route parameters.

So I'm just wondering how you guys will do this because I seem to bark the wrong trees! Any help would be greatly appreciated.

Answer 1

Here is one way to handle URLs with and without id using the standard routeProvider setting, 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 in a different way, without using ng-view and relying on the $ 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 id available return; } // handle scenario when there is no id }); } ] ); 

Plunker

Answer 2

This plunker initiates the $ route service by adding $route as a dependency in the application launch 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']; }); }); 

Answer 3

You can do something similar to what Ben Nadel offers. This uses ng-switch and has a hash value for the key when deciding which template to render in conjunction with ng-include. Thus, when you go to a different URL, you listen to this change, update the model, and launch a new include / partial.

Ben Nadel - Nested Views, Routing, and Deep Communication with AngularJS

Answer 4

You can always define your own URL parser. Create a service, and then use it whenever and wherever 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 call it your controller as a service. Service Name: urlParser Method Name: parse (: string)

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

Hope this helps