Учебники

Угловой материал — настройка среды

Декабрь 8, 2018

Есть два способа использовать угловой материал —

  • Локальная установка. Вы можете загрузить библиотеки Angular Material, используя npm, jspm или bower, на свой локальный компьютер и включить их в свой HTML-код.

  • Версия на основе CDN. Вы можете включать файлы js angular-material.min.css и angular-material в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка. Вы можете загрузить библиотеки Angular Material, используя npm, jspm или bower, на свой локальный компьютер и включить их в свой HTML-код.

Версия на основе CDN. Вы можете включать файлы js angular-material.min.css и angular-material в свой HTML-код непосредственно из сети доставки контента (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-файл следующим образом:

Live Demo 

<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-код непосредственно из сети доставки контента (CDN). Google CDN предоставляет контент для последней версии.

В этом руководстве мы используем версию библиотеки Google CDN.

пример

Теперь давайте перепишем приведенный выше пример, используя angular-material.min.css и angular-material.min.js из Google CDN.

Live Demo 

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

Вышеуказанная программа сгенерирует следующий результат —

44
Share: