包简介

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

README 文档

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

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.

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

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.

curiosity26/angular-material-bundle 适用场景与选型建议

curiosity26/angular-material-bundle 是一款基于 CSS 开发的 Composer 扩展包，目前已累计 960 次下载、GitHub Stars 达 2，最近一次更新时间为 2016 年 09 月 14 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 curiosity26/angular-material-bundle 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 curiosity26/angular-material-bundle 我们能提供哪些服务？

定制开发 / 二次开发

基于 curiosity26/angular-material-bundle 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

curiosity26/angular-material-bundle

包简介

README 文档

README

Installation

Dump The Assets

Install the Assets

Wire-Up JavaScript

Wire-Up Material Stylesheets

Wire-Up the Form Template

Create Your Angular App

Connect Your App and Controllers in Templates

Material Icons

Bundled Addons

sf-alert

Attributes

sf-dialog-link

Attributes

curiosity26/angular-material-bundle 适用场景与选型建议

统计信息

GitHub 信息

其他信息