12

我想使用 $document 从输入字段中获取服务器值。

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

由于 $document 抛出一个未知的错误，我猜测它在配置中不可用？有没有办法找出什么可用，什么不可用？我也可以使用 $http 从服务器获取数据，但这也不可用。

4

2 回答 2

16

AngularJS 模块分两个阶段进行引导：

  • Configuration phase只有提供者和常量可用。
  • Run phase其中服务基于注册的提供者进行实例化。在此阶段，常量仍然可用，但提供者不可用。

AngularJS文档（部分：“模块加载和依赖项”）对此进行了深入了解：

模块是在引导过程中应用于应用程序的配置和运行块的集合。该模块最简单的形式由两种块的集合组成：

配置块- 在提供者注册和配置阶段执行。只有提供者和常量可以注入到配置块中。这是为了防止在完全配置之前意外实例化服务。

运行块- 在创建注入器后执行并用于启动应用程序。只有实例和常量可以注入运行块。这是为了防止在应用程序运行时进行进一步的系统配置。

鉴于上述情况，您只能注入常量和提供程序（Provider在 API 文档中标有后缀）。这可能会回答您的问题，但无助于解决您的模板加载问题......

我想知道您是否不能简单地在 HTML 中使用 base 标记，然后简单地使用相对路径（到基础）而不指定绝对路径？有点像（前提是基础配置正确）：

$routeProvider.when('/alert', {
  controller: function () { },
  templateUrl: 'partials/instances.html'
});
于 2012-09-30T20:55:41.383 回答
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”不会像整个路径那样引起太多噪音
  • 您甚至可以在相对路径和绝对路径之间进行更改
  • 对类似问题的回答建议使用 html 的基本元素来消除在每个 templateUrl 前添加 baseUrl 的需要。但这也影响了网站上的所有其他资源。仅配置模板的基本 url 没有副作用

通常，我不使用带有上述硬编码值的解决方案。这只是一个示例，以最简单的方式显示要做什么。为了能够在您的服务器上复制您的应用程序，请在您的索引文件中定义 app.js 之外的值并在服务器端生成必要​​的路径：

// 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 );
于 2012-10-19T20:22:39.530 回答