HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Angular Material - 安装和环境设置

如何使用 Angular Material?

有两种使用 Angular Material 的方法 −

  • 本地安装 +minus; 您可以在本地计算机上使用 npm、jspm 或 Bower 下载 Angular Material 库，并将其包含在 HTML 代码中。

  • 基于 CDN 的版本 − 您可以直接从内容交付网络 (CDN) 将 Angular-material.min.css 和 Angular-material js 文件包含到您的 HTML 代码中。

本地安装

在使用以下 npm 命令之前，我们需要在系统上安装 NodeJS。 要获取有关 Node JS 的信息，请单击此处并打开 NodeJS 命令行界面。 我们将使用以下命令来安装 Angular Material 库。

npm install angular-material

上面的命令将生成以下输出 −

angular-animate@1.5.2 node_modules\angular-animate

angular-aria@1.5.2 node_modules\angular-aria

angular-messages@1.5.2 node_modules\angular-messages

angular@1.5.2 node_modules\angular

angular-material@1.0.6 node_modules\angular-material

npm 将下载 node_modules > angular-material 文件夹下的文件。 包含以下示例中所述的文件 −

示例

现在您可以将 css 和 js 文件包含在 HTML 文件中，如下所示 −

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://www.w3ccoo.com/lib/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular.min.js"></script>
      <script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-animate.min.js"></script>
      <script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-aria.min.js"></script>
      <script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-messages.min.js"></script>
      <script src = "https://www.w3ccoo.com/lib/angular_material/1.0.0/angular-material.min.js"></script>
      
      <script type = "text/javascript">    
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>
   
   <body ng-app = "firstApplication" ng-cloak>
      <md-toolbar class = "md-warn">
         <div class = "md-toolbar-tools">
            <h2 class = "md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      
      <md-content flex layout-padding>
         <p>HTML5 是 HTML 标准的下一个主要修订版本，取代 HTML 4.01、XHTML 1.0 和 XHTML 1.1。 HTML5 是在万维网上构建和呈现内容的标准。</p>
         
         <p>HTML5 是万维网联盟 (W3C) 和 Web 超文本应用技术工作组 (WHATWG) 之间的合作成果。</p>
         
         <p>新标准整合了视频播放和拖放等功能，这些功能以前依赖于 Adobe Flash、Microsoft Silverlight 和 Google Gears 等第三方浏览器插件。</p>
      </md-content>
   </body>
</html>

上面的程序将生成以下结果 −

基于 CDN 的版本

您可以直接从内容交付网络 (CDN) 将 angular-material.css 和 angular-material.js 文件包含到您的 HTML 代码中。 cdn.staticfile.org 提供最新版本的内容。

我们在本教程中使用该库的 CDN 版本。

示例

现在让我们使用 CDN 中的 angular-material.min.css 和 angular-material.min.js 重写上面的示例。

<html lang = "en" >
   <head>
      <link rel = "stylesheet"
         href = "https://www.w3ccoo.com/lib/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular.min.js"></script>
      <script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-animate.min.js"></script>
      <script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-aria.min.js"></script>
      <script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-messages.min.js"></script>
      <script src = "https://www.w3ccoo.com/lib/angular_material/1.0.0/angular-material.min.js"></script>

      <script type = "text/javascript">    
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>
   
   <body ng-app = "firstApplication" ng-cloak>
      <md-toolbar class = "md-warn">
         <div class = "md-toolbar-tools">
            <h2 class = "md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      
      <md-content flex layout-padding>
         <p>HTML5 是 HTML 标准的下一个主要修订版本，取代 HTML 4.01、XHTML 1.0 和 XHTML 1.1。 HTML5 是在万维网上构建和呈现内容的标准。</p>

         <p>HTML5 是万维网联盟 (W3C) 和 Web 超文本应用技术工作组 (WHATWG) 之间的合作成果。</p>
         
         <p>新标准融合了视频播放和拖放等功能，这些功能以前依赖于 Adobe Flash、Microsoft Silverlight 和 Google Gears 等第三方浏览器插件。</p>
      </md-content>
   </body>
</html>

上面的程序将生成以下结果 −

❮ 上一节 下一节 ❯