翻譯自Angular Material官方主頁(yè)，原文地址
Angular Material官方入門教程，八步打造一個(gè)這樣的app：####
這個(gè)app屬于一種MAster-Detail(主-從視圖)布局，即左側(cè)是用回列表威彰，有測(cè)試用戶詳情
上面同時(shí)還展示了在小尺寸設(shè)備上的顯示效果。響應(yīng)式的布局是的我們可以痛過(guò)點(diǎn)擊菜單按鈕將用戶列表隱藏，以及痛毆分享按鈕顯示底部的分享視圖结榄。
"如何創(chuàng)建app?"###
有一些廣泛使用的、規(guī)范化的app開(kāi)發(fā)流程
- 規(guī)劃你的布局和希望使用到的組件囤捻，最好有一套交互設(shè)計(jì)文檔
- 使用常規(guī)的HTML和偽造的數(shù)據(jù)來(lái)確保組件能按希望的樣式渲染
- 將UI組件整合到你的應(yīng)用邏輯中臼朗，盡可能地和Angular的指令和控制器做到無(wú)縫整合。在整合錢，你最好對(duì)應(yīng)用邏輯進(jìn)行單元測(cè)試视哑。
- 添加合適的斷點(diǎn)(響應(yīng)式布局的觸發(fā)點(diǎn))
- 添加主題支持
- 添加對(duì)無(wú)障礙設(shè)計(jì)的支持
- 編寫(xiě)自動(dòng)化測(cè)試绣否，此步驟對(duì)于你的應(yīng)用邏輯與Angular Material UI組建的配合非常重要。
此教程針對(duì)ES5###
本教程假定你已經(jīng)通過(guò)clone或者npm install獲取到Angular Material
第一步 載入庫(kù)文件###
在HTML文件中引入庫(kù)文件的鏈接即可：
<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屬性來(lái)指定容器的布局方式和尺寸
- 使用
md-locked-open將側(cè)邊欄導(dǎo)航鎖定在左側(cè) - 使用
md-whiteframe-z2來(lái)為側(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>
這里使用簡(jiǎn)單的線框圖來(lái)規(guī)劃布局我們需要的組件和屬性苹支。然后使用Angular Material Layout api來(lái)對(duì)容器進(jìn)行響應(yīng)式布局。
第三步 常規(guī)HTML
在這一步你將使用常規(guī)的HTML元素和Angular Material UI組件來(lái)來(lái)渲染和布局每個(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)記來(lái)渲染腳本和偽數(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組件狼速，用來(lái)向其他用戶展示該用戶的聯(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來(lái)讓你的DOM容器和元素能流暢地適應(yīng)瀏覽器視圖寬度和高度的變化黍氮。它們還是用媒體來(lái)定義瀏覽器特定的寬度范圍唐含，讓你的應(yīng)用能適應(yīng)新的視口大小，這些范圍已下面的斷點(diǎn)為定義：
但是對(duì)于使用Angular Material的開(kāi)發(fā)者來(lái)說(shuō)沫浆，使用媒體查詢和斷點(diǎn)顯得太低級(jí)了捷枯，所以我們可以使用下面的別名來(lái)實(shí)現(xiàn)
在本課中，你將會(huì)使用自適應(yīng)斷點(diǎn)來(lái)讓你的應(yīng)用實(shí)現(xiàn)響應(yīng)式布局
在工具欄中添加一個(gè)Menu按鈕
-
當(dāng)設(shè)備寬度大于600px時(shí)专执，鎖定用戶列表處于打開(kāi)狀態(tài)淮捆，否則關(guān)閉
- 使用
$mdMedia來(lái)幫助實(shí)現(xiàn)這一效果
- 使用
當(dāng)用戶列表處于打開(kāi)狀態(tài)時(shí)，隱藏工具欄的menu圖標(biāo)
-
為menu按鈕添加
click響應(yīng)- 使用
$mdSideNav服務(wù)來(lái)切換側(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();
}
}
第七步 主題無(wú)障礙閱讀設(shè)計(jì)
這里你將會(huì)使用特別的攀痊，更深的主題
- 使用
$mdTheningProvider服務(wù)來(lái)制定特別的主題，使用棕色作為主色拄显，紅色作為強(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é)
通過(guò)以上7步和幾分鐘的工作苟径，我們迅速創(chuàng)建了一個(gè)美麗的、自適應(yīng)的躬审、主題鮮明的棘街、可訪問(wèn)的以及容易保持的Angualr Material 應(yīng)用
想象下沒(méi)有Angular Material做這些會(huì)是什么樣蟆盐！
(原文的鏈接就是寫(xiě)的第八步，所以不要問(wèn)我第八步區(qū)哪了)
