Install the bundle the usual way:
<?php
// app/AppKernel.php
// ...
class AppKernel extends Kernel
{
public function registerBundles()
{
$bundles = array(
// ...
new Curiosity26\AngularMaterialBundle\Curiosity26AngularMaterialBundle(),
);
// ...
}
// ...
}Symfony 2.x
php app/console assetic:dumpSymfony 3.x
php bin/console assetic:dumpSymfony 2.x
php app/console assets:install --symlinkSymfony 3.x
php bin/console assets:install --symlink {% block javascripts %}
<!-- Wire-Up the Angular assets -->
<script src="{{ asset('bundles/curiosity26angularmaterial/components/angular/angular.min.js') }}"></script>
<script src="{{ asset('bundles/curiosity26angularmaterial/components/angular-animate/angular-animate.min.js') }}"></script>
<script src="{{ asset('bundles/curiosity26angularmaterial/components/angular-aria/angular-aria.min.js') }}"></script>
<script src="{{ asset('bundles/curiosity26angularmaterial/components/angular-messages/angular-messages.min.js') }}"></script>
<script src="{{ asset('bundles/curiosity26angularmaterial/components/angular-material/angular-material.min.js') }}"></script>
<!-- Wire-up the Symfony Form Angular Controller -->
<script src="{{ asset('bundles/curiosity26angularmaterial/js/mdform.js') }}"></script>
<!-- Wire-up the Symfony Angular Addons -->
<script src="{{ asset('bundles/curiosity26angularmaterial/js/mdaddons.js') }}"></script>
// ... The rest of your scripts here
{% endblock %} {% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/curiosity26angularmaterial/components/angular-material/angular-material.min.css') }}">
// ... Other stylesheets here
{% endblock %}Symfony 2.x
# Twig Configuration
twig:
# ...
form:
resources: ['@Curiosity26AngularMaterialBundle/Resources/Form/material_1_layout.html.twig']Symfony 3.x
# Twig Configuration
twig:
# ...
form_themes:
- '@Curiosity26AngularMaterialBundle/Resources/Form/material_1_layout.html.twig'Create an Angular app and include the symfony.mdForm as a dependency. This will also bring in the Angular, Material, Animate, Aria and Messages modules.
angular.module('myApp', ['symfony.mdForm'])
.controller('MainCtrl', function($scope) {
// ...
})
;If you want to use the Bundled Addons, include the addons module:
angular.module('myApp', ['symfony.mdForm', 'symfony.mdAddons'])
.controller('MainCtrl', function($scope) {
// ...
})
;You can connect you Angular app in the base template or any extended templates. How you configure your templates to work with your Angular application is up to you.
{# ::base.html.twig #}
<html lang="en" ng-app="{{ ngApp|default('myApp') }}">
<head>
<!-- ... -->
</head>
<body ng-controller="{{ ngController|default('MainCtrl') }}">
<!-- ... -->
</body>
</html>You can use Assetic to load Material Icons from the CDN.
assetic:
...
assets:
material_icons:
inputs:
- https://fonts.googleapis.com/icon?family=Material+Icons {% stylesheets output="style.min.css" "@material_icons" %}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}As I used Angular Material inside Symfony, I decided to make some helper directives to help with things like Toast Alerts and Dialogs.
The sf-alert directive is an element directive to display toast alerts. Alerts are automatically displayed when the page load completes.
<sf-alert sf-alert-action="Yea" sf-alert-parent="#wrapper">This is the message in the alert</sf-alert>| Attribute | Definition |
|---|---|
| sf-alert-action | The text as it appears on the action button |
| sf-alert-position | The position of the alert using any combination of 'top, right, bottom, left, end, start' |
| sf-alert-auto-wrap | Automatically wrap the contents of the Toast message. Defaults to true |
| sf-alert-capsule | Adds md-capsule to the Toast |
| sf-alert-hide-delay | The number of milliseconds the message displays before hiding the message. 0 disables auto-hiding and is the default value. |
| sf-alert-parent | The CSS selector of the element the Toast message will align to. Best to use an ID here, as the first item found will be used. |
The sf-dialog directive can be used as an attribute or a class. I've found this directive to be very useful.
When the directive is applied to an existing a or md-button element, the URL in the href or ng-href attribute are loaded
and rendered using the $mdDialog service.
The $http service is used to make the request call and load the response. The sf-dialog directive overrides the
$http service to pass the request header X-Requested-With: XMLHttpRequest in order to allow twig to use
{% app.request.isXmlHttpRequest() %}.
{# homepage.html.twig #}
<md-button ng-href="{{ path('add_object') }}" sf-dialog-link>Open Dialog</md-button> {# add_object.html.twig #}
{% extends app.request.isXmlHttpRequest() ? '::dialog.html.twig' : '::base.html.twig' %}
{% block title %}
Page Title
{% endblock %}
{% block body %}
...
{% endblock %} {# dialog.html.twig #}
<md-toolbar class="md-primary">
<div class="md-toolbar-tools">
<h2>{% block title %}{% endblock %}</h2>
<span flex></span>
<md-button ng-click="dialog.closeDialog()" class="md-icon-button" aria-label="Close">
<md-icon>close</md-icon>
</md-button>
</div>
</md-toolbar>
{% block body %}{% endblock %}| Attribute | Definition |
|---|---|
| href, ng-href | The URL to load in the dialog |
| sf-dialog-method | The HTTP Method used for the request |
| sf-dialog-data | Sets the data attribute for the $http service |
| sf-dialog-controller | Set the controller to be used for the dialog. A default controller is used which provides a method closeDialog that should be bound to a close button. The controller, default or custom, is aliased as 'dialog'. |
| sf-dialog-success | A callback triggered when $mdDialog.hide() is called. |
| sf-dialog-cancel | A callback triggered when $mdDialog.cancel() is called. |
| sf-dialog-error | A callback triggered when an error is reported the HTTP response with the returned $err object as the only parameter. Default behavior shows a Toast with the error message. |
| sf-dialog-fullscreen | An option to toggle whether the dialog should show in fullscreen or not. Defaults to false. |
| sf-dialog-has-backdrop | Whether there should be an opaque backdrop behind the dialog. Default true. |
| sf-dialog-click-outside-to-cancel | Whether the user can click outside the dialog to close it. Default false. |
| sf-dialog-disable-parent-scroll | Whether to disable scrolling while the dialog is open. Default true. |