Angular Material官方入門教程

翻譯自Angular Material官方主頁，原文地址

Angular Material官方入門教程，八步打造一個(gè)這樣的app：####


這個(gè)app屬于一種MAster-Detail(主-從視圖)布局，即左側(cè)是用回列表，有測(cè)試用戶詳情

上面同時(shí)還展示了在小尺寸設(shè)備上的顯示效果。響應(yīng)式的布局是的我們可以痛過點(diǎn)擊菜單按鈕將用戶列表隱藏，以及痛毆分享按鈕顯示底部的分享視圖。

"如何創(chuàng)建app?"###

有一些廣泛使用的、規(guī)范化的app開發(fā)流程

  1. 規(guī)劃你的布局和希望使用到的組件，最好有一套交互設(shè)計(jì)文檔
  • 使用常規(guī)的HTML和偽造的數(shù)據(jù)來確保組件能按希望的樣式渲染
  • 將UI組件整合到你的應(yīng)用邏輯中，盡可能地和Angular的指令和控制器做到無縫整合。在整合錢，你最好對(duì)應(yīng)用邏輯進(jìn)行單元測(cè)試。
  • 添加合適的斷點(diǎn)(響應(yīng)式布局的觸發(fā)點(diǎn))
  • 添加主題支持
  • 添加對(duì)無障礙設(shè)計(jì)的支持
  • 編寫自動(dòng)化測(cè)試，此步驟對(duì)于你的應(yīng)用邏輯與Angular Material UI組建的配合非常重要。

此教程針對(duì)ES5###

本教程假定你已經(jīng)通過clone或者npm install獲取到Angular Material

第一步 載入庫文件###

在HTML文件中引入庫文件的鏈接即可：

<head> 
  <link href="../node_modules/angular-material/angular-material.css" rel="stylesheet" />
</head> 
<body>
  <script src="../node_modules/angular/angular.js" type="text/javascript" ></script>
  <script src="../node_modules/angular-animate/angular-animate.js" type="text/javascript" ></script> 
  <script src="../node_modules/angular-aria/angular-aria.js"   type="text/javascript" ></script> 
  <script src="../node_modules/angular-material/angular-material.js" type="text/javascript" ></script> 
  <script> // Include the dependency upon ngMaterial - important !! 
  angular.module('starterApp', ['ngMaterial']); </script>
</body>

第二步 容器布局###

下面的插圖展示了我們?nèi)绾我?guī)劃布局以及確定應(yīng)用中的主要組件


注意，container#2是一個(gè)普通的div容器，并非Angular Materila的組件

  • 添加 md-toolbar (工具欄)，md-sidenav(側(cè)導(dǎo)航)，md-content(內(nèi)容)容器。md-sidenav容器用戶包含用戶列表，md-content容器用于包含選中用戶的詳情視圖。
  • 添加 layout和flex屬性來指定容器的布局方式和尺寸
  • 使用md-locked-open將側(cè)邊欄導(dǎo)航鎖定在左側(cè)
  • 使用md-whiteframe-z2來為側(cè)邊欄導(dǎo)航添加陰影
<body ng-app="starterApp" layout="column">
  <!-- Container #1 (see wireframe) -->
  <md-toolbar layout="row" >
      <h1>Angular Material - Starter App</h1>
  </md-toolbar>
  <!-- Container #2 -->
  <div flex layout="row">
    <!-- Container #3 -->
    <md-sidenav md-is-locked-open="true" class="md-whiteframe-z2"></md-sidenav> 
    <!-- Container #4 -->
    <md-content flex id="content"></md-content>
   </div>
</body>

這里使用簡單的線框圖來規(guī)劃布局我們需要的組件和屬性。然后使用Angular Material Layout api來對(duì)容器進(jìn)行響應(yīng)式布局。

第三步 常規(guī)HTML

在這一步你將使用常規(guī)的HTML元素和Angular Material UI組件來來渲染和布局每個(gè)容器所需要的子元素。

  • 在md-sideNav容器中顯示一個(gè)用戶列表
    • 使用md-list,md-button,和md-icon 組件并添加偽數(shù)據(jù)
  • 在md-content容器中顯示用戶的偽數(shù)據(jù)

注意：md-sidenav容器是用戶列表的主要視圖，md-content容器是用戶的詳情視圖

<body ng-app="starterApp" layout="column">
  <md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
    <md-list>
      <!-- List item #1 -->
      <md-list-item>
      <md-button>
        <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
        Lia Luogo
      </md-button>
      <!-- List item #2 -->
      <md-list-item>
        <md-button>
          <md-icon md-svg-src="./assets/svg/avatar-4.svg" class="avatar"></md-icon>
          Lawrence Ray
        </md-button>
      </md-list-item>
    </md-list>
  </md-sidenav>
  <md-content flex id="content">
    <!-- User details sample -->
    <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
    <h2>Lia Luogo</h2>
    <p> I love cheese... </p>
  </md-content>
</body>

第四步 動(dòng)態(tài)化與偽數(shù)據(jù)

這一步womenjiangdongtaitihuanchangguideHTML，并注入偽數(shù)據(jù)

  • 建立自定義的應(yīng)用落盡倆在入偽數(shù)據(jù)
  • 創(chuàng)建HTML標(biāo)記來渲染腳本和偽數(shù)據(jù)
    然后你就能整合你的應(yīng)用邏輯
  • 定義一個(gè)Angular模塊'users'并添加到你的代碼中
  • 定義你的數(shù)據(jù)服務(wù)，數(shù)據(jù)模型和控制器
  • 使用script標(biāo)簽加載你的代碼
  • 確定你的'starterApp'模塊同時(shí)注入了'ngMaterial'和'users'
<script src="./src/users/Users.js"></script>
<script src="./src/users/UsersListController.js"></script>
<script src="./src/users/UsersDataservice.js"></script>
<script type="text/javascript">
  angular.module('starterApp', ['ngMaterial', 'users']); 
</script>

然后使用angular指令(如：ng-repeat)將HTML替換為動(dòng)態(tài)標(biāo)記，并使用{{}}注入數(shù)據(jù)

  • Angular將會(huì)編譯并渲染動(dòng)態(tài)HTML標(biāo)記
  • 注冊(cè)一套虛擬圖標(biāo)，每個(gè)用戶都關(guān)聯(lián)一個(gè)虛擬ID
<!-- Wireframe Container #2 -->
<div flex layout="row">
  <!-- Wireframe Container #3 -->
  <md-sidenav md-is-locked-open="true" class="md-whiteframe-4dp">
    <md-list>
      <md-list-item ng-repeat="u in ul.users">
        <md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : u === ul.selected }">
          <md-icon md-svg-icon="{{u.avatar}}" class="avatar"></md-icon>
          {{it.name}}
        </md-button>
      </md-list-item>
    </md-list>
  </md-sidenav>
  <!-- Wireframe Container #4 -->
  <md-content flex id="content">
    <md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
    <h2>{{ul.selected.name}}</h2>
    <p>{{ul.selected.content}}</p>
  </md-content> </div>
<script type="text/javascript">
    angular .module('starterApp', ['ngMaterial', 'users']) .config(function( $mdIconProvider ){ 
      // Register the user `avatar` icons 
      $mdIconProvider .defaultIconSet("./assets/svg/avatars.svg", 128); 
});
 </script>

第五步 使用底部表

第一步，你將會(huì)在用戶詳情區(qū)域添加一個(gè)動(dòng)態(tài)的mbBottomSheet組件，用來向其他用戶展示該用戶的聯(lián)系方式。

  • 在用戶詳情視圖的右上角創(chuàng)建一個(gè)'Share'按鈕
  • 在底部表中創(chuàng)建聯(lián)系用戶視圖和控制器
  • 使用$mdBottomSheet服務(wù)指定并加載底部表
  • 注冊(cè)可能需要的圖標(biāo)

添加share按鈕到視圖中

  <md-content flex id="content">
    <md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
    <h2>{{ul.selected.name}}</h2>
    <p>{{ul.selected.content}}</p>
    <md-button class="share" md-no-ink ng-click="ul.makeContact(ul.selected)">
      <md-icon md-svg-icon="share"></md-icon>
    </md-button>
  </md-content>
  <script type="text/javascript">
    angular .module('starterApp', ['ngMaterial', 'users']) .config(function($mdIconProvider){ 
      $mdIconProvider.icon("share", "./assets/svg/share.svg", 24); });
  </script>

添加makeContact()函數(shù)到控制器中

  function share(selectedUser) { 
    $mdBottomSheet.show({ 
      controllerAs : "vm", 
      controller : [ '$mdBottomSheet', ContactSheetController], 
      templateUrl :'./src/users/view/contactSheet.html',                           
      parent:angular.element(document.getElementById('content'))
    });
    function ContactSheetController( $mdBottomSheet ) {
      this.user = selectedUser;
      this.items = [ 
        { name: 'Phone' , icon: 'phone' , icon_url: 'assets/svg/phone.svg'},
        { name: 'Twitter' , icon: 'twitter' , icon_url: 'assets/svg/twitter.svg'},
        { name: 'Google+' , icon: 'google_plus' , icon_url: 'assets/svg/google_plus.svg'},
        { name: 'Hangout' , icon: 'hangouts' , icon_url: 'assets/svg/hangouts.svg'} ]; 
      this.contactUser = function(action) { 
        // The actually contact process has not been implemented... 
        // so just hide the bottomSheet 
        $mdBottomSheet.hide(action);
      };
    }
  }

第六步 響應(yīng)式布局

Angular Material Layout API 使用flexbox來讓你的DOM容器和元素能流暢地適應(yīng)瀏覽器視圖寬度和高度的變化。它們還是用媒體來定義瀏覽器特定的寬度范圍，讓你的應(yīng)用能適應(yīng)新的視口大小，這些范圍已下面的斷點(diǎn)為定義：


但是對(duì)于使用Angular Material的開發(fā)者來說，使用媒體查詢和斷點(diǎn)顯得太低級(jí)了，所以我們可以使用下面的別名來實(shí)現(xiàn)


在本課中，你將會(huì)使用自適應(yīng)斷點(diǎn)來讓你的應(yīng)用實(shí)現(xiàn)響應(yīng)式布局

  • 在工具欄中添加一個(gè)Menu按鈕

  • 當(dāng)設(shè)備寬度大于600px時(shí)，鎖定用戶列表處于打開狀態(tài)，否則關(guān)閉

    • 使用$mdMedia來幫助實(shí)現(xiàn)這一效果

  • 當(dāng)用戶列表處于打開狀態(tài)時(shí)，隱藏工具欄的menu圖標(biāo)

  • 為menu按鈕添加click響應(yīng)

    • 使用$mdSideNav服務(wù)來切換側(cè)邊欄
    • 當(dāng)用戶被選中時(shí)，自動(dòng)關(guān)閉側(cè)邊欄
  <body>
    <!-- Wireframe Container #1 -->
    <md-toolbar layout="row">
      <md-button class="menu" hide-gt-sm ng-click="ul.toggleList()" >
        <md-icon md-svg-icon="menu" ></md-icon>
      </md-button>
    </md-toolbar>
    <!-- Wireframe Container #2 -->
    <div flex layout="row">
      <!-- Wireframe Container #3 -->
      <md-sidenav md-is-locked-open="$mdMedia('gt-sm')" md-component-id="left" ng-click="ul.toggleList()" >
      </md-sidenav>
      <!-- Wireframe Container #4 -->
      <md-content flex id="content">
         <md-button class="share" md-no-ink ng-click="ul.share(ul.selected)"> 
        </md-button>
      </md-content>
    </div>
  </body>

添加menu圖標(biāo)

  <script type="text/javascript">
     angular .module('starterApp', ['ngMaterial', 'users']) .config(function($mdIconProvider){
      $mdIconProvider.icon("menu", "./assets/svg/menu.svg", 24);
    });
  </script>

使用Layout和out breakpoint aliases和組件服務(wù)

  • hide-gt-sm和$mdMedia('gt-sm)
  • $mdSidenav和$mdMedia

我們很快的創(chuàng)建了一個(gè)不光響應(yīng)尺寸變化還適應(yīng)斷點(diǎn)值變化的應(yīng)用

  function UserController( userService, $mdBottomSheet, $mdSidenav ) { 
    var self = this; 
    self.toggleList = toggleUsersList; 
    // ********************************* 
    // Internal methods 
    // ********************************* 
    /** 
      * Hide or Show the 'left' sideNav area 
      */ 
    function toggleUsersList() { 
      $mdSidenav('left').toggle(); 
    }
  }

第七步 主題無障礙閱讀設(shè)計(jì)

這里你將會(huì)使用特別的，更深的主題

  • 使用$mdTheningProvider服務(wù)來制定特別的主題，使用棕色作為主色，紅色作為強(qiáng)調(diào)色
<script type="text/javascript">
  angular .module('starterApp', ['ngMaterial', 'users']).config(function($mdThemingProvider, $mdIconProvider){
    $mdThemingProvider.theme('default') .primaryPalette('brown') .accentPalette('red');
  });
</script>

總結(jié)

通過以上7步和幾分鐘的工作，我們迅速創(chuàng)建了一個(gè)美麗的、自適應(yīng)的、主題鮮明的、可訪問的以及容易保持的Angualr Material 應(yīng)用

想象下沒有Angular Material做這些會(huì)是什么樣！
(原文的鏈接就是寫的第八步，所以不要問我第八步區(qū)哪了)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容