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

Question

我正在 Symfony2 Bundle 中开发 AngularJS 1.4 应用程序。 Symfony 提供“后端”（API）和Angular 前端（当然）。

我正在使用新路由器并坚持使用多个指南和最佳实践示例建议的组件驱动文件夹方法。但是因为我用 gulp 构建了我的 JavaScript 并且只包含完整的构建文件，所以 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 代码，gulp 将最终构建放入 src/myBundle/Resources/public/，然后在包含 [=38 的 Twig 模板中可用=]应用

我现在正在做的，基本上是将我的组件的模板放在它们所属的地方（对于仪表板示例来说是 src/myBundle/Resources/js/components/dashboard/），而是放在 src/myBundle/Resources/public/templates.[=18= 中]

我必须通过$componentLoaderProvider.setTemplateMapping()告诉路由器模板位于别处。

我有两个问题：

我可以用更优雅的方式解决这个模板位置问题吗？
我可以直接告诉路由器（在AppController中）模板在哪里吗？

Answer 1

基于 API 的架构最酷的一点是您可以将后端应用程序 (API) 与前端应用程序 (AngularJS 应用程序) 分离。

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

Symfony 应用程序遵循 Symfony Best Practices 并仅公开 REST API。它包含所有业务逻辑。它没有模板（你可以删除 Twig）。数据最好暴露在JSON.
AngularJS 应用程序依赖于您需要的所有前端工具（Gulp、Yeoman...）并使用了 API。它管理演示文稿并仅包含 "assets"（静态 index.html 文件、JavaScript 文件、CSS 样式表、图像...）。

API是双方的契约，可以分别进化。维护简单，耦合紧密。前端应用程序甚至可以直接托管在 CDN 上，例如 Amazon CloudFront 或 GitHub 页面以获得最佳性能。

我写了an article detailing this approach and presenting some tools I've built。它使用 Symfony 和 AngularJS.

如果您还想申请单件：

将 AngularJS 应用程序放在非 public 目录中，例如 app/frontend
配置 Gulp 脚本以在 web/
小心CSRF攻击（看看我的DunglasAngularCsrfBundle）

Answer 2

Kévin 提到的最佳方法是将前端和后端分开，即使您将后端更改为另一种技术，也无需更改前端。

还有 2 个 git 项目可以帮助您拥有更好的应用程序。

1) FOSJsRoutingBundle

https://github.com/FriendsOfSymfony/FOSJsRoutingBundle 这允许您在 JavaScript 代码

中使用 Symfony 路由

2) angular-架构形式

https://github.com/json-schema-form/angular-schema-form 这是一个动态表单生成器。它根据 JSON 模式创建并验证表单。

所以我所做的是在 Symfony 中创建一个 Angular 模式表单序列化程序，将 Symfony 表单转换为 Jason 模式，angular-schema-form 可以使用它来生成我的表单动态地。在这种情况下，我不需要在 html 中实现表单。即使我更改了 API，我也只需要为我的表单提供相同的 Jason 模式。

Answer 3

最好的方法是将您的 Angular 应用程序与 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';
            }

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

Best Practice with AngularJS template locations in Symfony 2 with the new Angular Router?

angularjs

symfony

angular-new-router