HTML에서 AngularJS 응용 프로그램으로 정적 정보 전달

Question

내 서버 (.NET, PHP)의 정적 구성 데이터를 Angular 응용 프로그램에 전달하고 싶습니다. 나는 이것을 위해 웹 서비스를 호출하고 싶지 않다.

이 질문에 자바 스크립트 블록이 생성되었지만이를 원하지 않습니다. How do I pass a value from main html to partials?

이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

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

을 또는 더 나은 방법이있다 :

나는이의 NG-초기화 지시어를 사용하여 생각하고 있었어요?

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>