symfony2 애플리케이션의 Angularjs
나는 프런트 엔드에서 많은 자바 스크립트를 사용하는 SF2 응용 프로그램을 개발 중입니다.
SF2는 멋진 REST 앱을 구축하고, 교리로 데이터베이스를 관리하고, 템플릿에 나뭇 가지를 사용하는 등의 좋은 방법을 제공하지만 Angularjs를 사용하고 싶습니다.
angularjs와 SF2는 접근 방식이 다른 두 가지 프레임 워크라는 것을 알고 있지만이 작업을 수행하는 가장 좋은 방법이 무엇인지 궁금합니다.
그만한 가치가 있습니까?
그렇다면 가장 깨끗하고 효율적인 솔루션이 무엇이라고 생각하십니까?
angularjs 중괄호를 사용하기 위해 템플릿에 나뭇 가지 대신 PHP를 사용할 수 있습니까?
나는 Symfony2완벽하게 AngularJS. 증거는 Symfony를 사용하여 한쪽에 API를 만들고 AnglularJS를 사용하여 다른쪽에 웹 앱을 만들고 있다는 것입니다.
또한 어떤 이유로 웹 앱에서 Twig. {% verbatim %} {% endverbatim %}내 뷰에서 Angular를 사용해야 할 때마다 twig 문 에 angular의 중괄호를 삽입하기 만하면 됩니다.
Twig 1.12부터 원시 태그의 이름이 그대로 변경되었습니다 .
{% verbatim %}
<ul>
{% for item in seq %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% endverbatim %}
그 사이의 모든 것은 Twig Engine에 의해 구문 분석되지 않으며 AngularJS에서 사용할 수 있습니다.
AngularJS 구분 기호를 변경하는 것이 좋습니다. 그렇지 않으면 템플릿을 볼 때 Twig와 AngularJS 코드를 구별하기 어려울 수 있습니다.
같은 상황에 직면했습니다. 제 경우에는 클라이언트와 서버 프로젝트를 분리하기로 결정했습니다. symfony2를 서버 측으로 사용했습니다. 단순성과 유용성 외에도 다른 이점이 있기 때문입니다. 다른 한편으로는 AngularJS로 간단한 HTML 프로젝트를 만들었는데, 이는 동일한 클라이언트 파일로 HTML5 모바일 앱을 만들고 싶기 때문에 유용합니다.
이 경우 문제의 핵심은 인증 및 권한 부여 프로세스라고 생각합니다. 서버 측 에서 REST (예 : WSSE : Symfony2 : 사용자 지정 인증 공급자를 만드는 방법 )에서 작업하기위한 보안 방화벽을 구현해야합니다 .
그리고 클라이언트 측 (AngularJS)의 해당 구현, 내가 찾은 가장 유용한 리소스 : Github : witoldsz / angular-http-auth .
sf2 프로젝트로 더 깊은 구현을 원하면 Assetic의 필터를 사용하여 AngularJS를 컴파일하고 페이지 로딩 성능을 높일 수 있습니다.
AngularJS delmiters를 변경하기 위해 다음 코드를 사용했습니다.
Coffeescript :
# Change the angular delimiters for twig compatability
# and load module with ngResource
WAFapp2 = angular.module("WAFapp2", ['ngResource'], ($interpolateProvider) ->
$interpolateProvider.startSymbol "{[{"
$interpolateProvider.endSymbol "}]}"
) var WAFapp2;
또는 자바 스크립트 :
var WAFapp2;
WAFapp2 = angular.module("WAFapp2", ['ngResource'], function($interpolateProvider) {
$interpolateProvider.startSymbol("{[{");
return $interpolateProvider.endSymbol("}]}");
});
그런 다음 내 레이아웃 상단에서 :
<!DOCTYPE html>
<html lang="en" data-ng-app="WAFapp2">
<head>
그런 다음 나중에 html의 본문 태그 섹션에서 다음을 사용할 수 있습니다.
<ul>
{% for item in seq %}
<li>{[{ item }]}</li>
{% endfor %}
</ul>
나는 이것이 물건을 깨끗하게 유지하고 나뭇 가지와 각진 태그를 쉽게 혼합 할 수 있다고 생각합니다. 이것은 나를 위해 잘 작동하는 것 같습니다.
혼란을 피하기 위해 두 콧수염에 대한 좋은 해결책은 ng-bind :라는 속성 기반 지시문 <p ng-bind="yourText"></p>입니다.<p>{{yourText}}</p>
각도 앱을 별도로 유지하는 것이 더 좋습니다. 데이터 검색 / 지속성을위한 API 및 보안 공급자로 Symfony를 사용하십시오.
이렇게하면보기와 데이터 영역을 더 많이 분리 할 수 있습니다. 결과적으로 아직 백엔드 구현에 대해 생각하지 않고 프런트 엔드 측에서 작업을 시작할 수 있습니다. API 호출을 모의하기 만하면됩니다.
저는 Symfony와 angularjs를 사용하여 단일 페이지 애플리케이션을 구축하려고했습니다. FOSRestBundle과 함께 Symfony2를 사용하여 Restful API를 빌드하고 Angularjs를 사용하여 프론트 엔드를 빌드했습니다.
AngularJs는 통신 할 API가있는 한 응용 프로그램을 빌드하기 위해 Symfony2 프레임 워크가 필요하지 않습니다. 그러나 다음 영역에서 Symfony2가 유용하다는 것을 알았습니다.
템플릿의 번역. API 페이로드의 데이터는 대부분의 경우 번역이 필요하지 않습니다. 템플릿에 Symfony I18N 지원을 사용하는 것은 완벽합니다.
옵션 목록로드. 200 개 이상의 옵션이있는 국가 목록이 있다고 가정 해 보겠습니다. angularjs에서 동적 드롭 다운을 채우는 API를 빌드 할 수 있지만 이러한 옵션은 정적이므로 해당 목록을 나뭇 가지로 간단히 빌드 할 수 있습니다.
데이터 / 콘텐츠를 미리로드합니다. 원하는 경우 호스팅 페이지에서 템플릿 또는 JSON 데이터를 미리로드 할 수 있습니다.
Symfony의 인증 기능을 활용하십시오. 응용 프로그램의 API에 대해서도 동일한 인증 세션을 사용할 수 있습니다. Oauth를 사용할 필요가 없습니다.
Assetic 번들은 AngularJs에서 사용하는 Javascript 파일 묶음을 urglyfy 및 축소하는 데 매우 유용합니다.
그러나 다음과 같은 문제를 발견했습니다.
여러 Ajax 호출을위한 PHP 세션 잠금. 'session_write_close ()'를 호출하여 PHP 세션을 해제하거나 세션에 데이터베이스를 사용하는 더 나은 방법이 필요합니다. 가능한 한 빨리 더 많은 ajax 호출을 위해 세션을 해제 할 수 있도록 Symfony에서 'session_write_close'함수를 호출하는 가장 좋은 위치는 어디입니까?
로드 된 데이터 다시로드 / 동기화 브라우저에 항목 목록 (예 : ebay 항목)이 표시되는 경우 목록이 서버 측에서 업데이트 될 때 클라이언트 브라우저에서 해당 목록을 업데이트하려고합니다. 주기적으로 목록을 폴링하거나 Firebase와 같은 것을 사용해야 할 수 있습니다. Firebase는 대부분의 경우 과잉이며 폴링은 나에게 좋지 않지만 이것을 달성하는 가장 좋은 방법은 무엇입니까?
의견을 추가하십시오. 감사
이 템플릿을 사용하거나이 템플릿 을 연구하고이를 기반으로 할 수 있습니다.
AngularJS를 사용하는 클라이언트 부분과 Symfony2를 사용하는 서버 부분간에 RestFul API를 통해 보안 통신을하는 템플릿 응용 프로그램입니다.
확인해야 할 또 다른 프로젝트 는 Aisel입니다. Symfony2 및 AngularJS를 기반으로하는 고부하 프로젝트 용 오픈 소스 CMS입니다.
Symfony와 AngularJS가 함께 작동하도록 노력하면서 많은 문제에 직면했습니다. 그러나 작업하는 동안 도움이 될 수있는 몇 가지 사항을 배웠습니다.
- AngularJS 표현식
{{ variable }}을 twig 중괄호에서 분리하려면 세 가지 대안이 있습니다.
ㅏ). AngularJS 표현식 주위에 따옴표 사용{{ '{{ variable }}' }}
비). AngularJS 코드를{% verbatim %} your code {% endverbatim %}
씨). AngularJS interpolateProvider서비스 사용
angular.module('myApp', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
- In the js file, twig can’t generate the URL for you. For this you can use "friendsofsymfony/jsrouting-bundle". After installing it you can use it as:
$http.get(Routing.generate('route_name', {'id':id}));
This may not work for you for submission, why? One thing you should know about the $http.post is that it dosen’t send the data as “Form Data” but as “Request Payload”, which is the normal way to transmit data via HTTP POST. The problem is that this “normal way” is not equivalent to a form submission, which causes problem in interpreting data with the Symfony Request object.
use this instead:
$http.put(url, $.param({foo: 'bar'}), {
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});
When you want to know if a request is an AJAX request within the controller, we usually use the isXMLHttpRequest() method. The problem is that Angular don’t identify its requests as an XMLHttpRequest requests. Use this:
var app = angular.module('myModule', []); app.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; }]);While creating forms you can choose to display the form through AngularJS and let Symfony Form to handle the request. For that you need to disable the CSRF protection:
public function setDefaultOptions(OptionsResolverInterface $resolver) { $resolver->setDefaults(array( 'data_class' => '...', 'csrf_protection' => false )); }
Now your symfony Form can receive data from a custom Angular request.
All the things aside, I am still not sure about one thing, whether to display your form using Symfony or AngularJS.
Hope this helps.
In theory, you would have only your index page being rendered from symfony, so you don't have to use twig at all. you only need to render first page and then angular framework takes over. Angularjs has its own template syntax and capabilities. I don't think there is a need to mix those two, as you can completely separate both frameworks.Perhaps, make your server respond with file index.html (your angular app) on yourdomain.com, and everything from symfony comes from /api prefix, or something like that. Just imagine your WebApi project is one server and angularjs project on the other. they would only talk through api calls, no need to mix templates at all, in my opinion.
Searching through the web, I came across different solutions. You can, for example as said before, change the angular symbols. However, I preferred to keep it the most simple as possible by simply telling twig to output the angular symbols:
{{ '{{entity.property}}' }}
http://louisracicot.com/blog/angularjs-and-symfony2/
Use {@ variable @} in templates. After template generated just replace {@ with {{ and @} with }} with simple str_replace function. This way is clean and much faster then strings concatination and so on.
I have come across the same situation where I had to develop a single page application using AngularJS on top of Symfony2.
If you can separate the two apps, perfect!!! It would create a great separation of the Model and View layer. If not, as was the case with my application, you can surely use AngularJS with Symfony2 and TWIG perfectly fine.
I used quotes around the AngularJS expressions like -
{{ '{{someAngularJsExpression}}' }}
It just takes some time to get used to it but when you do, you're not going to face many problems. Symfony also allows you to use other templating engines but I'd prefer not to.
So my advice is to either have two different applications for AngularJS and Symfony. If you don't have the resources to do so, you can do the way I did. Don't worry, you'll get used to it.
Today everyone want symfony backend with api and angular/vue frontend - it's nice but this way we're loosing all symfony ability in frontned.
I'm sucessfully using angular with my symfony apps. Maybe it's not high performance thing , but it works.
Some tips for you :
1
read about $interpolateProvider
angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
This way you can change {{ }} in angular for something else. I'm using {[{ and }]} , so it wont interfere with twig
2
second best thing here is https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html
This connect symfony routing with js , so all your angular views / or ajax calls in js can be generated by symfony - this gives you a huge possibilities
You can simply escaped curly brackets like:
Hello {{ '{{' }} name {{ '}}' }}
and it will be parsed to the next HTML code:
Hello {{ name }}
You also can try to use left and right curly braces HTML coded character set, for example:
{ name }
But I don't sure that it will be understand by AngularJS lib :).
참고URL : https://stackoverflow.com/questions/10834390/angularjs-on-a-symfony2-application
'developer tip' 카테고리의 다른 글
| 최대 절전 양방향 매핑으로 인한 json serializer의 순환 참조를 해결하는 방법은 무엇입니까? (0) | 2020.10.22 |
|---|---|
| 스 와이프를 활성화하여 TableView에서 셀을 삭제하는 방법은 무엇입니까? (0) | 2020.10.21 |
| memcached가 어떤 일을하고 있는지 어떻게 알 수 있습니까? (0) | 2020.10.21 |
| JVM에서 JIT 컴파일 된 코드를 보는 방법은 무엇입니까? (0) | 2020.10.21 |
| C #은 반환 형식 공분산을 지원합니까? (0) | 2020.10.21 |