Лучшая практика с расположением шаблонов AngularJS в Symfony 2 с новым угловым маршрутизатором?

Question

Я разрабатываю приложение AngularJS 1.4 в комплекте Symfony2. Symfony предоставляет «бэкэнд» (API) и «Угловой интерфейс» (конечно).

Я использую новый маршрутизатор и придерживаюсь подхода, основанного на использовании компонентов, предложенного несколькими руководствами и примерами лучшей практики. Но так как я строю свой JS с глотком и включаю только полные файлы Build, есть проблемы с угловыми контроллерами, которые не находят своих шаблонов.

я покажу вам мое решение, которое я не люблю:

(function() { 
'use strict'; 
angular 
    .module('myModule', ['ngNewRouter', 'myModule.dashboard']) 
    .config(TemplateMapping) 
    .controller('AppController', AppController); 

/* @ngInject */ 
function AppController ($router) { 
    $router.config([ 
     { path: '/', redirectTo: '/dashboard' }, 
     { path: '/dashboard', component: 'dashboard' } 
    ]); 
} 

/* @ngInject */ 
function TemplateMapping($componentLoaderProvider) { 
    $componentLoaderProvider.setTemplateMapping(function (name) { 
     return { 
      'dashboard': '/bundles/mybundle/templates/dashboard/dashboard.html' 
     }[name]; 
    }); 
} 
}()); 

я пишу Угловой код в src/myBundle/Resources/js/ и глотке ставит окончательную сборку, чтобы src/myBundle/Resources/public/ Wich тогда доступен в Twig Шаблоне, который содержит угловое приложение ,

То, что я делаю прямо сейчас, в основном ставит шаблоны моих компонентов не там, где они принадлежат (это будет src/myBundle/Resources/js/components/dashboard/ для примера панели инструментов), а в src/myBundle/Resources/public/templates.

Я должен сообщить маршрутизатору, что шаблон находится в другом месте по адресу $componentLoaderProvider.setTemplateMapping().

У меня есть два вопроса:

1. Могу ли я решить эту проблему расположение шаблона более элегантный способ?
2. Могу я сказать маршрутизатору напрямую (в AppController), где находится шаблон?

Answer 1

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

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

• Применение Symfony следует Symfony Best Practices и выставляет только REST API. Он содержит всю бизнес-логику. У него нет шаблона (вы можете удалить Twig). Данные будут предпочтительно выставлены в JSON.
• Приложение AngularJS опирается на все необходимые инструменты интерфейса (Gulp, Yeoman ...) и использует API. Он управляет презентацией и содержит только «активы» (статический файл index.html, файлы JavaScript, стили CSS, изображения ...).

API - это контракт между двумя сторонами, и они могут развиваться отдельно. Техническое обслуживание облегчается, а муфта герметична. Приложение Frontend может быть размещено непосредственно на CDN, таком как Amazon CloudFront или GitHub для максимальной производительности.

Я написал an article detailing this approach and presenting some tools I've built. Он использует Symfony и AngularJS.

Если вы все еще хотите иметь одно приложение:

• поставить приложение AngularJS в непубличных каталогах, такие как app/frontend
• настроить скрипт Глотка писать DIST файлов в web/
• быть осторожны с атаками CSRF (посмотрите на мои DunglasAngularCsrfBundle)

Answer 2

Наилучший подход, о котором говорил Kévin, - это отделить ваш фронт -end и back-end таким образом, что даже если вы измените исходный код на другую технологию, вам не нужно менять свой интерфейс.

Есть также 2 проекта git, которые помогут вам получить более приятное приложение.

1) FOSJsRoutingBundle

https://github.com/FriendsOfSymfony/FOSJsRoutingBundle которые позволяют использовать маршрутизацию Symfony в коде JavaScript

2) угловая схема-форме

https://github.com/json-schema-form/angular-schema-form Который является динамичным генератор формы. Он создает и проверяет форму из схемы JSON.

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

Answer 3

Лучший подход - полностью отделить ваше угловое приложение от бэкэнда Symfony. Но если вы хотите использовать Angular в какой-то очень небольшой части вашего старого приложения, вы можете передать свой baseURL вашему компоненту, например. :

<yourComponent baseurl="{{ app.request.scheme ~ '://' ~ 
app.request.httpHost ~ app.request.basePath }}"></yourComponent> 

, а затем использовать его в функции templateUrl

templateUrl: function($attrs) { 
       return $attrs.baseurl + 'templats/yourComponent.template.html'; 
      }