5

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

我编写了我的 Angular 代码，src/myBundle/Resources/js/然后 gulp 将最终构建放入src/myBundle/Resources/public/其中，然后可以在包含 Angular 应用程序的 Twig 模板中使用它。

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

我必须通过$componentLoaderProvider.setTemplateMapping().

我有两个问题：

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

3 回答 3

8

基于 API 的架构最酷的地方在于，您可以将后端应用程序（API）与前端（AngularJS 应用程序）分离。

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

  • Symfony 应用程序遵循Symfony 最佳实践并且只公开一个 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）
于 2015-07-16T13:19:28.370 回答
2

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

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

1) FOSJsRoutingBundle

https://github.com/FriendsOfSymfony/FOSJsRoutingBundle 允许您在 JavaScript 代码中使用 Symfony 路由

2）角度模式形式

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

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

于 2016-03-30T23:05:26.650 回答
0

最好的方法是将您的 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';
            }
于 2017-09-05T19:16:36.763 回答