So, we want to create an application and use Symfony as backend and Angular 1.x as frontend. Here come some questions:

  • Where to put angular files (folder/structure)?
  • Ho to automate frontend workflow?

In this article we use a standard Symfony project folder structure:

cgn-edit

To glue Symfony with Angular we will use Gulp. Next step we need to install it:

npm install --save gulp

and then some gulp additional modules:

npm install --save gulp-cli gulp-contcat gulp-sass gulp-watch

After everything will be installed we add a new gulpfile.js in the root of our project:

var gulp   = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var watch = require('gulp-watch');

gulp.task('sass', function(){
gulp.src('src/AppBundle/Resources/public/sass/style.scss')
.pipe(sass())
.pipe(gulp.dest('web/css'));
});

gulp.task('scripts', function(){
var scripts = [
// Dist
'node_modules/angular/angular.min.js',
// App
'src/AppBundle/Resources/public/js/app.js'
];

gulp.src(scripts)
.pipe(concat('app.js'))
.pipe(gulp.dest('web/js'));
});

gulp.task('watch', function() {
gulp.watch('src/AppBundle/Resources/public/js/**/*', ['scripts']);
gulp.watch('src/AppBundle/Resources/public/sass/**/*', ['sass']);
});

gulp.task('default', [
'sass',
'scripts'
]);

Our Angular app script will be placed in the AppBundle in src/AppBundle/Resources/public/js/app.js file:

// src/AppBundle/Resources/public/js/app.js
angular.module('app', []);

And that is all! Now our application skeleton is ready. Everything related to frontend should be placed in src/AppBundle/Resources/public/js/ folder. After running gulp all project js and css files will be put in the web folder, in the web/js/app.js and web/css/style.css files accordingly.

The last step is to include them in the main application layout app/Resources/views/base.html.twig:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body ng-app="dictionary">
{% block body %}
<div ng-view class="container">

</div>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('js/app.js') }}"></script>
{% endblock %}
</body>
</html>