Angularjs на приложении Symfony2

76

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

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

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

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

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

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

Теги:

13 ответов

66

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

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

Поделиться
  • 9
    Вы также можете изменить теги интерполяции angularjs для своего приложения
  • 0
    @intrepion Как заставить директивы AngularJS работать с полями Symfony FormType, например. CollectionType? У меня есть проблема stackoverflow.com/questions/38389740/…
28

Начиная с Twig 1.12, исходный тег был переименован в verbatim:

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

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

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

Поделиться
17

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

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

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

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

Поделиться
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>

а затем в разделе тега body html я могу использовать:

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

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

Поделиться
11

Более целесообразно сохранить отдельный раздел angular. Просто используйте Symfony как api для поиска/сохранения данных и поставщика безопасности.

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

Поделиться
  • 0
    ^ - это. Вы оказываете себе медвежью услугу, смешивая нг с Twig. Если вы правильно сделаете свой API, вы можете извлекать и убирать пользовательский интерфейс всякий раз, когда считаете нужным, и не заботиться о бизнес-логике. В результате тестирование становится проще.
11

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

Поделиться
8

Я пытаюсь создать одностраничное приложение, используя Symfony и angularjs. Я использовал Symfony2 с FOSRestBundle для создания Restful API и Angularjs для создания интерфейса.

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

  • Перевод в шаблоне. в большинстве случаев данные в полезной нагрузке API не нуждаются в переводе. Использование поддержки Symfony I18N для шаблона имеет смысл.

  • Загрузка списков опций. Скажем, у вас есть список стран с более чем 200 вариантами. Вы можете создать API для заполнения динамического раскрывающегося списка в angularjs, но поскольку эти параметры являются статичными, вы можете просто создать этот список в ветке.

  • Предварительная загрузка данных/содержимого. Вы можете предварительно загрузить шаблон или данные JSON на странице хостинга, если вам нравится

  • Воспользуйтесь функцией аутентификации Symfony. Вы также можете использовать тот же аутентифицированный сеанс для API для приложения. Нет необходимости использовать Oauth.

  • Assetic bundle очень полезен для безотлагательного и минимизации пучков файлов Javascript, используемых AngularJs

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

  • Блокировка сеанса PHP для нескольких вызовов Ajax. Нужен лучший способ освободить php-сессию, вызвав "session_write_close()" или использовать базу данных для сеанса. Где лучшее место в Symfony для вызова этой функции session_write_close, чтобы мы могли как можно скорее освободить сеанс для более вызовов ajax?

  • Перезагрузка/синхронизация загруженных данных Скажем, у вас есть список элементов (например, ebay items), отображаемых в браузере, вы хотите обновить этот список в браузере клиента, когда список был обновлен на стороне сервера. Возможно, вам придется периодически опросить список или использовать что-то вроде Firebase. В большинстве случаев Firebase является чрезмерным, опрос не очень приятен для меня, но каков наилучший способ достичь этого?

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

Поделиться
  • 2
    Для вашего второго вызова websocket - это путь. Я знаю, что прошло уже почти два года с тех пор, как вы получили сообщение, однако я хотел бы прокомментировать чью-либо будущую ссылку.
3

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

  • Чтобы отделить выражения AngularJS {{ variable }} от вершинных фигурных скобок, у вас есть три альтернативы:

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

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

с). Используйте услугу AngularJS interpolateProvider

angular.module('myApp', []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
  1. В js файле, твист не может создать URL-адрес для вас. Для этого вы можете использовать "friendsofsymfony/jsrouting-bundle". После его установки вы можете использовать его как: $http.get(Routing.generate('route_name', {'id':id}));

Это может не работать для вас, почему? Одна вещь, которую вы должны знать о $http.post, заключается в том, что она доцент посылает данные как "данные формы", а как "Request Payload", что является обычным способом передачи данных через HTTP POST. Проблема в том, что этот "нормальный путь" не эквивалентен представлению формы, что вызывает проблему при интерпретации данных с объектом Symfony Request.

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

$http.put(url, $.param({foo: 'bar'}), {
     headers: {'Content-Type': 'application/x-www-form-urlencoded'}
 });

  1. Если вы хотите узнать, является ли запрос AJAX-запросом в контроллере, мы обычно используем метод isXMLHttpRequest(). Проблема в том, что Angular не идентифицирует свои запросы как запросы XMLHttpRequest. Используйте это:

    var app = angular.module('myModule', []); app.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; }]);

  2. При создании форм вы можете отображать форму через AngularJS и разрешать Symfony Form обрабатывать запрос. Для этого вам необходимо отключить защиту CSRF:

    public function setDefaultOptions(OptionsResolverInterface $resolver) { $resolver->setDefaults(array( 'data_class' => '...', 'csrf_protection' => false )); }

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

Все в стороне, я все еще не уверен в одном, , показывать ли свою форму с помощью Symfony или AngularJS.

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

Поделиться
3

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

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

Еще один проект, который вы должны проверить, это AISEL - это CMS с открытым исходным кодом для высокопроизводительных проектов на основе Symfony2 и AngularJS

Поделиться
2

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

Поделиться
0

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

Поделиться
0

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

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

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

Поделиться
-1

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

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

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

Hello {{ name }}

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

&#123; name &#125;

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню