使用新的Angular路由器在Symfony 2中使用AngularJS模板位置的最佳实践？

Question

我正在Symfony2 Bundle中开发AngularJS 1.4应用程序.Symfony提供"后端"(API)和Angular前端(当然).

我正在使用新的路由器并坚持使用几个指南和最佳实践示例建议的组件驱动文件夹方法.但是由于我使用gulp构建我的JS并且仅包含完整的Build-Files,因此Angular控制器无法找到其模板存在问题.

我告诉你我的解决方案,我不喜欢:

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

我编写了我的Angular代码,src/myBundle/Resources/js/然后将最终的Build放到最后的Build中,src/myBundle/Resources/public/然后在包含Angular应用程序的Twig模板中提供.

我现在正在做的,基本上是将我的组件的模板放在它们所属的位置(这将是src/myBundle/Resources/js/components/dashboard/仪表板示例),而是放入src/myBundle/Resources/public/templates.

我必须告诉路由器模板位于其他地方$componentLoaderProvider.setTemplateMapping().

我有两个问题:

1. 我能以更优雅的方式解决这个模板位置问题吗？
2. 我可以直接告诉路由器(在AppController)模板的位置吗？

Answer 1

基于API架构的酷炫之处在于,您可以从前端(AngularJS应用程序)中解除后端应用程序(API).

我建议为前端和后端创建两个单独的应用程序.每个应用程序都应该位于自己的Git存储库中,并最终可以托管在自己的服务器上:

• Symfony应用程序遵循Symfony Best Practices并仅公开REST API.它包含所有业务逻辑.它没有模板(你可以删除Twig).数据最好以JSON格式显示.
• AngularJS应用程序依赖于您想要的所有前端工具(Gulp,Yeoman ......)并使用API​​.它管理演示文稿并仅包含"资产"(静态index.html文件,JavaScript文件,CSS样式表,图像......).

API是双方之间的合同,它们可以单独发展.维护得到缓解,联轴器紧凑.前端应用甚至可以直接托管在CDN上,例如Amazon CloudFront或GitHub页面,以获得最佳性能.

我写了一篇文章,详细介绍了这种方法,并介绍了我构建的一些工具.它使用Symfony和AngularJS.

如果您仍想要一个应用程序:

• 将AngularJS应用程序放在非公共目录中,例如 app/frontend
• 配置Gulp脚本来编写dist文件 web/
• 小心CSRF攻击(看看我的DunglasAngularCsrfBundle)