Я работаю над SF2-приложением, которое использует много javascript на передней панели.
SF2 предоставляет мне хороший способ создать приятное приложение REST, управлять моей базой данных с помощью доктрины, использовать ветку для шаблонов и т.д., но я бы хотел использовать Angularjs.
Я знаю, что angularjs SF2 - это две разные структуры с различным подходом, но мне интересно, какой лучший способ сделать эту работу.
Это даже стоит?
Если да, то, как вы думаете, является более чистым и эффективным решением?
Может ли использовать php вместо twig для шаблонов для использования фигурных скобок углового js?
Я думаю, что Symfony2
может отлично работать с AngularJS
. Доказательство. Я создаю API с одной стороны, используя Symfony, и веб-приложение с другой стороны с AnglularJS.
Кроме того, по некоторым причинам я создаю свои представления в своем веб-приложении с помощью Twig
. Я просто вставляю angular фигурные скобки в выражении twig {% verbatim %} {% endverbatim %}
каждый раз, когда мне нужно использовать angular в моих представлениях.
Начиная с Twig 1.12, исходный тег был переименован в verbatim:
{% verbatim %}
<ul>
{% for item in seq %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% endverbatim %}
Все промежуточные элементы не будут анализироваться движком Twig и могут использоваться AngularJS.
Хотя я бы рекомендовал изменить разделители AngularJS. В противном случае может быть трудно различить код Twig и AngularJS при просмотре ваших шаблонов.
Я сталкиваюсь с той же ситуацией, в моем случае, я решил разделить клиентские и серверные проекты, я использовал symfony2 как серверную, потому что это простота и удобство использования, помимо других преимуществ, которые приносят мне. С другой стороны, я создал простой HTML-проект с AngularJS, что полезно для меня, потому что я хочу создать мобильное приложение HTML5 с теми же файлами клиента.
В этом случае я думаю, что суть проблемы здесь заключается в процессе аутентификации и авторизации. Для работы в REST необходимо использовать безопасный брандмауэр (например, WSSE: Symfony2: как создать собственный поставщик аутентификации) на стороне сервера.
И затем соответствующая реализация на стороне клиента (AngularJS), самый полезный ресурс, который я нашел: Github: witoldsz/ angular -http-auth.
Если вам нужна более глубокая реализация с вашим проектом sf2, вы можете скомпилировать AngularJS с использованием фильтров Assetic и повысить производительность при загрузке страницы.
Я использовал следующий код для изменения делителей 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. Кажется, это хорошо работает для меня.
Более целесообразно сохранить отдельный раздел angular. Просто используйте Symfony как api для поиска/сохранения данных и поставщика безопасности.
Это позволит увеличить разделение представления и уровня данных. В результате вы можете начать работу с интерфейсной стороной, не задумываясь о реализации бэкэнд. Вам просто нужно высмеять вызовы api.
Хорошим решением для двух усов, чтобы избежать путаницы, является директива на основе атрибута ng-bind: <p ng-bind="yourText"></p>
совпадает с <p>{{yourText}}</p>
Я пытаюсь создать одностраничное приложение, используя 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 является чрезмерным, опрос не очень приятен для меня, но каков наилучший способ достичь этого?
Пожалуйста, добавьте комментарии. спасибо
websocket
- это путь. Я знаю, что прошло уже почти два года с тех пор, как вы получили сообщение, однако я хотел бы прокомментировать чью-либо будущую ссылку.
Я столкнулся с множеством проблем, которые пытались заставить Symfony и AngularJS работать вместе. Однако, работая над этим, я узнал несколько вещей, которые могут вам помочь:
{{ variable }}
от вершинных фигурных скобок, у вас есть три альтернативы:а). Используйте кавычки вокруг выражений AngularJS {{ '{{ variable }}' }}
б). Оборудуйте свой код AngularJS {% verbatim %} your code {% endverbatim %}
с). Используйте услугу AngularJS interpolateProvider
angular.module('myApp', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
$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'}
});
Если вы хотите узнать, является ли запрос AJAX-запросом в контроллере, мы обычно используем метод isXMLHttpRequest(). Проблема в том, что Angular не идентифицирует свои запросы как запросы XMLHttpRequest. Используйте это:
var app = angular.module('myModule', []);
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}]);
При создании форм вы можете отображать форму через AngularJS и разрешать Symfony Form обрабатывать запрос. Для этого вам необходимо отключить защиту CSRF:
public function setDefaultOptions(OptionsResolverInterface $resolver)
{
$resolver->setDefaults(array(
'data_class' => '...',
'csrf_protection' => false
));
}
Теперь ваша форма symfony может получать данные из пользовательского запроса Angular.
Все в стороне, я все еще не уверен в одном, , показывать ли свою форму с помощью Symfony или AngularJS.
Надеюсь, что это поможет.
Вы можете использовать этот шаблон, или вы можете изучить этот шаблон, и вы можете основываться на нем.
Является ли приложение шаблона с защищенной связью через интерфейс RestFul между клиентской частью с AngularJS и серверной частью с Symfony2.
Еще один проект, который вы должны проверить, это AISEL - это CMS с открытым исходным кодом для высокопроизводительных проектов на основе Symfony2 и AngularJS
В теории у вас будет только ваша индексная страница, получаемая из symfony, поэтому вам вообще не нужно использовать веточку. вам нужно только отобразить первую страницу, а затем принять angular. У Angularjs есть свой собственный синтаксис и возможности шаблонов. Я не думаю, что есть необходимость смешать эти два, так как вы можете полностью разделить оба фреймворка. Возможно, ответьте серверу на файл index.html(ваше приложение angular) на yourdomain.com, и все, что от symfony происходит из префикса /api, или что-то в этом роде. Представьте себе, что ваш проект WebApi - это один сервер и проект angularjs - с другой. они будут говорить только через вызовы api, не нужно смешивать шаблоны вообще, по-моему.
Используйте {@ variable @}
в шаблонах. После создания шаблона просто замените {@
на {{
и @}
на }}
с помощью простой функции str_replace
. Этот способ чист и намного быстрее, чем конкатенация строк и так далее.
Поиск в Интернете я столкнулся с различными решениями. Вы можете, например, как сказано ранее, изменить символы angular. Тем не менее, я предпочел максимально упростить его, просто произнеся ветку, чтобы вывести символы angular:
{{ '{{entity.property}}' }}
Вы можете просто избегать фигурных скобок, например:
Hello {{ '{{' }} name {{ '}}' }}
и он будет проанализирован в следующем HTML-коде:
Hello {{ name }}
Вы также можете использовать левый и правый фигурные скобки, кодированные кодировкой HTML, например:
{ name }
Но я не уверен, что это будет понятно AngularJS lib:).