I have a Rails app which has some plex routing. My Angular application exists in a deep URL such as /quizzes/1

I was hoping to do this the Angular was by injecting $window into my routes configuration and then sniffing $window.location.pathName. This does not seem possible as the application throws an "Unknown provider: $window from myApp" at this stage.

Is there a best-practice way to handle this with Angular? The reason I would like to do this is to use HTML5 mode while the app lives in a deep directory.

Here's an example of what I was hoping for, /. I realize that I can use window.location.pathname at this point in the program if it's the only option.

HTML:

<div ng-app="myApp"></div>

JS:

var app = angular.module('myApp', [])

  app.config([

    '$window', '$routeProvider', '$locationProvider',

    function($window, $routeProvider, $locationProvider) {

        var path = $window.location.pathname

       // Coming Soon
       // $locationProvider.html5Mode(true)

      $routeProvider
        .when(path + '/start', {
            controller: 'splashScreenController',
            templateUrl: 'partials/splash-screen.html'
        })

        .when(path + '/question/:id', {
            controller: 'questionController',
            templateUrl: 'partials/question-loader.html'
        })

        .otherwise({
          redirectTo: path + '/start'
        })
  }])

I have a Rails app which has some plex routing. My Angular application exists in a deep URL such as /quizzes/1

I was hoping to do this the Angular was by injecting $window into my routes configuration and then sniffing $window.location.pathName. This does not seem possible as the application throws an "Unknown provider: $window from myApp" at this stage.

Is there a best-practice way to handle this with Angular? The reason I would like to do this is to use HTML5 mode while the app lives in a deep directory.

Here's an example of what I was hoping for, http://jsfiddle/UwhWN/. I realize that I can use window.location.pathname at this point in the program if it's the only option.

HTML:

<div ng-app="myApp"></div>

JS:

var app = angular.module('myApp', [])

  app.config([

    '$window', '$routeProvider', '$locationProvider',

    function($window, $routeProvider, $locationProvider) {

        var path = $window.location.pathname

       // Coming Soon
       // $locationProvider.html5Mode(true)

      $routeProvider
        .when(path + '/start', {
            controller: 'splashScreenController',
            templateUrl: 'partials/splash-screen.html'
        })

        .when(path + '/question/:id', {
            controller: 'questionController',
            templateUrl: 'partials/question-loader.html'
        })

        .otherwise({
          redirectTo: path + '/start'
        })
  }])

• javascript
• angularjs

1 Answer 1

Only constants and providers can be injected into config block. $window isn't injectable into your config block because $window is a service.

From Angular docs:

Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.

And, you don't need $window service there anyway. Just use <base> tag:

<base href="/quizzes/1/" />

and keep your routes relative to it.