Вопрос по symfony – Angularjs на приложении Symfony2

74

Я работаю над SF2-приложением, которое использует большое количество javascript на внешнем интерфейсе.

SF2 предоставляет мне хороший способ создания хорошего REST-приложения, управления моей базой данных с помощью доктрины, использования веток для шаблонов и так далее, но я бы хотел использовать Angularjs.

Я знаю, что angularjs SF2 - это 2 разных фреймворка с разным подходом, но мне интересно, как лучше всего выполнить эту работу.

Это даже стоит того?

Если да, как вы думаете, что является более чистым и эффективным решением?

Может быть, использовать php вместо ветки для шаблонов, чтобы использовать фигурные скобки angularjs?

Ваш Ответ

15   ответов
3

пытаясь заставить Symfony и AngularJS работать вместе. Однако работая над этим, я узнал несколько вещей, которые могут вам помочь:

To separate the AngularJS expressions {{ variable }} from twig curly braces you have three alternatives :

а). Используйте кавычки вокруг выражений AngularJS{{ '{{ variable }}' }}

б). Окружите свой код AngularJS с{% verbatim %} your code {% endverbatim %}

с). Используйте AngularJSinterpolateProvider оказание услуг

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

Это может не сработать для вас, почему? Что вам нужно знать о $ http.post, так это то, что он не отправляет данные как & # x201C; Данные формы & # x201D; но как & # x201C; Запросить полезную нагрузку & # x201D ;, который является обычным способом передачи данных через HTTP POST. Проблема в том, что это & # x201C; нормальный способ & # x201D; не эквивалентно отправке формы, что вызывает проблемы при интерпретации данных с объектом запроса Symfony.

используйте это вместо:

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

Теперь ваша форма Symfony может получать данные из пользовательского запроса Angular.

Все вещи в стороне, я все еще не уверен в одном,whether to display your form using Symfony or AngularJS.

Надеюсь это поможет.

27

дословный:

{% verbatim %}
    <ul>
    {% for item in seq %}
        <li>{{ item }}</li>
    {% endfor %}
    </ul>
{% endverbatim %}

Все промежуточное не будет проанализировано Twig Engine и может быть использовано AngularJS.

Хотя я рекомендую изменить разделители AngularJS. В противном случае может быть трудно различить код Twig и AngularJS, когда вы смотрите на ваши шаблоны.

13

Я использовал следующий код для изменения разделителей AngularJS

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;

или Javascript:

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 тега body я могу использовать:

<ul>
{% for item in seq %}
    <li>{[{ item }]}</li>
{% endfor %}
</ul>

Я думаю, что это делает вещи чище и позволяет легко смешивать веточки и угловые метки. Кажется, это хорошо работает для меня.

11

Хорошим решением для этих двух усов, чтобы избежать путаницы, является директива на основе атрибутов, называемая ng-bind:<p ng-bind="yourText"></p> такой же как<p>{{yourText}}</p>

3

шаблон или вы можете изучить этот шаблон, и вы можете на его основе.

Это шаблонное приложение с защищенной связью через RestFul API между клиентской частью с AngularJS и серверной частью с Symfony2.

Другаяпроект следует проверить, является ли Aisel CMS с открытым исходным кодом для высоконагруженных проектов, основанных на Symfony2 и AngularJS

0

использование{@ variable @} в шаблонах. После создания шаблона просто замените{@ с{{ а также@} с}} с простымstr_replace функция. Этот путь чистый и намного быстрее, чем конкатенация строк и так далее.

8

используя Symfony и angularjs. Я использовал Symfony2 с FOSRestBundle для создания Restful API и Angularjs для создания внешнего интерфейса.

Сам по себе AngularJs не нужен каркас Symfony2 для создания приложения, если у него есть API для общения. Тем не менее, я нашел Symfony2 полезным в этих областях:

Translation in the template. the data in the API payload does not need translation in most cases. Using Symfony I18N support for the template makes perfect sense.

Loading of Option lists. Say you have a country list with 200+ options. You can build an API to populate a dynamic dropdown in angularjs, but as these options are static, you can simply build that list in twig.

Preloading data/content. You can preload template or JSON data in the hosting page if you like

Take advantage of the authentication feature of Symfony. You can used the same authenticated session to the API for the application, too. No need to use Oauth.

The Assetic bundle is very useful to urglyfy and minify bunches of Javascript files used by AngularJs

Тем не менее, я нашел следующие проблемы:

PHP session locking for multiple Ajax calls. Need a better way to free the php session by calling 'session_write_close()' or use a database for session. Where is the best place in Symfony to call that 'session_write_close' function so that we can free the session for more ajax calls as soon as possible ?

Reloading/Syncing loaded data Say you have a list of items (like ebay items) showing in a browser, you want to update that list in client's browser when the list was updated on the server side. You might need to poll the list periodically or use something like Firebase. Firebase is an overkill in most cases, polling is not nice looking to me, but what is the best way to achieve this ?

Пожалуйста, добавьте свои комментарии. Спасибо

For your second challenge, websocketis the way to go.Error: User Rate Limit Exceeded
-2

Вы можете просто избежать фигурных скобок, таких как:

Hello {{ '{{' }} name {{ '}}' }}

и он будет проанализирован в следующем HTML-коде:

Hello {{ name }}

Вы также можете попробовать использовать левые и правые фигурные скобки в HTML-кодировке, например:

&#123; name &#125;

Но я не уверен, что это поймет AngularJS lib :).

65

Я думаюSymfony2 может отлично работать сAngularJS, Доказательством является то, что я создаю API с одной стороны, используя Symfony, и веб-приложение с другой стороны с AnglularJS.

Более того, по некоторым причинам я создаю свои представления в своем веб-приложении сTwig, Я просто вставляю угловые фигурные скобки в веточку{% verbatim %} {% endverbatim %} заявление каждый раз, когда мне нужно использовать Angular в моих взглядах.

Error: User Rate Limit Exceededstackoverflow.com/questions/38389740/…
Error: User Rate Limit Exceeded
17

в моем случае, я решил разделить клиентский и серверный проекты, я использовал symfony2 в качестве серверной стороны, потому что это простота и удобство использования помимо других преимуществ, которые мне дают. С другой стороны, я создал простой HTML-проект с AngularJS, который мне пригодится, потому что я хочу создать мобильное приложение HTML5 с теми же файлами клиентов.

В этом случае, я думаю, что суть проблемы здесь заключается в процессе аутентификации и авторизации. Вы должны реализовать безопасный брандмауэр для работы в REST (например, WSSE:Symfony2: как создать собственный провайдер аутентификации) на стороне сервера.

И затем соответствующая реализация на стороне клиента (AngularJS), самый полезный ресурс, который я нашел: Github: witoldsz / угловой HTTP-аутентификация.

Если вам нужна более глубокая реализация с вашим проектом sf2, вы можете скомпилировать AngularJS, используя фильтры Assetic, и повысить производительность при загрузке страницы.

2

Теоретически, у вас будет только ваша индексная страница, отрисовываемая из Symfony, так что вам вообще не нужно использовать ветку. вам нужно только отрендерить первую страницу, а затем вступит в силу угловой каркас. Angularjs имеет собственный синтаксис и возможности шаблонов. Я не думаю, что есть необходимость смешивать эти два, так как вы можете полностью разделить обе платформы. Возможно, заставить ваш сервер отвечать файлом index.html (ваше угловое приложение) на yourdomain.com, и все из Symfony происходит из префикса / api, или что-то в этом роде. Представьте, что ваш проект WebApi - это один сервер, а angularjs - проект на другом. они будут говорить только через вызовы API, не нужно смешивать шаблоны вообще, на мой взгляд.

0

Я сталкивался с той же ситуацией, когда мне приходилось разрабатывать одностраничное приложение с использованием AngularJS поверх Symfony2.

Если вы можете разделить два приложения, идеально !!! Это создаст отличное разделение слоя Model и View. Если нет, как это было в случае с моим приложением, вы можете использовать AngularJS с Symfony2 и TWIG совершенно нормально.

Я использовал кавычки вокруг выражений AngularJS вроде -

{{ '{{someAngularJsExpression}}' }}

Требуется некоторое время, чтобы привыкнуть к этому, но когда вы это сделаете, вы не столкнетесь со многими проблемами. Symfony также позволяет использовать другие шаблоны, но я предпочитаю этого не делать.

Поэтому я советую использовать два разных приложения для AngularJS и Symfony. Если у вас нет ресурсов для этого, вы можете поступить так, как я. Не волнуйтесь, вы привыкнете к этому.

11

Хранить угловое приложение отдельно рекомендуется. Просто используйте Symfony в качестве API для извлечения / сохранения данных и в качестве поставщика безопасности.

Это позволило бы лучше разделить представление и уровень данных. В результате вы можете начать работать на стороне внешнего интерфейса, не думая пока о реализации бэкэнда. Вам просто нужно издеваться над вызовами API.

Error: User Rate Limit Exceeded
0

Ища в интернете, я наткнулся на разные решения. Вы можете, например, как сказано выше, изменить угловые символы. Однако я предпочел сделать его как можно более простым, просто попросив веточку вывести угловые символы:

{{ '{{entity.property}}' }}

http://louisracicot.com/blog/angularjs-and-symfony2/

0

Сегодня всем нужен бэкэнд Symfony с API и Angular / Vue Frontend - это хорошо, но таким образом мы теряем все способности Symfony во фронтэнде.

Я успешно использую angular с моими приложениями Symfony. Может быть, это не высокопроизводительная вещь, но это работает.

Несколько советов для вас:

1

читать о $ interpolateProvider

angular.module('myApp', [], function($interpolateProvider) {
            $interpolateProvider.startSymbol('{[{');
            $interpolateProvider.endSymbol('}]}');
  });

Таким образом, вы можете изменить {{}} на угловой для чего-то другого. Я использую {[{и}]}, так что это не будет мешать ветке

2

вторая лучшая вещь здесь https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html

Это соединяет маршрутизацию Symfony с js, так что все ваши угловые представления / вызовы ajax в js могут быть сгенерированы Symfony - это дает вам огромные возможности

Похожие вопросы