This app has two tools.
- Convert human time to Timestamp.
- Get movie data from OMDb API. http://www.omdbapi.com/
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 thees6
branch 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-tutorial
branch as the steps are fairly similar to the existinges6-tutorial
branch.
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
layout
andflex
options can easily configure HTML containers - Angular Material components
<md-toolbar>
,<md-sidenav>
, and<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
$mdMedia
are 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 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.
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:
![plancomponents2](https://cloud.githubusercontent.com/assets/210413/6444676/c247c8f8-c0c4-11e4-8206-208f55cbceee.png)
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 install
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 theapp/src/boot/boot.js
bootstrap file which in turn loads theapp/src/app.js
file 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
jspm update
command. - Reach out on our Forum to see if any other developers have had the same issue.
- This project is based against the
master
branch of Angular Material, so it is always showing the latest and greatest. You may want to update thepackage.json
to 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.