Routing in subdirectory in Angular.js

url-routing angularjs
sssilver picture sssilver · Oct 12, 2012 · Viewed 14.3k times · Source

Is it possible to develop an Angular.js application in a way that would be abstracted from the the web directory path in which it will be deployed?

I am trying to put an Angular.js app in a web server subdirectory http://example.com/myproject/, but the router redirects me to the web server root -- http://example.com.

Below is my Angular.js app:

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

myproject.config(function($routeProvider, $locationProvider) {
  $routeProvider.
    when('/', {templateUrl: 'partials/index.html', controller: IndexCtrl}).
    otherwise({redirectTo: '/'});

  $locationProvider.html5Mode(true);
});



function IndexCtrl($scope, $location) {

}

Answer

Ben Lesh picture Ben Lesh · Oct 12, 2012

Try setting a <base href="/sudirectory"/> in your <head></head>. That's what I needed to do to get mine working, IIRC

Word of caution: This will mess with any anchor tags that have href="#", as well as act as the root for image srcs and the like.

Related questions

AngularJS dynamic routing

I currently have an AngularJS application with routing built in. It works and everything is ok. My app.js file looks like this: angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']). config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/…

Read More
AngularJS - Animate ng-view transitions

I have 2 html pages, welcome.html and login.html both of which are "inserted" into index.html dependending on the URL via an ngview attribute and router provider, as part of my AngularJS app. An example of this can be …

Read More
Difference between $state.transitionTo() and $state.go() in Angular ui-router

In AngularJS, I see sometimes we use $state.transitionTo() and sometimes we use $state.go(). Can anyone tell me how they differ and when one should be used over the other?

Read More