How to config routeProvider and locationProvider in angularJS?

Question

I want to active html5Mode in angularJS, but I don't know why it's not working. Is there anything wrong with my code?

angular     .module('myApp',[])     .config(function($locationProvider, $routeProvider) {         $locationProvider.html5Mode(true);         $routeProvider.when('/', {            templateUrl: 'partials/home.html',             controller: HomeCtrl         });          $routeProvider.when('/tags/:tagId', {             templateUrl: 'partials/result.html',              controller: TagResultCtrl         });         //$routeProvider.otherwise({redirectTo: '/home', controller: HomeCtrl});      }); 

in html

  <a href="tags/{{tag.id}}"><img data-ng-src="{{tag.imageUrl}}"></a> 

Answer 1

The only issue I see are relative links and templates not being properly loaded because of this.

from the docs regarding HTML5 mode

Relative links

Be sure to check all relative links, images, scripts etc. You must either specify the url base in the head of your main html file (<base href="/my-base">) or you must use absolute urls (starting with /) everywhere because relative urls will be resolved to absolute urls using the initial absolute url of the document, which is often different from the root of the application.

In your case you can add a forward slash / in href attributes ($location.path does this automatically) and also to templateUrl when configuring routes. This avoids routes like example.com/tags/another and makes sure templates load properly.

Here's an example that works:

<div>     <a href="/">Home</a> |      <a href="/another">another</a> |      <a href="/tags/1">tags/1</a> </div> <div ng-view></div> 

And

app.config(function($locationProvider, $routeProvider) {   $locationProvider.html5Mode(true);   $routeProvider     .when('/', {       templateUrl: '/partials/template1.html',        controller: 'ctrl1'     })     .when('/tags/:tagId', {       templateUrl: '/partials/template2.html',        controller:  'ctrl2'     })     .when('/another', {       templateUrl: '/partials/template1.html',        controller:  'ctrl1'     })     .otherwise({ redirectTo: '/' }); }); 

If using Chrome you will need to run this from a server.

Answer 2

AngularJS provides a simple and concise way to associate routes with controllers and templates using a $routeProvider object. While recently updating an application to the latest release (1.2 RC1 at the current time) I realized that $routeProvider isn’t available in the standard angular.js script any longer.

After reading through the change log I realized that routing is now a separate module (a great move I think) as well as animation and a few others. As a result, standard module definitions and config code like the following won’t work any longer if you’re moving to the 1.2 (or future) release:

var app = angular.module('customersApp', []);  app.config(function ($routeProvider) {      $routeProvider.when('/', {         controller: 'customersController',         templateUrl: '/app/views/customers.html'     });  }); 

How do you fix it?

Simply add angular-route.js in addition to angular.js to your page (grab a version of angular-route.js here – keep in mind it’s currently a release candidate version which will be updated) and change the module definition to look like the following:

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

If you’re using animations you’ll need angular-animation.js and also need to reference the appropriate module:

 var app = angular.module('customersApp', ['ngRoute', 'ngAnimate']); 

Your Code can be as follows:

    var app = angular.module('app', ['ngRoute']);         app.config(function($routeProvider) {      $routeProvider         .when('/controllerone', {                 controller: 'friendDetails',                 templateUrl: 'controller3.html'              }, {                 controller: 'friendsName',                 templateUrl: 'controller3.html'              }      )         .when('/controllerTwo', {             controller: 'simpleControoller',             templateUrl: 'views.html'         })         .when('/controllerThree', {             controller: 'simpleControoller',             templateUrl: 'view2.html'         })         .otherwise({             redirectTo: '/'         });  });