วัสดุเชิงมุม - การตั้งค่าสภาพแวดล้อม

วิธีใช้วัสดุเชิงมุม

มีสองวิธีในการใช้วัสดุเชิงมุม -

Local Installation - คุณสามารถดาวน์โหลดไลบรารี Angular Material โดยใช้ npm, jspm หรือ bower บนเครื่องของคุณและรวมไว้ในโค้ด HTML ของคุณ
CDN Based Version - คุณสามารถรวมไฟล์ angular-material.min.css และ angular-material js ลงในโค้ด HTML ของคุณได้โดยตรงจาก Content Delivery Network (CDN)

การติดตั้งภายในเครื่อง

สำหรับเราใช้คำสั่ง npm ต่อไปนี้เราต้องการการติดตั้ง NodeJS ในระบบของเรา หากต้องการรับข้อมูลเกี่ยวกับโหนด JS คลิกที่นี่และเปิดอินเทอร์เฟซบรรทัดคำสั่ง NodeJS เราจะใช้คำสั่งต่อไปนี้เพื่อติดตั้งไลบรารี Angular Material

npm install angular-material

คำสั่งดังกล่าวจะสร้างผลลัพธ์ต่อไปนี้ -

[email protected] node_modules\angular-animate

[email protected] node_modules\angular-aria

[email protected] node_modules\angular-messages

[email protected] node_modules\angular

[email protected] node_modules\angular-material

npm จะดาวน์โหลดไฟล์ภายใต้ node_modules > angular-materialโฟลเดอร์ รวมไฟล์ตามที่อธิบายไว้ในตัวอย่างต่อไปนี้ -

ตัวอย่าง

ตอนนี้คุณสามารถรวมไฟล์cssและjsในไฟล์ HTML ของคุณได้ดังนี้ -

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/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 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 Application Technology Working Group (WHATWG).</p>
         
         <p>The new standard incorporates features like video playback and drag-and-drop
         that have been previously dependent on third-party browser plug-ins such as
         Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>

โปรแกรมข้างต้นจะสร้างผลลัพธ์ดังต่อไปนี้ -

เวอร์ชันที่ใช้ CDN

คุณสามารถรวมไฟล์ angular-material.css และ angular-material.jsไฟล์ลงในโค้ด HTML ของคุณโดยตรงจาก Content Delivery Network (CDN) Google CDN มีเนื้อหาสำหรับเวอร์ชันล่าสุด

เรากำลังใช้ไลบรารีเวอร์ชัน Google CDN ตลอดบทช่วยสอนนี้

ตัวอย่าง

ตอนนี้ให้เราเขียนตัวอย่างข้างต้นใหม่โดยใช้ angular-material.min.css และ angular-material.min.js จาก Google CDN

<html lang = "en" >
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/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 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
         ypertext Application Technology Working Group (WHATWG).</p>
         
         <p>The new standard incorporates features like video playback and drag-and-drop
         that have been previously dependent on third-party browser plug-ins such as Adobe
         Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>

โปรแกรมข้างต้นจะสร้างผลลัพธ์ดังต่อไปนี้ -