<div ng-controller="GuideCtrl" class="doc-content">
<md-content>
<p><em>New to Angular? Before getting into Angular Material, it might be helpful to:</em>
<ul>
<li>watch the videos about <a href="https://egghead.io/articles/new-to-angularjs-start-learning-here" target="_blank"
title="Link opens in a new window">Angular.js framework</a></li>
<li>
read the
<a href="https://www.google.com/design/spec/material-design/introduction.html" target="_blank"
title="Link opens in a new window">Material Design </a> specifications for components, animations, styles, and layouts.
</li>
</ul>
<p></p>
<h2>How do I start with Angular Material?</h2>
<ul style="margin-bottom: 2em;">
<li>Visit the <a href="http://codepen.io/team/AngularMaterial/"
target="_blank"
title="Link opens in a new window">CodePen Community for Angular Material</a></li>
<li><a href="https://github.com/angular/material-start/tree/es5-tutorial" target="_blank"
title="Link opens in a new window">Learn with Material-Start: 8-step Tutorial (es5)</a></li>
<li><a href="https://github.com/angular/material-start/tree/master" target="_blank"
title="Link opens in a new window">Learn with Material-Start: Completed (es5)</a></li>
<li><a href="https://github.com/angular/material-start/tree/es6" target="_blank"
title="Link opens in a new window">Learn with Material-Start: Completed (es6)</a></li>
<li style="font-weight: 400;color: #106CC8;"><a href="http://codepen.io/team/AngularMaterial/pen/RrbXyW" target="_blank">Start with a blank CodePen Material Application</a></li>
<li style="margin-bottom: 30px;"><a href="https://github.com/angular/material-start" target="_blank"
title="Link opens in a new window">Use the Github Starter Project</a></li>
<li style="font-weight: 400;color: #106CC8;">Use 'Edit on CodePen' button on any of our Demos<br/>
<img src="https://cloud.githubusercontent.com/assets/210413/11568997/ed86795a-99b4-11e5-898e-1da172be80da.png" style="width:75%;margin: 10px 30px 0 0">
</li>
</ul>
<p></p>
<h3>Build a Material Application (blank shell)</h3>
See this example application on CodePen that loads
the Angular Material library from the Google CDN:
<p></p>
<iframe height='777' scrolling='no'
src='//codepen.io/team/AngularMaterial/embed/RrbXyW/?height=777&theme-id=21180&default-tab=html'
frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a
href='http://codepen.io/team/AngularMaterial/pen/RrbXyW/'>Angular Material - Blank Starter</a> by Angular
Material (<a href='http://codepen.io/AngularMaterial'>@AngularMaterial</a>) on <a
href='http://codepen.io'>CodePen</a>.
</iframe>
<p>Now just your add your Angular Material components and other HTML content to your Blank starter app.</p>
<br/>
<hr>
<h3>Our CodePen Community</h3>
<p>
You can also visit our <a href="http://codepen.io/team/AngularMaterial/" target="_blank"
title="Link opens in a new window">CodePen Community</a> to explore more samples and ideas.
</p>
<div layout-align="center" style="width: 100%">
<a href="http://codepen.io/collection/XExqGz/" target="_blank"
title="Link opens in a new window" style="text-decoration:none; border: 0 none;">
<img src="https://cloud.githubusercontent.com/assets/210413/11613879/544f0b1e-9bf6-11e5-9923-27dd0d891bfd.png" style="text-decoration:none; border: 0 none;width: 100%">
</a>
</div>
<br/><br/>
<hr>
<h3>Installing the Angular Material Libraries</h3>
<br/>
You can install the Angular Material library (and its dependent libraries) in your local project using either
<a href="https://github.com/angular/bower-material/#installing-angular-material">NPM, JSPM, or Bower</a>.
<p>
Angular Material also integrates with some additional, optional libraries which you may elect to include:
</p>
<ul style="margin-bottom: 2em;">
<li>
<a href="https://docs.angularjs.org/api/ngMessages">ngMessages</a>
- Provides a consistent mechanism for displaying form errors and other messages.
</li>
<li>
<a href="https://docs.angularjs.org/api/ngSanitize">ngSanitize</a>
- The ngSanitize module provides functionality to sanitize HTML content in Material components.
</li>
<li>
<a href="https://docs.angularjs.org/api/ngRoute">ngRoute</a>
- Provides a clean routing system for your application.
</li>
</ul>
<br/>
<hr>
<h3>Unsupported Integrations</h3>
<p>
Angular Material v1.0 has known integration issues with the following libraries:
</p>
<ul style="margin-bottom: 2em;">
<li>
<a href="https://docs.angularjs.org/api/ngTouch">ngTouch</a>
- ngMaterial conflicts with ngTouch for click, tap, and swipe support on touch-enabled devices.
</li>
<li>
<a href="http://ionicframework.com/">Ionic</a>
- Open-source SDK for developing hybrid mobile apps with Web technologies has touch support
that interferes with ngMaterial's mobile gesture features.
</li>
</ul>
<br/>
<h2>Contributing to Angular Material</h2>
<ul style="margin-bottom: 2em;">
<li>Please read our <a href="https://github.com/angular/material#contributing">contributor guidelines</a>.</li>
<li>To contribute, fork our GitHub <a href="https://github.com/angular/material">repository</a>.</li>
<li>For problems,
<a href="https://github.com/angular/material/issues?q=is%3Aissue+is%3Aopen" target="_blank">
search the GitHub Issues
</a> and/or
<a href="https://github.com/angular/material/issues/new" target="_blank">
create a New Issue
</a>.
</li>
<li>For questions,
<a href="https://groups.google.com/forum/#!forum/ngmaterial" target="_blank">
search the Forum
</a> and/or post a new question.
</li>
<li>
Join the
<a href="https://gitter.im/angular/material" target="_blank">
Gitter Chat
</a>
</li>
</ul>
</md-content>
</div>