angular-material-npfixed/docs/app/partials/home.tmpl.html

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

<div ng-controller="HomeCtrl" class="doc-content">
  <md-content>
    <h2 class="md-headline" style="margin-top: 0;">What is Angular Material?</h2>
    <p>
      For developers using AngularJS, Angular Material is both a UI Component framework and a reference implementation of Google's
      Material Design Specification. This project provides a set of reusable, well-tested, and
      accessible UI components based on Material Design.
    </p>
    <ul class="buckets" layout layout-align="center center" layout-wrap>
      <li flex="50" flex-gt-md="25" ng-repeat="(index, link) in [
        { href: './getting-started', icon: 'school', text: 'Getting Started' },
        { href: './contributors', icon: 'school', text: 'Contributors' },
        { href: './demo', icon: 'play_circle_fill', text: 'Demos' },
        { href: './CSS/typography', icon: 'build', text: 'Customization' },
        { href: './api', icon: 'code', text: 'API Reference' }
      ]">
        <md-button
            class="md-primary md-raised"
            ng-href="{{link.href}}"
            aria-label="{{link.text}}">
          <md-icon class="block" md-svg-src="img/icons/ic_{{link.icon}}_24px.svg"></md-icon>
          {{link.text}}
        </md-button>
      </li>
    </ul>

    <br/>
    <h2 class="md-headline">What about Angular 2?</h2>
    <p>
      Angular Material recently released Version 1 which we consider to be stable and ready for
      production use. Developers should note that Angular Material v1 works only with Angular 1.x.
    </p>
    <ul>
      <li>Current Angular Material v1.x development efforts are focused on bug fixes and minor improvements.</li>
      <li>Angular Material v2 development is also in-progress at the <a href="https://github.com/angular/material2">angular/material2</a> GitHub repository.</li>
    </ul>
    <p>
      Please refer to our changelog for up-to-date listings of all v1.x improvements and breaking changes.
    </p>
     <ul class="buckets" layout layout-align="center center" layout-wrap>
      <li flex="100" flex-gt-xs="50" ng-repeat="(index, link) in [
        {
          href: 'https://github.com/angular/material/blob/master/CHANGELOG.md',
          icon: 'access_time',
          text: 'Changelog'
        }
      ]">
        <md-button
            class="md-primary md-raised"
            ng-href="{{link.href}}"
            aria-label="{{link.text}}">
          <md-icon class="block" md-svg-src="img/icons/ic_{{link.icon}}_24px.svg"></md-icon>
          {{link.text}}<br/>
          <div style="text-transform: none;margin-top:-15px;font-size:1.0em;">Angular Material v1.x </div>
        </md-button>
      </li>
    </ul>

    <md-divider></md-divider>

    <br/>
    <h2 class="md-headline">Training Videos:</h2>
    <p>
      Here are some video courses that will help jump start your development with Angular Material.
    </p>
    <ul class="buckets" layout layout-align="center center" layout-wrap>
      <li flex="100" flex-gt-xs="50" ng-repeat="(index, link) in [
        { href: 'https://egghead.io/series/angular-material-introduction', icon: 'ondemand_video', text: 'Introduction to Angular Material', site : 'EggHead', access : 'free'},
        { href: 'https://app.pluralsight.com/player?author=ajden-towfeek&name=angular-material-fundamentals-m0&mode=live&clip=0&course=angular-material-fundamentals', icon: 'ondemand_video', text: 'Angular Material Fundamentals', site : 'Pluralsight', access: 'member'},
      ]">
        <md-button
            class="md-primary md-raised"
            target="_blank"
            aria-label="{{link.text}}"
            ng-href="{{link.href}}">
          <md-icon class="block" md-svg-src="img/icons/ic_{{link.icon}}_24px.svg"></md-icon>
          {{link.site}} | <span style="color: rgb(255,82,82); text-transform: none;">{{link.text}}</span> | <span class="training_info">{{link.access}}</span>
        </md-button>
      </li>
    </ul>


    <br/>
    <h2 class="md-headline">Conference Presentations:</h2>
    <p>
      Here are some conference presentations that will provide overviews for your development with Angular Material.
    </p>
    <ul class="buckets" layout layout-align="center center" layout-wrap>
      <li flex="100" flex-gt-xs="50" ng-repeat="(index, link) in [
        { href: 'https://www.youtube.com/watch?v=Qi31oO5u33U', icon: 'ondemand_video', text: 'Building with Angular Material', site : 'ng-conf',  date: '2015'},
        { href: 'https://www.youtube.com/watch?v=363o4i0rdvU', icon: 'ondemand_video', text: 'Angular Material in Practice', site : 'AngularConnect', date:'2015'},
      ]">
        <md-button
            class="md-primary md-raised"
            target="_blank"
            aria-label="{{link.text}}"
            ng-href="{{link.href}}">
          <md-icon class="block" md-svg-src="img/icons/ic_{{link.icon}}_24px.svg"></md-icon>
          <span class="training_site">{{link.site}}</span> | <span class="training_link">{{link.text}}</span> | <span class="training_info">{{link.date}}</span>
        </md-button>
      </li>
    </ul>


    <br/>
    <h2 class="md-headline">Google's Material Design</h2>
    <p>
      Material Design is a specification for a unified system of visual, motion, and interaction
      design that adapts across different devices and different screen sizes.
    </p>
    <ul class="buckets" layout layout-align="center center" layout-wrap>
      <li flex="100" flex-gt-xs="50" ng-repeat="(index, link) in [
        { href: 'https://www.youtube.com/watch?v=Q8TXgCzxEnw', icon: 'ondemand_video', text: 'Watch a video', site : 'Google' },
        { href: 'http://www.google.com/design/spec/material-design/', icon: 'launch', text: 'Learn More', site : 'Google' }
      ]">
        <md-button
            class="md-primary md-raised"
            target="_blank"
            aria-label="{{link.text}}"
            ng-href="{{link.href}}">
          <md-icon class="block" md-svg-src="img/icons/ic_{{link.icon}}_24px.svg"></md-icon>
          {{link.site}} | <span class="training_link"> {{link.text}} </span>
        </md-button>
      </li>
    </ul>

    <br/>
    <p class="md-caption" style="text-align: center; margin-bottom: 0;">
      These docs were generated from
      (<a ng-href="{{BUILDCONFIG.repository}}/{{menu.version.current.github}}" target="_blank" class="md-accent" >
      v{{BUILDCONFIG.version}} - SHA {{BUILDCONFIG.commit.substring(0,7)}}</a>)
      on (<strong>{{BUILDCONFIG.date}}</strong>) GMT.
    </p>
  </md-content>
</div>