我正在使用新的路由器并坚持使用几个指南和最佳实践示例建议的组件驱动文件夹方法.但是由于我使用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];
});
}
}());
我在src / myBundle / Resources / js /中编写我的Angular代码,然后将最终的Build放到src / myBundle / Resources / public / wich,然后在包含Angular应用程序的Twig模板中提供.
我现在正在做的,基本上是把我的组件的模板放在它们所属的位置(对于仪表板示例,这将是src / myBundle / Resources / js / components / dashboard /),而是放入src / myBundle / Resources / public /模板.
我必须通过$componentLoaderProvider.setTemplateMapping()告诉路由器该模板位于其他地方.
我有两个问题：
>我能以更优雅的方式解决这个模板位置问题吗？
>我可以直接告诉路由器(在AppController中)模板的位置吗？
解决方法
我建议为前端和后端创建两个单独的应用程序.每个应用程序都应该位于自己的Git存储库中,并最终可以托管在自己的服务器上：
> Symfony应用程序遵循Symfony Best Practices并仅公开REST API.它包含所有业务逻辑.它没有模板(你可以删除Twig).数据最好以JSON格式显示.
> AngularJS应用程序依赖于您想要的所有前端工具(Gulp,Yeoman ……)并使用API.它管理演示文稿并仅包含“资产”(静态index.html文件,JavaScript文件,CSS样式表,图像……).
API是双方之间的合同,它们可以单独发展.维护得到缓解,联轴器紧凑.前端应用甚至可以直接托管在CDN上,例如Amazon CloudFront或GitHub页面,以获得最佳性能.
我写了an article detailing this approach and presenting some tools I’ve built.它使用了Symfony和AngularJS.
如果您仍想要一个应用程序：
>将AngularJS应用程序放在非公共目录中,例如app / frontend
>配置Gulp脚本在web /中写入dist文件
>小心CSRF攻击(看看我的DunglasAngularCsrfBundle)
