This branch contains the same tutorial application created in master and the es5 branch... but this branch implements the application using JSPM and ES6.
There are no tutorial steps in this branch. Instead the finished application is published here for comparison and learning purposes.
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
layoutandflexoptions can easily configure HTML containers - Angular Material components
<md-toolbar>,<md-sidenav>,<md-icon>can be quickly used - Custom controllers can use and show
<md-bottomsheet>with HTML templates - Custom controller can easily, programmatically open & close the SideNav component.
- Responsive breakpoints and
$mdMediaare used - Theming can be altered/configured using
$mdThemingProvider
This sample application is purposed as both a learning tool and a skeleton application for a typical AngularJS Material ES6 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.
The illustration below shows how we planned the layout and identified the primary components that will be used in the Starter ap:
Note: that container #2 (above) is a simple
<div>container and not an Angular Material component.
- - -
These application use jspm.io: 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).
After you have cloned the repository, you should execute the following commands:
npm install jspm -gjspm install
Notice that the shell application uses jspm with Angular-Material.
- In the HTML, we only load the System loader and the configuration module
Notice no stylesheets are loaded here... they are injected later upon demand
- Configure the system loader to laod the app/boot module.
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>Angular Material - Starter App ES6</title> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,700'> <style type="text/css"> /** * Hide when Angular is not yet loaded and initialized */ [ng-cloak] { display: none; } </style> </head> <body ng-cloak layout="column"> <div ng-include="'src/users/view/browseUsers.html'" layout="column" flex tabIndex="-1" role="main" > </div> <script src="./jspm_packages/system.js" type="text/javascript"></script> <script src="./config.js" type="text/javascript"></script> <script type="text/javascript"> System .import('app/boot') .catch( console.error.bind(console) ); // make sure any errors print to console </script> </body>