How to configure routeProvider and locationProvider in angularJS?

I want active html5Mode in angularJS, but I do not know why it does not work. Is there something 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> 
+46
angularjs
Dec 12
source share
6 answers

The only problem I see is relative links and templates that are not loading properly due to this.

from documents regarding HTML5 mode

Relative links

Be sure to check all relative links, images, scripts, etc. You must specify the url base in the header of the html main file ( <base href="/my-base"> ), or you must use absolute URLs (starting with / ) everywhere because relative URLs will be resolved to absolute URLs addresses using the source absolute URL of the document, which often differs from the root of the application.

In your case, you can add a slash / in the href attributes ( $location.path does this automatically), as well as templateUrl when configuring routes. This avoids routes like example.com/tags/another and loads templates correctly.

Here is 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 you use Chrome, you will need to run it from the server.

+60
Dec 12 '12 at 5:27
source share

AngularJS provides a simple and concise way to associate routes with controllers and templates using the $routeProvider . Having recently updated the application to the latest version (1.2 RC1 at the current time), I realized that $routeProvider no longer available in the standard angular.js script.

After reading the change log, I realized that routing is now a separate module (it seems to me a big move), as well as animation and some others. As a result, standard module definitions and a configuration code, such as the following, will work more if you upgrade to version 1.2 (or future):

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

How do you fix it?

Just add angular -route.js in addition to angular.js to your page (take the version of angular -route.js here - keep in mind the current version of the candidate release that will be updated) and change the module definition as follows:

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

If you use animations, you will need angular -animation.js, and you also need to reference the appropriate module:

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

Your code may 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: '/' }); }); 
+3
Feb 28 '14 at 19:07
source share

Try

If you are deploying your application in the root context (e.g. https://myapp.com/ ), set the base URL in /:

 <head> <base href="/"> ... </head> 

Angular Documentation

+3
Aug 15 '15 at 21:49
source share

The following is a description of how you can configure $ locationProvider using the requireBase=false flag to avoid setting the href <head><base href="/"></head> :

 var app = angular.module("hwapp", ['ngRoute']); app.config(function($locationProvider){ $locationProvider.html5Mode({ enabled: true, requireBase: false }) }); 
+1
Jul 19 '17 at 5:20
source share

you can try:

 <a href="#/controllerone">Controller One</a>|| <a href="#/controllerTwo">Controller Two</a>|| <a href="#/controllerThree">Controller Three</a> <div> <div ng-view=""></div> </div> 
0
Feb 28 '14 at 19:46
source share

@ Simple solutions

I am using a simple Python http server. When in the directory of the Angular application in question (using MBP with Mavericks 10.9 and Python 2.x), I just run

python -m SimpleHTTPServer 8080

And this installs a simple server on port 8080, allowing you to visit localhost:8080 in your browser to view the application in development.

Hope this helps!

0
02 Sep '14 at 15:57
source share



All Articles