Açısal Malzeme - Ortam Kurulumu

Açısal Malzeme Nasıl Kullanılır?

Açısal Malzemeyi kullanmanın iki yolu vardır -

Local Installation - Angular Material kitaplıklarını yerel makinenizde npm, jspm veya bower kullanarak indirebilir ve HTML kodunuza ekleyebilirsiniz.
CDN Based Version - Angular-material.min.css ve angular-material js dosyalarını doğrudan İçerik Dağıtım Ağı'ndan (CDN) HTML kodunuza dahil edebilirsiniz.

Yerel Kurulum

Aşağıdaki npm komutunu kullanacağımız için, sistemimizde NodeJS kurulumuna ihtiyacımız var. JS düğümü hakkında bilgi almak için buraya tıklayın ve NodeJS komut satırı arayüzünü açın. Angular Material kütüphanelerini kurmak için aşağıdaki komutu kullanacağız.

npm install angular-material

Yukarıdaki komut aşağıdaki çıktıyı üretecektir -

[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 dosyaları altında indirecek node_modules > angular-materialKlasör. Dosyaları aşağıdaki örnekte açıklandığı gibi ekleyin -

Misal

Artık css ve js dosyasını HTML dosyanıza aşağıdaki gibi ekleyebilirsiniz -

<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>

Yukarıdaki program aşağıdaki sonucu üretecektir -

CDN Tabanlı Sürüm

Dahil edebilirsiniz angular-material.css ve angular-material.jsdosyalarınızı doğrudan İçerik Dağıtım Ağı'ndan (CDN) HTML kodunuza aktarın. Google CDN, en son sürüm için içerik sağlar.

Bu eğitimde kitaplığın Google CDN sürümünü kullanıyoruz.

Misal

Şimdi yukarıdaki örneği kullanarak yeniden yazalım. angular-material.min.css ve angular-material.min.js Google CDN'den.

<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>

Yukarıdaki program aşağıdaki sonucu üretecektir -