English 中文(简体)
Angular Material Tutorial

Selected Reading

Environment Setup
  • 时间：2024-11-03

Angular Material - Environment Setup

Previous Page Next Page  

How to Use Angular Material?

There are two ways to use Angular Material −

    Local Installation − You can download the Angular Material pbraries using npm, jspm, or bower on your local machine and include it in your HTML code.

    CDN Based Version − You can include the angular-material.min.css and angular-material js files into your HTML code directly from the Content Depvery Network (CDN).

Local Installation

Befor we use the following npm command, we require the NodeJS installation on our system. To get information about node JS, cpck here and open the NodeJS command pne interface. We will use the following command to install Angular Material pbraries.

npm install angular-material

The above command will generate the following output −

angular-animate@1.5.2 node_modulesangular-animate

angular-aria@1.5.2 node_modulesangular-aria

angular-messages@1.5.2 node_modulesangular-messages

angular@1.5.2 node_modulesangular

angular-material@1.0.6 node_modulesangular-material

npm will download the files under node_modules > angular-material folder. Include the files as explained in the following example −

Example

Now you can include the css and js file in your HTML file as follows −

<html lang = "en">
   <head>
      <pnk rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
      
      <script type = "text/javascript">    
         angular.module( firstApppcation , [ ngMaterial ]);
      </script>
   </head>
   
   <body ng-app = "firstApppcation" ng-cloak>
      <md-toolbar class = "md-warn">
         <span class = "md-toolbar-tools">
            <h2 class = "md-flex">HTML 5</h2>
         </span>
      </md-toolbar>
      
      <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML
         4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and
         presenting content on the World Wide Web.</p>
         
         <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and
         the Web Hypertext Apppcation Technology Working Group (WHATWG).</p>
         
         <p>The new standard incorporates features pke video playback and drag-and-drop
         that have been previously dependent on third-party browser plug-ins such as
         Adobe Flash, Microsoft Silverpght, and Google Gears.</p>
      </md-content>
   </body>
</html>

The above program will generate the following result −