Angular Material-Start (ES6)
This branch contains the final/complete version (i.e.
step-10-finished) of the
Material Start ES6 Tutorial branch
in this repository.
There are many additional branches in this repository that you may find useful:
master(this branch) - A copy of the
es6branch outlined below with additional notes about the available branches.
es5-tutorial- Step-by-step instructions that clearly demonstrate how the Starter application can be created in minutes using ES5.
es5- The final ES5 version which you complete in the last step of the tutorials above.
es6-tutorial- Step-by-step instructions that clearly demonstrate how the Starter application can be created in minutes using ES6.
es6- The final ES6 version which you complete in the last step of the tutorials above.
typescript- The final Starter Application built using Typescript.
Note: We do not currently offer a
typescript-tutorialbranch as the steps are fairly similar to the existing
This project uses the latest master branch of Angular Material to build the application outlined below.
Above is a snaphot of the Starter-App with a Master-Detail layout: showing a list of users (left) and a user detail view (right).
Also shown is the user experience that will be displayed for smaller device sizes. The responsive layout reveals the menu button that can be used to hide the user list. And the share button can be used to show the Share bottom sheet view.
This Starter app demonstrates how:
- Angular Material
flexoptions can easily configure HTML containers
- Angular Material components
<md-icon>can quickly provide a base application structure
- Custom controllers can be used and show
<md-bottomsheet>with HTML templates
- Custom controller can easily, and programmatically open/close the SideNav component
- Responsive breakpoints and
- Theming can be altered/configured using
This sample application is purposed as both a learning tool and a skeleton application for a typical AngularJS Material web app, comprised of a side navigation area and a content area. You can use it to quickly bootstrap your angular webapp projects and dev environment for these projects.
"How to build an App"
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 application logic.
Add Responsive breakpoints
Add Theming support
Confirm ARIA compliance
Write End-to-end (e2e) Tests
It is important to validate your application logic with Angular Material UI components.
The illustration below shows how we planned the layout and identified the primary components that will be used in the Starter app:
Note: The container #2 (above) is a simple
<div>container and not an Angular Material component.
This project uses jspm.io, a package manager for SystemJS which is built on top of the dynamic ES6 module loader. This allows developers to load any module format (ES6, CommonJS, AMD, and globals).
This project assumes that you have NodeJS and any relevant development tools (like XCode) already installed.
Clone this repository and execute the following commands in a terminal:
git checkout master
npm run serve
Note: Open the dev console to see any warnings and browse the elements.
You will notice a few files/directories within this project:
app/src- This is where all of your application files are stored.
app/assets- This folder contains some tutorial-provided images and icons which are used by the application.
index.html- The entry point to your application. This uses System.js to load the
app/src/boot/boot.jsbootstrap file which in turn loads the
app/src/app.jsfile that imports all of your dependencies and declares them as Angular modules, and configures the icons and theming for the application.
If you have issues getting the application to run or work as expected:
- Make sure you have installed JSPM and run the
- Reach out on our Forum to see if any other developers have had the same issue.
- This project is based against the
masterbranch of Angular Material, so it is always showing the latest and greatest. You may want to update the
package.jsonto use Version 1.1.0 or another stable release to make sure it isn't because of something we changed recently.
- Search for the issue here on GitHub.
- If you don't see an existing issue, please open a new one with the relevant information and the details of the problem you are facing.