配置使用$窗口AngularJS航线深路 [英] Configure AngularJS routes to deep path using $window

问题描述

我有有一些复杂的路由一个Rails应用程序。我的角应用在一个很深的URL存在，如/测验/ 1

我希望能做到这一点的角度是通过注射$窗口，进入我的路由配置，然后嗅探$ window.location.pathName。这似乎并不可能为应用程序将引发未知供应商：从对myApp $窗口。在这个阶段

是否有一个最佳实践的方式与角度来处理呢？我想这样做的原因是使用HTML5模式，而应用程序住在一个深目录。

下面是我希望的， http://jsfiddle.net/UwhWN/ 的一个例子。我知道我可以在程序中在这一点上使用window.location.pathname如果它是唯一的选择。

HTML

 ＆LT; D​​IV NG-应用=对myApp＆GT;＆LT; / DIV＆GT;
 

JS：

  VAR应用= angular.module（'对myApp'，[]）  的app.config（[    '$窗口'，'$ routeProvider'，'$ locationProvider'，    功能（$窗口，$ routeProvider，$ locationProvider）{        VAR PATH = $ window.location.pathname       // 快来了
       // $ locationProvider.html5Mode（真）      $ routeProvider
        。当（路径+'/开始'，{
            控制器：'sp​​lashScreenController'，
            templateUrl：'谐音/飞溅screen.html
        }）        。当（路径+'/问题/：身份证'，{
            控制器：'questionController'，
            templateUrl：'谐音/问题 -  loader.html
        }）        。除此以外（{
          redirectTo：路径+'/开始'
        }）
  }]）
 

解决方案

只有常量和提供者可以注入到配置块。 $窗口不可注入到配置块，因为$窗口是一个服务。

文档：

  

配置块 - 获得在供应商登记和配置阶段执行。只有供应商和常量可以被注入到配置块。这是prevent服务的意外实例，他们已经完全配置了。

和，你不需要有$窗口服务反正。只需使用＆LT;碱基GT; 标签：

 ＆LT;基本href =/测验/ 1 //＆GT;
 

和保持你的路由相对于它。

I have a Rails app which has some complex 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.net/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'
        })
  }])

解决方案

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.

这篇关于配置使用$窗口AngularJS航线深路的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！