angular-material-npfixed
Version:
The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M
192 lines (158 loc) • 6.72 kB
HTML
<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></p>
<ul>
<li>
watch the videos about <a
href="https://egghead.io/articles/new-to-angularjs-start-learning-here" target="_blank"
title="AngularJS Framework">Angular.js framework</a></li>
<li>
read the
<a href="https://material.google.com/" target="_blank"
title="Material Design">Material Design </a> specifications for components,
animations, styles, and layouts.
</li>
</ul>
<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="Codepen Material Community">CodePen Community for Angular Material</a>
</li>
<li>
<a href="https://github.com/angular/material-start/tree/es6-tutorial" target="_blank"
title="Material-Start Tutorial">Learn with Material-Start: 10-step Tutorial (es6)</a>
</li>
<li>
<a href="https://github.com/angular/material-start/tree/es6" target="_blank"
title="Material Start - ES6">Learn with Material-Start: Completed (es6)</a>
</li>
<li>
<a href="https://github.com/angular/material-start/tree/typescript" target="_blank"
title="Material Start - Typescript">Learn with Material-Start: Completed (Typescript)</a>
</li>
<li>
<a href="https://github.com/angular/material-start/tree/master" target="_blank"
title="Material-Start - ES5">Learn with Material-Start: Completed (es5)</a>
</li>
<li>
<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="GitHub Starter Project">Use the Github Starter Project</a>
</li>
<li>Use the "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>
<h3>Build a Material Application (blank shell)</h3>
<p>
See this example application on CodePen that loads
the Angular Material library from the Google CDN:
</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="Codepen Community">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="Codepen Community"
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>
<p>
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"
target="_blank">NPM, JSPM, or Bower</a>.
</p>
<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>