Download the PHP package curiosity26/angular-material-bundle without Composer
On this page you can find all versions of the php package curiosity26/angular-material-bundle. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download curiosity26/angular-material-bundle
More information about curiosity26/angular-material-bundle
Files in curiosity26/angular-material-bundle
Package angular-material-bundle
Short Description A bundle to integrate Angular Material to Symfony's Forms and Asset Management
License MIT
Informations about the package angular-material-bundle
Angular Material Bundle
Installation
Install the bundle the usual way:
`
Dump The Assets
Symfony 2.x
Symfony 3.x
Install the Assets
Symfony 2.x
Symfony 3.x
Wire-Up JavaScript
Wire-Up Material Stylesheets
Wire-Up the Form Template
Symfony 2.x
Symfony 3.x
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.
If you want to use the Bundled Addons, include the addons module:
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.
Material Icons
You can use Assetic to load Material Icons from the CDN.
`
`
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.
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() %}
.
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. |