跳到主要内容

使用Angular 2构建Material Design应用程序

Laptop and phone screens with Angular logo

Angular Material是一个UI组件框架,它实现了Angular 2的Google Material Design规范 - 用TypeScript编写的新的,更快的Angular实现。虽然仍处于alpha状态,但Angular Material已经提供了一组基于Material Design的可重用且可访问的UI组件。

Angular 2本身设计用于所有平台(Web,移动和桌面),并且具有许多与之相关的新技术。在JavaScript级别,我们有ECMAScript 2015(ES6)的附加语法,TypeScript的输入和界面支持,以及Metadata Reflection API中的装饰器。它使用Reactive Extensions库中的observable以函数式编程方式管理事件序列。它使用区域来封装和拦截异步活动,以提供一种线程本地存储形式,允许Angular自动响应异步事件中的数据更改以维护数据绑定。最后,模块加载由SystemJS处理。

在本教程中,我们将使用Angular 2创建一个带有一些签名Material Design元素的简单待办事项应用程序。在这里获取源文件

设置好

设置初始环境可能很困难。有一个Angular2种子可用,以及Angular2起动。然而,还有更好的东西:有角-CLI您可以使用单个命令配置Angular 2项目。

它不仅会照顾我在上一节(通过Node和npm)中提到的所有技术的设置,还会添加脚手架用于Jasmine单元测试,Protractor端到端测试,以及TSLint测试,以及codelyzer Angular 2 TypeScript的静态代码分析。虽然你不必使用所有这些,但你绝对应该这样做。它使用起来非常简单,你会想知道如果没有它你会如何相处。

Angular CLI作为npm包提供,因此您需要在您的计算机上全局安装Node和npmnpm install -g angular-cli。现在创建一个新的Angular 2应用程序ng new material2-do。你将不得不等待一段时间,因为在它生成必要的文件后,它会初始化一个Git Repo并执行一个Npm安装将所有必要的模块下载到Node_modules /。看看吧的package.json并熟悉那里的模块和脚本。

您现在已经创建了一个遵循官方最佳实践的新Angular 2应用程序。

添加材料设计

默认应用程序对Material Design一无所知(我确信这是疏忽),所以我们必须自己添加它。

有一个已发布的Angular 2 Material Design包列表@ Angular2材料图书馆。在这个例子中我们将使用核心(所有Angular Material 2应用程序都需要),以及按键复选框图标输入名单工具栏

npm install --save @ angular2-material / {core,button,card,checkbox,icon,input,list,toolbar} @ 2.0.0-alpha.5

要使供应商包工作,我们需要添加@ Angular2材料/ ** / *到数组VendorNpmFiles角-CLI-build.js。我们还需要添加路径@ Angular2材料到了地图宾语:

const map:any = {'@ angular2-material':'vendor / @ angular2-material'};

让SystemJS知道如何通过指向每个包的主文件来处理新模块:

const包:any = {}; //在此处输入任何材质成分的名称const materialPkgs:string [] = ['core','button','card','checkbox','icon','input','list','toolbar “]; materialPkgs.forEach((pkg)=> {packages [`@ angular2-material / $ {pkg}`] = {main:`$ {pkg} .js`};});

现在是时候加载Material Design图标字体了SRC / Index.html的。任何字体都可以使用,但我们使用标准的Material Design图标:

创建MD对话框

我们现在可以在我们的待办事项应用程序中使用Material Design。 Angular 2 Material Design目前缺少的一个组件是提示或对话框,因此对于我们的第一个任务,我们将制作一个!

让我们使用Material Design卡,工具栏,输入和几个按钮创建一个新组件。在里面SRC /应用您的仓库的文件夹,类型Ng生成组件对话框。这会产生一个新的DialogComponentSRC /应用/对话框,并添加一桶系统config.ts所以SystemJS知道如何加载它。

如果你看看生成的Dialog.component.ts文件,你会看到第一行是:Import {Component,OnInit}'@角/芯';零件是Angular的主要构建块之一的OnInit是它实现的接口之一。但是,为了能够访问嵌套组件之间的通信,以及上面提到的Material Design组件,我们需要导入Input,产量EventEmitter@角/芯;MdCardMdInputMdToolbarMdButton从他们相应的模块中@ Angular2-材料图书馆。

要渲染这些Material组件,我们需要注入指令DialogComponent需要。我们将以下指令添加到@组件元数据:

templateUrl:'dialog.component.html',指令:[MdCard,MdToolbar,MdInput,MdButton],styleUrls:['dialog.component.css']

然后我们宣布一些@input变量(OkTextCancelText等等)允许我们定义对话框的内容。我们还需要添加一个@Output发射器,允许我们在关闭对话框时触发父组件中具有值的函数。

现在我们可以替换生成的构造函数Dialog.component.ts使用以下代码:

constructor(){this.okText ='OK'; this.cancelText ='取消'; } emitValue(value){this.valueEmitted.emit(value); }

以及使用@input我们内部的变量DialogComponent在...内Dialog.component.html模板,MD-输入允许我们接受用户的输入:

MD-按钮允许用户单击“确定”,“取消”或您决定标记这些按钮的任何内容:

 

请注意KEYUP事件处理程序,按下Enter或Escape键时处理事情。这些处理程序与点击事件处理程序CancelTextOkText。逃脱与取消相同(emitValue(null)),点击Enter将与单击OK具有相同的结果(emitValue(value))。这允许我们提示用户通过MD-输入,并接收发出的输出。

我们可以看到许多Material Design组件的示例:MD卡MD-按钮, 等等。我们还需要添加一些CSSDialog.component.css为了实现我们想要的布局 - 您可以在随附的GitHub仓库中查看完整代码。

现在让我们加上这个DialogComponent材料2-do.component.html看看它的样子:

 

请注意,我们有所有的文字字符串@Inputs。这些要求我们使用单引号和双引号,否则Angular会将内容解释为变量名零件范围。

我们也有一个发射的@Output。这使对话框变得简单且极其可配置。如果省略,大多数输入将默认为空字符串。

我们来修改吧Material2DoComponent。我们需要导入DialogComponent并将其声明为指令,否则Material2DoComponent将无法呈现它。我们还将添加日志功能:

log(text){console.log(text); }

我们来看看我们的手工作品。您可以通过运行来提供应用程序(默认端口为4200)Npm Run-script Start,反过来运行Ng服务器。如果打开控制台,则可以看到记录的内容:单击“是”时会发出输入内容空值单击“否”时会发出。

我们现在准备使用这个新的DialogComponent创建我们的待办事项应用程序。

创建主应用程序

我们将为主应用程序使用以下MD组件:工具栏名单项目清单复选框按键图标图标注册表,及其依赖,HTTP_PROVIDER,来自Angular HTTP库。所以这些需要添加到导入部分Material2DoComponent

再一次,为了能够渲染这些组件,我们需要将它们包含在@组件元数据指令数组与DialogComponent,我们刚刚添加:

指令:[MdCard,MdToolbar,MdList,MdListItem,MdCheckbox,MdButton,MdIcon,DialogComponent],

获得访问权限MdIconRegistry,我们需要注入它HTTP_PROVIDERS,通过@组件元数据供应商数组:

提供者:[MdIconRegistry,HTTP_PROVIDERS],

现在我们利用我们的DialogComponent,为简单的待办事项应用添加足够的逻辑。该TodoDialog调用打开我们的对话框,或者编辑任务(去做) 要么空值如果我们要创建一个新的。

我们为新任务设置了默认变量,或者如果我们正在编辑任务,我们会相应地更改它们。然后我们展示了DialogComponent通过设置的ShowDialog变量到真正

todoDialog(todo = null){this.okButtonText ='创建任务'; this.fieldValue =''; this.editingTodo = todo; if(todo){this.fieldValue = todo.title; this.okButtonText ='编辑任务'; } this.showDialog = true; }

UpdateTodo当我们想要关闭它时调用函数。其他功能(EditTodoAddTodoHideDialog)是辅助方法UpdateTodo

updateTodo(title){if(title){title = title.trim(); if(this.editingTodo){this.editTodo(title); } else {this.addTodo(title); this.hideDialog(); }

材料2-do.component.html我们给了我们的申请MD-工具栏我们把标题放在哪里,和MD-图标(这看起来像一个加号)我们的浮动操作按钮(FAB),它允许我们创建一个新任务:

  

我们用MD-卡内容持有一个MD-列表* NgFor迭代并显示我们的Todolist的数组为MD-列表项

MD-复选框使我们能够勾选列表中的项目。我们有两个MD-迷你晶圆厂我们可以用来删除和编辑任务的按钮:Md-icons Delete_foreverMode_edit

    

使用一点CSS,这些保持隐藏,直到你翻转(或点击)。您可以在repo中看到代码。

往前走

由于Angular Material 2仍处于alpha状态,因此缺少一些东西 - 特别是签名的MD按钮波纹效果。虽然API可能会发生重大变化,但它的功能非常强大。它还要求拥有一个简单的API,不会让开发人员感到困惑,并且很容易用于创建外观漂亮的应用程序。

本文最初发布于net的第284期,这是世界上最畅销的网页设计师和开发者杂志。在这里订阅

相关文章:



翻译字数超限