curiosity26/angular-material-bundle

用于集成Angular Material到Symfony表单和资产管理的一个包

维护者

详细信息

github.com/curiosity26/angular-material-bundle

源代码

问题

安装: 956

依赖者: 0

建议者: 0

安全: 0

星级: 2

关注者: 2

分支: 0

开放问题: 3

语言：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-09-11 14:47:50 UTC

README

安装

按照常规方式安装包

    <?php
    // app/AppKernel.php

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

                new Curiosity26\AngularMaterialBundle\Curiosity26AngularMaterialBundle(),
            );

            // ...
        }

        // ...
    }

导出资源

Symfony 2.x

    php app/console assetic:dump

Symfony 3.x

    php bin/console assetic:dump

安装资源

Symfony 2.x

    php app/console assets:install --symlink

Symfony 3.x

    php bin/console assets:install --symlink

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

连接Material样式表

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

创建您的Angular应用

创建一个Angular应用，并将symfony.mdForm作为依赖项。这也会引入Angular、Material、Animate、Aria和Messages模块。

    angular.module('myApp', ['symfony.mdForm'])
        .controller('MainCtrl', function($scope) {
            // ...
        })
    ;

如果您想使用捆绑插件，请包含插件模块

    angular.module('myApp', ['symfony.mdForm', 'symfony.mdAddons'])
        .controller('MainCtrl', function($scope) {
            // ...
        })
    ;

在模板中连接您的应用和控制器

您可以在基础模板或任何扩展模板中连接您的Angular应用。如何配置您的模板以与您的Angular应用协同工作由您自己决定。

    {# ::base.html.twig #}
    <html lang="en" ng-app="{{ ngApp|default('myApp') }}">
        <head>
            <!-- ... -->
        </head>
        <body ng-controller="{{ ngController|default('MainCtrl') }}">
            <!-- ... -->
        </body>
    </html>

Material图标

您可以使用Assetic从CDN加载Material图标。

assetic:
    ...
    assets:
        material_icons:
            inputs:
                - https://fonts.googleapis.ac.cn/icon?family=Material+Icons
    {% stylesheets output="style.min.css" "@material_icons" %}
        <link rel="stylesheet" href="{{ asset_url }}">
    {% endstylesheets %}

捆绑插件

由于我在Symfony中使用Angular Material，我决定创建一些辅助指令来帮助处理像Toast警告和对话框这样的功能。

sf-alert

sf-alert指令是一个用于显示toast警告的元素指令。当页面加载完成时，警告会自动显示。

    <sf-alert sf-alert-action="Yea" sf-alert-parent="#wrapper">This is the message in the alert</sf-alert>

属性

sf-dialog-link

sf-dialog指令可以用作属性或类。我发现这个指令非常有用。

当该指令应用于现有的a或md-button元素时，href或ng-href属性中的URL将通过$mdDialog服务加载和渲染。

使用$http服务进行请求调用并加载响应。sf-dialog指令覆盖了$http服务，以传递请求头X-Requested-With: XMLHttpRequest，以便允许twig使用{% 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 %}

属性