Question

我想将一些静态配置数据从我的服务器（.NET，PHP）传递给我的Angular应用程序。我不想为此调用Web服务。

在这个问题中会生成一个javascript块，但我不想要这个。 How do I pass a value from main html to partials?

最好的方法是什么？

我在考虑使用ng-init指令：

<div data-ng-app="MyApp" data-ng-init="foo='bar'">

还是有更好的方法吗？

Answer 1

我建议做的是在角度中使用constants。这是我在项目中使用过的一个例子（@ Url.Content部分是c＃，但我想你会得到这个想法）。

   <script>
        angular.module('App.ConfigurationSettings', [])            
            .constant('ApiBaseUrl','@Url.Content("~/api/")')
            .constant('WebBaseUrl','@Url.Content("~")');
    </script>

然后当我们在服务中实际使用这些常量时，它看起来像这样：

var app = angular.module('App.BrandService', ['App.ConfigurationSettings']);

app.factory("BrandService", function ($http, $q, ApiBaseUrl) {
    return {
        getBrand: function (brandId) {
            var deferred = $q.defer();
            var url = ApiBaseUrl + 'brands/' + brandId + '.json';
            return HttpGet($http, url, deferred);
        }, 
        getBrands: function () {
            var deferred = $q.defer();
            var url = ApiBaseUrl + 'brands.json';
            return HttpGet($http, url, deferred);
        }
    };
});

Answer 2

通常，静态信息是可配置的，并且与某些服务相关。如果是这样，我会创建一个提供程序（它只是一个专门的服务）并在配置函数中配置它。

Here is the Angular documentation on Providers

创建提供商

myApp.provider('tooltip', function () {
    var version;
    var author;

    this.setVersion= function(value) {
        version = value;
    };
    this.setAuthor = function(value) {
        author = value;
    };

    this.$get = function (/* injectibles go here */) {
        return {
             version: version,
             author: author,
             etc...
        };
    };

}）;

配置提供商

在配置函数中注入提供程序时，请确保附加“提供者”：

myApp.config(function(tooltipProvider) {

     tooltipProvider.setVersion('1.0');
     tooltipProvider.setAuthor('John Smith');

     // more configuration of static data
});

使用提供商

在您需要的位置注入提供程序，并使用您的静态数据。在这里，我们将静态数据绑定到范围，以便我们可以在视图中显示它。

 // JS
 app.controller('ctrl', function($scope, tooltip) {
      $scope.version = tooltip.version;
      $scope.author = tooltip.author;
 });

 // HTML
 <div ng-controller='ctrl'>
      Tooltip Plugin: <br />
      Version: {{ version }} <br />
      Author: {{ author }} <br />
 </div>

将静态信息从html传递到AngularJS应用程序

2 个答案: