home.tmpl.html

<div ng-controller="HomeCtrl" class="doc-content">
  <md-content>
    <h2 class="md-headline" style="margin-top: 0;">What is AngularJS Material?</h2>
    <p>
      AngularJS Material is an implementation of Google's
      <a href="https://material.io/archive/guidelines/" target="_blank" rel="noopener">
        Material Design Specification (2014-2017)</a>.
      This project provides a set of reusable, well-tested, and accessible UI components for
      <a href="https://angularjs.org" target="_blank" rel="noopener">AngularJS</a> developers.
    </p>
    <p>
      AngularJS Material Long Term Support (LTS) has officially ended as of January 2022.
      <a href="#long-term-support">Find out more</a>.
    </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>

    <h2 class="md-headline">AngularJS versus Angular?</h2>
    <p>
      The AngularJS Material library is a mature and stable product that is ready for production
      use. Developers should note that AngularJS Material works only with
      <a href="https://angularjs.org/" target="_blank" rel="noopener">AngularJS 1.x</a>.
      AngularJS 1.x
      <a href="https://docs.angularjs.org/misc/version-support-status" target="_blank" rel="noopener">
      Long Term Support (LTS)</a> has ended as of January 2022.
    </p>
    <i>
      The Angular Material and Component Dev Kit (CDK) libraries (for Angular v2+) can be found in the
      <a href="https://github.com/angular/components" target="_blank" rel="noopener">angular/components</a>
      GitHub repository.
    </i>
    <br/>
    <br/>
    <h2 class="md-headline">The Latest Material Design</h2>
    <p>
      The latest update to Material Design
      (<a href="https://www.youtube.com/playlist?list=PLJ21zHI2TNh-rX-Xr_xi9KIEcbdee_1Ah" target="_blank" rel="noopener">video playlist</a>)
      was announced at Google I/O in May 2018
      (<a href="https://design.google/library/io-2018-our-definitive-guide-design/" target="_blank" rel="noopener">recap blog post</a>).
      For an implementation of this new
      <a href="https://material.io/design" target="_blank" rel="noopener">Material Design Specification</a>,
      please see the <a href="https://github.com/angular/components" target="_blank" rel="noopener">Angular Material</a>
      project which is built for <a href="https://angular.io" target="_blank" rel="noopener">Angular</a>
      developers.
    </p>
    <h2 id="long-term-support" class="md-headline">End-Of-Life</h2>
    <p>
      AngularJS Material support has officially ended as of January 2022. This date aligns with the end of
      the <a href="https://docs.angularjs.org/misc/version-support-status" target="_blank" rel="noopener">
      AngularJS LTS</a> period. Read the
      <a href="https://goo.gle/angularjs-end-of-life" target="_blank" rel="noopener">
        end-of-life announcement</a> for more details.
    </p>
    <p>
      Find details on reporting security issues
      <a href="https://github.com/angular/material/blob/master/SECURITY.md">here</a>.
    </p>
    <h2 class="md-headline">Change Log</h2>
    <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;">
            AngularJS Material v1.x
          </div>
        </md-button>
      </li>
    </ul>

    <h2 class="md-headline">Browser Support</h2>
    <p>
      AngularJS Material generally supports browsers that fall into these categories
    </p>
    <ul>
      <li>Greater than 0.5% global usage</li>
      <li>Last two major versions of Evergreen browsers</li>
      <li>Firefox ESR</li>
      <li>Not considered "dead" browsers</li>
    </ul>
    <br/>
    <h3>The following table provides a more detailed view:</h3>
    <table class="custom-table">
      <tbody>
      <tr>
        <th>
          Browser
        </th>
        <th>
          Supported Versions
        </th>
      </tr>
      <tr>
        <td>
          Chrome<br/>Chrome for Android<br/>Edge<br/>Safari<br/>Opera
        </td>
        <td>
          last 2 major versions
        </td>
      </tr>
      <tr>
        <td>
          Firefox
        </td>
        <td>
          last 2 major versions<br/>ESR
        </td>
      </tr>
      <tr>
        <td>
          IE<br/>IE Mobile
        </td>
        <td>
          11
        </td>
      </tr>
      <tr>
        <td>
          Firefox for Android<br/>UC
        </td>
        <td>
          latest version
        </td>
      </tr>
      <tr>
        <td>
          Samsung Internet
        </td>
        <td>
          12.x
        </td>
      </tr>
      <tr>
        <td>
          Opera for Android
        </td>
        <td>
          Mini all
        </td>
      </tr>
      </tbody>
    </table>

    <h2 class="md-headline">Screen Reader Support</h2>
    <p>
      AngularJS Material is built based on the
      <a href="https://www.w3.org/TR/wai-aria-1.0/" target="_blank" rel="noopener">
        WAI-ARIA 1.0 W3C Recommendation</a>.
    </p>
    <h3>
      AngularJS Material supports the following screen readers:
    </h3>
    <table class="custom-table">
      <tbody>
      <tr>
        <th>
          Screen Reader
        </th>
        <th>
          Supported Versions
        </th>
      </tr>
      <tr>
        <td>
          NVDA<br/>JAWS
        </td>
        <td>
          2019.x<br/>2020.x
        </td>
      </tr>
      <tr>
        <td>
          Android Accessibility Suite
        </td>
        <td>
          8.1.x<br/>8.2.x
        </td>
      </tr>
      <tr>
        <td>
          ChromeVox on Chrome OS<br/>VoiceOver on macOS/iOS
        </td>
        <td>
          last 2 major versions
        </td>
      </tr>
      </tbody>
    </table>

    <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 AngularJS 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 AngularJS 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: 'AngularJS 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 class="training_link">{{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
      AngularJS 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=rRiV_b3WsoY', icon: 'ondemand_video', text: 'AngularJS Material v1.1.0 Updates', site : 'ng-conf',  date: '2016'},
        { href: 'https://www.youtube.com/watch?v=6PMe_wc0SjI', icon: 'ondemand_video', text: 'Adaptive UI with AngularJS Material', site : 'DevFest NC',  date: '2015'},
        { href: 'https://www.youtube.com/watch?v=Qi31oO5u33U', icon: 'ondemand_video', text: 'Building with AngularJS Material', site : 'ng-conf',  date: '2015'},
        { href: 'https://www.youtube.com/watch?v=363o4i0rdvU', icon: 'ondemand_video', text: 'AngularJS 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/>
    <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"
          rel="noopener">v{{BUILDCONFIG.version}} - SHA {{BUILDCONFIG.commit.substring(0,7)}}</a>)
      on (<strong>{{BUILDCONFIG.date}}</strong>) GMT.
    </p>
  </md-content>
</div>