curiosity26/angular-material-bundle

A bundle to integrate Angular Material to Symfony's Forms and Asset Management

Maintainers

Details

github.com/curiosity26/angular-material-bundle

Source

Issues

Installs: 958

Dependents: 0

Suggesters: 0

Security: 0

Stars: 2

Watchers: 2

Forks: 0

Open Issues: 3

Language:CSS

v0.2.5 2017-04-02 22:34 UTC

Requires

Requires (Dev)

MIT d9530f920aa2a5be3a47b37e60ba88ad6ede8f98

  • Alex Boyce <curiosity26.woop@gmail.com>

This package is auto-updated.

Last update: 2024-12-11 15:23:46 UTC

README

Installation

Install the bundle the usual way:

    <?php
    // app/AppKernel.php

    // ...
    class AppKernel extends Kernel
    {
        public function registerBundles()
        {
            $bundles = array(
                // ...

                new Curiosity26\AngularMaterialBundle\Curiosity26AngularMaterialBundle(),
            );

            // ...
        }

        // ...
    }

Dump The Assets

Symfony 2.x

    php app/console assetic:dump

Symfony 3.x

    php bin/console assetic:dump

Install the Assets

Symfony 2.x

    php app/console assets:install --symlink

Symfony 3.x

    php bin/console assets:install --symlink

Wire-Up JavaScript

    {% 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 %}

Wire-Up Material Stylesheets

    {% block stylesheets %}
        <link rel="stylesheet" type="text/css" href="{{ asset('bundles/curiosity26angularmaterial/components/angular-material/angular-material.min.css') }}">
        // ... Other stylesheets here
    {% endblock %}

Wire-Up the Form Template

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 Your Angular App

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) {
            // ...
        })
    ;

Connect Your App and Controllers in Templates

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>

Material Icons

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 %}

Bundled Addons

As I used Angular Material inside Symfony, I decided to make some helper directives to help with things like Toast Alerts and Dialogs.

sf-alert

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>

Attributes

sf-dialog-link

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 %}

Attributes