javascript - Configure AngularJS routes to deep path using $window - Stack Overflow

admin管理员组

文章数量:1391964

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

Share Improve this question Follow edited Mar 19, 2013 at 21:35 BradGreens asked Mar 19, 2013 at 21:29 BradGreensBradGreens 1,37744 gold badges1515 silver badges3131 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.

本文标签： javascriptConfigure AngularJS routes to deep path using windowStack Overflow