AngularJS - 백엔드에서 프런트엔드로 값 전달
백엔드에서 Angular로 값을 전달하는 가장 좋은 방법은 무엇입니까?프런트 엔드에 JS?저는 Django를 사용하고 있고 템플릿은 필요한 값을 뱉어낼 수 있지만, 이러한 값을 Angular에 전달하는 베스트 프랙티스가 무엇인지 잘 모르겠습니다.JS.
블로그 투고와 그 코멘트를 생각해 보세요. 만약 Angular가 있다면게시 ID를 서비스에 전달하여 특정 블로그 게시물의 모든 코멘트를 가져오는 JS 서비스. 그리고 Django는 HTML 템플릿을 렌더링하고 게시 ID가 무엇인지 알고 있지만, 이 게시 ID를 Angular에 전달해야 합니다.JS 및 그 후 서비스에 접속합니다.
한 가지 아이디어는 그걸 숨겨서<input>이 입력을 모델에 할당합니다.별로 매력적이지 않아요.
다른 하나는 디렉티브를 가지고 이 디렉티브에 이 값을 전달하는 것입니다.이렇게 하면 이 Atribute의 값에 액세스 할 수 있습니다.
// Django (or any backend) is rendering {{ object.value }}
<div class="myDirective" data-object-id={{ object.value }}>
...
</div>
angular.module('myDirectives', []).
directive('myDirective', function() {
return {
restrict: 'C',
transclude: false,
link: function postLink($scope, $element, $attrs) {
// $attrs.objectId would have the value
}
}
});
이 두 가지 접근법은 괜찮아 보입니다.근데 좀 더 깔끔한 방법은 없을까?Angular를 따르는 접근법JS의 베스트 프랙티스?
뷰에서 소수의 모델 값만 초기화해야 하는 경우ng-initdirective는, http://docs.angularjs.org/api/ng.directive:ngInit 를 참조해 주세요.
이것을 사용하면, 간단하게 다음과 같이 쓸 수 있습니다.
<div ng-init="myModel=backend-generated-value-here">
...
</div>
위에서 설명한 바와 같이 Angular의 사용 사례에 대한 모범 사례를 찾는 데 어려움이 있을 수 있습니다.JS는 Web2.0 전체 클라이언트 측 웹 애플리케이션에 초점을 맞추고 있습니다.현시점에서는, 서버측의 컨텐츠 생성에 이상적이지 않습니다.Angular의 향후 버전에서 변경될 수 있습니다.JS.
필요한 것은, 소정의 「페이지」(뷰에의 백엔드 콜을 의미)의 초기치를 설정하는 것뿐인 경우는, 설명한 대로 실행할 수 있습니다.다음과 같이 javascript를 통해 글로벌 변수를 설정해야만 "깨끗하게" 만들 수 있습니다.
// Django (or any backend) is rendering {{ object.value }}
<script>
var backendVars = {
{{object.name}} : {{object.value}}
//and any other objects, manually parsed
}
</script>
부트스트래핑 프로세스에서 각도로 읽어주세요.
단, 각진JS는 자체 MVC이므로 전체 페이지를 새로고침하지 않고도 데이터 또는 백엔드 컨트롤러의 프로세스를 설정/취득할 수 있습니다.가장 깨끗한 방법은 웹 서비스를 만들어 필요한 데이터(예를 들어 JSON을 반환하는 뷰)를 반환하고 $http 또는 $resource 서비스를 통해 데이터를 가져오는 것입니다.
angular.module('myApp', []).
controller('MainCtrl', function($scope, $html) {
$html({
method: 'GET',
url: '/your/JSON/view.json'
}).
success(function(data, status){
$scope.yourData = data;
}).
error(function(data, status){
//whatever you need to do if the data is not available
});
}
또한 DOM 조작을 위한 데이터 및 로직을 디렉티브에 직접 배치하지 말고 컨트롤러에서 정보를 얻은 후 스코프 상속, 속성 또는 양방향 데이터 바인딩을 통해 디렉티브에 전달해야 합니다.도움이 됐으면 좋겠다.
적절한 방법은 서버가 값 공급자와 함께 스크립트를 렌더링한 후 종속성을 부여하여 앱에 삽입하는 것이라고 생각합니다.다음과 같은 경우:
index.syslog:
<html ng-app='myApp'>
<head>
<title>AngularJS Back to Front</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src='index.js'></script>
<?php
$globals = array(
'count' => 1,
'title' => 'Active users',
'users' => array(
'name' => 'john',
'age' => 21
)
);
$globalsJSON = json_encode( $globals )
?>
<script>
myApp.value('globals', <?=$globalsJSON;?>);
</script>
</head>
<body ng-controller="myController">
<div>{{title}}</div>
</body>
</html>
index.syslog:
var myApp = angular.module( 'myApp', [] );
myApp.controller( 'myController', [ 'globals', '$scope', function( globals, $scope ) {
// Copy globals to scope
for ( var property in globals ) {
$scope[ property ] = globals[ property ];
}
}]);
언급URL : https://stackoverflow.com/questions/13541881/angularjs-passing-values-from-backend-to-frontend
'programing' 카테고리의 다른 글
| CSS 또는 jQuery에서 단어 사이의 줄 바꿈과 구두점을 방지하려면 어떻게 해야 합니까? (0) | 2023.04.05 |
|---|---|
| 국가/스토어에서 레독스가 기능을 통해 물건을 얻는 방법은 무엇입니까? (0) | 2023.04.05 |
| WordPress 플러그인의 함수에서 CSV 파일을 다운로드하는 방법은 무엇입니까? (0) | 2023.04.05 |
| Oracle의 DATIFF 함수 (0) | 2023.04.05 |
| 반응 테스트 라이브러리 - 빈 div가 있는지 점검하십시오. (0) | 2023.04.05 |