====== Tutorial Angular Material ======
===== Resources =====
* https://stories.uplabs.io/getting-started-with-angular-material-3ee3cdb8ecd8#.7dhnxca4w
===== Steps to build app =====
* https://github.com/angular/material-start/tree/es5-tutorial
Here are some generalized steps that may be used to conceptualize the application implementation process:
* Plan your layout and the components you want to use
* Use hard-coded HTML and mock content to make sure the components appear as desired
* Wire components to your application logic > Use the seamless integration possible with Angular directives and controllers > This integration assumes that you have unit tested your app logic
* **The components (html, controller, services..) can be wired together with ui-router,...**
* Add Responsive breakpoints
* https://material.angularjs.org/HEAD/layout/container
* Add Theming support
* https://material.angularjs.org/HEAD/Theming/03_configuring_a_theme
* Confirm ARIA compliance
* Write e2e Tests > It is important to validate your app logic with Angular Material UI components.
==== Step #1 ====
@see tutorial_1.html
Here you modified the shell application [available in tutorial_0.html] to use Angular-Material.
Use Bower to install angular-material with bower install angular-material -D
In the HTML, load the CSS and JS modules:
Configure the app dependency on 'ngMaterial'
Step #2:
@see tutorial_2.html
Here you used the wireframe planning and layout to identify the components and attributes needed.
Add the , , containers > Note: that the md-sidenav is the container the Users master list view, and the md-content is the container for the User detail view.
Add the layout and flex attributes to configure the container layouts and sizing aspects.
Use md-locked-open to lock the sidenav open on the left
Use the md-whiteframe-z2 to add a shadow the the sidenav
Angular Material - Starter App
Step #3:
@see tutorial_3.html
Here you will use hard-coded elements to confirm rendering and layout of the container child elements and Angular Material components.
Add the , , containers > Note: that the md-sidenav is the container for the master Users List view, and the md-content is the container for the detail User Detail view.
Add the layout and flex attributes to configure the container layouts and sizing aspects.
Use md-locked-open to lock the sidenav open on the left
Use the md-whiteframe-z2 to add a shadow the the sidenav
Lia Luogo
Lawrence Ray
Lia Luogo
I love cheese...
Step #4:
@see tutorial_4.html
Here you integrate your custom, application logic.
Define a Angular module for your custom code
Define your data services, models, and controllers
Load your custom code
Register your Angular module for runtime DI
Step #5:
@see tutorial_5.html
Here you will replace the hardcoded HTML with dynamic markup using Angular directives (eg ng-repeat) and {{ }} interpolation markup.
Use dynamic HTML that will be compiled and rendered by Angular
Register a custom icon set of 'user' avatars for the user list
Register menu and share icon urls for the md-buttons
{{it.name}}
{{ul.selected.name}}
{{ul.selected.content}}
Step #6:
@see tutorial_6.html
Here you will add responsive breakpoints so the application layout will adapt to different device display sizes.
Lock the Users list open if device display is wider than > 600px; hide otherwise.
Hide the Toolbar menu icon button if the Users list is open.
Add click support for the menu and share buttons.
Register icons for bottomsheet
Register the share icons displayed in the User Detail view bottomsheet:
Step #7:
@see tutorial_7.html
Here you will configure a different, darker theme to be used.
Use $mdThemingProvider to configure a different theme using primary colors from the brown color palette and accent colors from the red color palette.
Step #8:
@see tutorial_8.html
Here you will fix any ARIA warnings that Angular Material may display in the Dev console.
Insert aria-label attributes for mdButton components that do not have labels.
...
Summary
With only eight (8) Tutorial Steps and a few minutes of work, we have quickly created a functional Angular Material application that is beautiful, responsive, theme'ed, accessible, and easily maintained.