2012-09-30 125 views
12

我想用$文件抓住從輸入字段的服務器值。module.config中提供了哪些提供者/服務?

var base_url = $document[0].getElementById('BaseUrl').value; 

基礎URL用於抓取模板。

var base_url = $document[0].getElementById('BaseUrl').value; 

$routeProvider.when('/alert', { 
    controller: function() { }, 
    templateUrl: base_url + '/partials/instances.html' 
}); 

由於$文檔拋出一個錯誤,它是未知的我猜測它不可用在配置?有沒有辦法找出可用的和不可用的?我也可以使用$ http從服務器獲取數據,但這也不可用。

+0

看看這個答案︰http://stackoverflow.com/questions/17011616/using-a-relative-path-for-a-service-call-in-angularjs/17112017#17112017我認爲這是一個更好的解決方案。 –

回答

16

AngularJS模塊自舉在2個階段:

  • Configuration phase,其中僅提供者和常數可用。
  • Run phase其中服務是基於註冊的供應商實例化。在這個階段,常量仍然可用,但不是提供者。

的AngularJS documentation(部分:「加載模塊&相關性」)給出了洞察此:

模塊是配置的集合和運行的過程中得到 施加到應用程序塊引導過程。在其最簡單的 形成模塊是由兩種塊的集合:

配置塊 - 在供應商登記 和配置階段得到執行。只有提供者和常量可以注入 到配置塊中。這是爲了防止服務意外實例 他們已經完全配置之前。

運行塊 - 創建噴油器後得到 執行和使用的kickstart的 應用。只有實例和常量可注入運行 塊。這是爲了防止在 應用程序運行時進一步系統配置。

鑑於上述情況,您只能注入常量和提供者(在API文檔中標記爲Provider後綴)。這可能回答你的問題,但無助於解決您的模板加載的問題...

我不知道,如果你不能簡單地使用基本標記在HTML,然後簡單地使用相對路徑(該基地),而不指定絕對路徑?STH等(條件是所述基正確配置):

$routeProvider.when('/alert', { 
    controller: function() { }, 
    templateUrl: 'partials/instances.html' 
}); 
+0

我想我會走相對路徑的解決方案。有我不想使用的原因,但它可能是最好的解決方案。 – Pickels

16

雖然問題通常被回答,這裏有一個小加成靶向在問題中使用的具體的例子:

如何使用的角度恆定定義你的泛音的的baseUrl(或定義表示服務器值,使它們可用於配置其它常量):

// file: app.js 
'use strict'; 

/* App Module */ 
angular.module('myApp', []) 

    // define the templateBaseUrl 
    .constant('templateBaseUrl', 'themes/angular/partials/'); 

    // use it in configuration 
    .config(['$routeProvider','templateBaseUrl', function($routeProvider,templateBaseUrl) { 
    $routeProvider 
     .when('/posts', { 
     templateUrl : templateBaseUrl + 'post-list.html', 
     controller : PostListCtrl 
     }) 
     .when('/posts/:postId-:slug', { 
     templateUrl : templateBaseUrl + 'post-view.html', 
     controller : PostViewCtrl 
     }) 
     .when('/about', { 
     templateUrl : templateBaseUrl + 'about.html', 
     controller : AboutPageCtrl 
     }) 
     .when('/contact', { 
     templateUrl : templateBaseUrl + 'contact.html', 
     controller : ContactPageCtrl 
     }) 
     .otherwise({ 
     redirectTo: '/posts' 
     }) 
    ; 
    }]); 

在我看來,這有幾個好處:

  • 如果你移動你的意見,你只需要在一個單一的位置更新代碼
  • 如果你的諧音被深度嵌套項目佈局中,「templateBaseUrl」不會造成儘可能大的噪音整個路徑
  • 你甚至可以在相對路徑和絕對路徑之間切換
  • An answer to a similar question建議使用html的基本元素來刪除對每個templateUrl預先添加baseUrl的需要。但是這也影響了網站上的所有其他資源。僅配置模板的基本url沒有副作用

通常,我不使用此解決方案,並使用上面的硬編碼值。這只是一個例子,以最簡單的方式展示要做什麼。爲了能夠複製左右你的應用服務器上,定義值app.js之外,在你的索引文件並生成必要的pathes服務器端:

// file: index.php 
<?php 
    // only depends on your project layout 
    $angularPartialsBaseUrl = 'themes/angular/partials/'; 
    // this will change when you move the app around on the server 
    $themeBaseUrl = $_SERVER['REQUEST_URI'] . 'themes/angular'; 
?><!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
    <title>Yii Blog Demo</title> 

    <script> 
     var myNS = myNS || {}; 
     myNS.appConfig = myNS.appConfig || {}; 
     myNS.appConfig.templateBaseUrl = '<?php echo $angularPartialsBaseUrl; ?>'; 
    </script> 

    <script src="<?php echo $themeBaseUrl; ?>/js/vendor/angular/angular.js"></script> 
    <script src="<?php echo $themeBaseUrl; ?>/js/app.js"></script> 

</head> 

[...] 

而且在app.js:

// file: app.js 
'use strict'; 

/* App Module */ 
angular.module('myApp', []) 

    // define the templateBaseUrl using external appConfig 
    .constant('templateBaseUrl', myNS.appConfig.templateBaseUrl);