将AngularJS与Symfony2(Routing + Twig)混合使用或者更好地使用另一个JS-Framework？

Question

将AngularJS与Symfony2路由和树枝混合是否可能并且"干净"？

Symfony应该处理一般路由,因此通过单击菜单链接到站点重新加载.但是使用AngularJS + AJAX,评论,评级和合作等部分应该更有用,更现代.

这是实现这些事情的一种干净方式吗？我认为它也可以用jQuery和没有AngularJS或其他JS-Framework解决？

Answer 1

我正在维护大约10个用Symfony2和angular编写的项目.任何人,随时编辑这篇文章并改进它.

1. 我没有使用Symfony assetic功能.相反,我正在使用gulp.以下是我的gulp.js档案.它使用Babel.js将es6转换为es5,然后将所有文件拆分为一个,并放入web目录.

var gulp    = require('gulp'),
    babel   = require("gulp-babel"),
    concat  = require('gulp-concat'),
    clean   = require('gulp-clean'),
    uglify  = require('gulp-uglify');

gulp.task('clean', function () {
    return gulp.src('src/MainBundle/Resources/public/js/compiled', {read: false})
        .pipe(clean());
});

gulp.task('babel', ['clean'], function () {
    return gulp.src(["src/MainBundle/Resources/public/js/angular/app.js", "src/MainBundle/Resources/public/js/angular/**/*.js"])
        .pipe(babel())
        .pipe(gulp.dest("src/MainBundle/Resources/public/js/compiled"));
});

gulp.task('merge', ['babel'], function () {
    return gulp.src([
        'src/MainBundle/Resources/public/js/compiled/**/*.js'
    ])
        .pipe(concat('angular-compiled.js'))
        .pipe(gulp.dest('web/js/compiled'));
});

gulp.task('compress', ['merge'], function () {
    return gulp.src('web/js/compiled/angular-compiled.js')
        .pipe(uglify())
        .pipe(gulp.dest('web/js/compiled'));
});

gulp.task("default", ['merge']);

2. 所有角度文件都放在src/MainBundle/Resources/public/js/angular目录中并编译成一个.js文件,因此我不必将每个.js文件都包含在每个.twig文件中
3. 在app/Resources/views/base.html.twig档案中我有

<script>
    angular
        .module('configuration', [])
        .constant('BASE_END_POINT', '{{ app.request.baseUrl }}')
        .constant('USER', '{{ app.user || default() }}');
</script>

BASE_END_POINT是app base url来制作API cals.这类似于将数据从Symfony传递给Angular的代理.在body我放置ng-app.只是为了防止在每个twig文件中包含它.

4. 在src/MainBundle/Resources/public/js/angular我有小基角配置:

    //app.js
    (function () {
        'use strict';

        var app = angular.module('app', [
            'configuration'
        ]);

        app.config(['$interpolateProvider', function ($interpolateProvider) {
            $interpolateProvider.startSymbol('[[');
            $interpolateProvider.endSymbol(']]');
        }]);

    }());

哪个configuration是我的常量来自base.html.twig的模块.$interpolateProvider将默认角度括号更改{{}}为[[]],以防止树枝和角度冲突.

5. 在src/MainBundle/Resources/public/js/angular目录中我总是保持以下结构:

每个段都有新目录,其中包含:

• 厂
• 调节器
• 服务

• 模型等..

  6. 在控制器中,我总是与twig文件通信.例如,这是控制器:

(function () {
    angular
        .module('ml')
        .controller('WineCtrl', WineCtrl);

    WineCtrl.$inject = ['$scope', 'WineFactory'];

    function WineCtrl($scope, WineFactory) {
        var vm = this;
        vm.send = (selected) => {
            WineFactory.send(selected);
        };

    }
}());

7. WineFactory.send(selected);我在这里向工厂发送一些数据.从工厂到Symfony2 API

angular
    .module('ml')
    .factory('WineFactory', WineFactory);

WineFactory.$inject = ['$http', 'BASE_END_POINT'];

function WineFactory($http, BASE_END_POINT) {
    var self = this;

    self.send = function (selected) {
        return $http.post(BASE_END_POINT + "/wines", {payload: selected})
            .then((response) => console.info(response));
    };

    return self;
}

8. Symfony路由看起来像这样:

// VIEWS

wine.view:
    path:     /wine
    defaults: { _controller: MainBundle:Default:wine }

// API

api.send.wine:
    path:     /wines
    defaults: { _controller: MainBundle:Wine:send }
    methods:  [POST]

9. 未完待续

检查我的github开源项目,你可能会发现一些有趣的东西https://github.com/ssuperczynski/symfony2-azure-ml