翻译自Angular Material官方主页，原文地址
Angular Material官方入门教程，八步打造一个这样的app：####
这个app属于一种MAster-Detail(主-从视图)布局，即左侧是用回列表，有测试用户详情
上面同时还展示了在小尺寸设备上的显示效果。响应式的布局是的我们可以痛过点击菜单按钮将用户列表隐藏，以及痛殴分享按钮显示底部的分享视图。
"如何创建app?"###
有一些广泛使用的、规范化的app开发流程
- 规划你的布局和希望使用到的组件，最好有一套交互设计文档
- 使用常规的HTML和伪造的数据来确保组件能按希望的样式渲染
- 将UI组件整合到你的应用逻辑中，尽可能地和Angular的指令和控制器做到无缝整合。在整合钱，你最好对应用逻辑进行单元测试。
- 添加合适的断点(响应式布局的触发点)
- 添加主题支持
- 添加对无障碍设计的支持
- 编写自动化测试，此步骤对于你的应用逻辑与Angular Material UI组建的配合非常重要。
此教程针对ES5###
本教程假定你已经通过clone或者npm install获取到Angular Material
第一步 载入库文件###
在HTML文件中引入库文件的链接即可：
第二步 容器布局###
下面的插图展示了我们如何规划布局以及确定应用中的主要组件
注意，container#2是一个普通的div容器，并非Angular Materila的组件
- 添加
md-toolbar(工具栏)，md-sidenav(侧导航)，md-content(内容)容器。md-sidenav容器用户包含用户列表，md-content容器用于包含选中用户的详情视图。 - 添加 layout和flex属性来指定容器的布局方式和尺寸
- 使用
md-locked-open将侧边栏导航锁定在左侧 - 使用
md-whiteframe-z2来为侧边栏导航添加阴影
Angular Material - Starter App
这里使用简单的线框图来规划布局我们需要的组件和属性。然后使用Angular Material Layout api来对容器进行响应式布局。
第三步 常规HTML
在这一步你将使用常规的HTML元素和Angular Material UI组件来来渲染和布局每个容器所需要的子元素。
- 在
md-sideNav容器中显示一个用户列表- 使用
md-list,md-button,和md-icon组件并添加伪数据
- 使用
- 在
md-content容器中显示用户的伪数据
注意：md-sidenav容器是用户列表的主要视图，md-content容器是用户的详情视图
Lia Luogo
I love cheese...
第四步 动态化与伪数据
这一步womenjiangdongtaitihuanchangguideHTML，并注入伪数据
- 建立自定义的应用落尽俩在入伪数据
- 创建HTML标记来渲染脚本和伪数据
然后你就能整合你的应用逻辑 - 定义一个Angular模块'users'并添加到你的代码中
- 定义你的数据服务，数据模型和控制器
- 使用script标签加载你的代码
- 确定你的'starterApp'模块同时注入了'ngMaterial'和'users'
然后使用angular指令(如：ng-repeat)将HTML替换为动态标记，并使用{{}}注入数据
- Angular将会编译并渲染动态HTML标记
- 注册一套虚拟图标，每个用户都关联一个虚拟ID
{{ul.selected.name}}
{{ul.selected.content}}
第五步 使用底部表
第一步，你将会在用户详情区域添加一个动态的mbBottomSheet组件，用来向其他用户展示该用户的联系方式。
- 在用户详情视图的右上角创建一个'Share'按钮
- 在底部表中创建联系用户视图和控制器
- 使用$mdBottomSheet服务指定并加载底部表
- 注册可能需要的图标
添加share按钮到视图中
{{ul.selected.name}}
{{ul.selected.content}}
添加makeContact()函数到控制器中
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);
};
}
}
第六步 响应式布局
Angular Material Layout API 使用flexbox来让你的DOM容器和元素能流畅地适应浏览器视图宽度和高度的变化。它们还是用媒体来定义浏览器特定的宽度范围，让你的应用能适应新的视口大小，这些范围已下面的断点为定义：
但是对于使用Angular Material的开发者来说，使用媒体查询和断点显得太低级了，所以我们可以使用下面的别名来实现
在本课中，你将会使用自适应断点来让你的应用实现响应式布局
在工具栏中添加一个Menu按钮
-
当设备宽度大于600px时，锁定用户列表处于打开状态，否则关闭
- 使用
$mdMedia来帮助实现这一效果
- 使用
当用户列表处于打开状态时，隐藏工具栏的menu图标
-
为menu按钮添加
click响应- 使用
$mdSideNav服务来切换侧边栏 - 当用户被选中时，自动关闭侧边栏
- 使用
添加menu图标
使用Layout和out breakpoint aliases和组件服务
-
hide-gt-sm和$mdMedia('gt-sm) -
$mdSidenav和$mdMedia
我们很快的创建了一个不光响应尺寸变化还适应断点值变化的应用
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();
}
}
第七步 主题无障碍阅读设计
这里你将会使用特别的，更深的主题
- 使用
$mdTheningProvider服务来制定特别的主题，使用棕色作为主色，红色作为强调色
总结
通过以上7步和几分钟的工作，我们迅速创建了一个美丽的、自适应的、主题鲜明的、可访问的以及容易保持的Angualr Material 应用
想象下没有Angular Material做这些会是什么样！
(原文的链接就是写的第八步，所以不要问我第八步区哪了)