使用$ window将AngularJS路由配置为深层路径

时间:2013-03-19 21:29:55

标签: javascript angularjs

我有一个Rails应用程序,它有一些复杂的路由。我的Angular应用程序存在于深层URL中,例如/ quizzes / 1

我希望这样做,Angular是通过在我的路由配置中注入$ window然后嗅探$ window.location.pathName。这似乎不可能,因为应用程序在此阶段抛出了“来自myApp的未知提供者:$窗口”。

使用Angular有一种最佳实践方法吗?我想这样做的原因是当应用程序位于深层目录中时使用HTML5模式。

以下是我希望的例子http://jsfiddle.net/UwhWN/。我意识到如果它是唯一的选择,我可以在程序的这一点使用window.location.pathname。

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'
        })
  }])

1 个答案:

答案 0 :(得分:5)

只能将常量和提供程序注入配置块。 $ window不能注入您的配置块,因为$ window是一项服务。

来自Angular docs

  

配置块 - 在提供商注册和配置阶段执行。只有提供程序和常量才能注入配置块。这是为了防止服务在完全配置之前意外实例化。

而且,无论如何你都不需要$ window服务。只需使用<base>代码:

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

并保持您的路线相对于它。