3

Symfony Flex、Webpack、およびAngularJSでFOSJsRoutingBundleを動作させることができません。

私はこのバンドルを Symfony 3 で AngularJS と長い間使用してきましたが、問題はありませんでしたが、Symfony Flex に webpack が導入されたことで、セットアップがより複雑になりました。残念ながら、FOSJsRoutingBundle バージョン 2.2 のドキュメントは明確ではありません。

このバンドルの現在のドキュメントは、こちらで確認できます。

FOSJsRoutingBundleを使用して、Angular HTTP リクエストが絶対 URL ではなく生成されたルートを使用できるようにしています。

問題

composer で文書化されているように、このバンドルをセットアップしました。次に、ルートは にある json ファイルにダンプされますcode/assets/fos_js_routes.json。このファイルで生成されたルートは有効であり、期待どおりのものです。

私は Angular を使用しているので、Routing の最初に必要な宣言を別のファイルで行い、すべての Angular コントローラーがRouting.これらのファイルでさらに作業を行うことなく を使用できるようにします。

FOS セットアップ ファイル /code/assets/js/fos_js_router.js(次のドキュメント)

const routes = require('../../assets/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';

Routing.setRoutingData(routes);

サンプル Angular ファイル /code/assets/js/apps/default/controller/test.js

(function () {

    'use strict';

    angular.module('test')
    .controller(
        'TestCtrl',
        ['$scope', '$http',
            function ($scope, $http) {

                let url = Routing.generate('test_route_name');
             }
         ])
});

Webpack 構成

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .addEntry('app_fos_router', [
        './assets/js/fos_js_router.js'
    ])
    .addEntry('app_angular', [
        './assets/js/apps/default/app.js', // angular app setup
        './assets/js/apps/default/routes.js', // angular routes setup
        './assets/js/apps/default/controller/test.js' // angular where Routing is needed
    ])
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
;

module.exports = Encore.getWebpackConfig();

フロントエンド小枝テンプレート

{% extends 'base.html.twig' %}

{% block title %}Test{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
    {{ encore_entry_script_tags('app_fos_router') }}
    {{ encore_entry_script_tags('app_angular') }}
{% endblock %}

{% block body %}
    <div ng-app="test" ui-view="content"></div>
{% endblock %}

エラー

上記のセットアップからtest.js: ReferenceError: Routing is not defined at、AngularJS ファイルを取得します。

let url = Routing.generate('test_route_name');AngularJS ファイルで利用できるようにするには、何を別の方法で行う必要がありますか?

4

2 に答える 2

1

これを機能させるための簡単な修正：

const routes = require('../../assets/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';

Routing.setRoutingData(routes);
window.Routing = Routing;
于 2019-01-05T20:48:01.387 に答える