未加星标

Build a Material Design app with Angular 2

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

Angular Material is a UI component framework that implements Google's Material Design specification for Angular 2 the new, faster implementation of Angular, written in TypeScript. Although still in alpha, Angular Material already provides a set of reusable and accessible UI components based on Material Design.

Angular 2 itself is designed for use across all platforms (web, mobile and desktop), and has many new technologies associated with it. At the javascript level we have theadditional syntax of ECMAScript 2015 (ES6), typing and interface support from TypeScript, along with decorators from the Metadata Reflection API. It uses observables from the Reactive Extensions library to manage sequences of events in a functional programming way. It uses zones to encapsulate and intercept asynchronous activity to provide a form of thread-local storage, allowing Angular to automagically respond to data changes in asynchronous events to maintain data bindings. Finally, module loading is handled by SystemJS.

In this tutorial we are going to use Angular 2 to create a simple to-do app with some signature Material Design elements.

Get set up

Setting up the initial environment can be difficult. There is an angular2-seed available, as well as an angular2-starter . However, there is something even better: with angular-cli you can configure your Angular 2 project with a single command.

Not only will it take care of the setup for all the technologies I mentioned in the last section (via Node and npm), it will also add in scaffolding for Jasmine unit testing, Protractor end-to-end testing, plus TSLint testing, and codelyzer static code analysis of Angular 2 TypeScript. Although you don’thave touse all of these, you definitely should. It’s so simple to use, you will wonder how you ever got along without it.

Angular CLI is available as an npm package, so you will need to install Node and npm globally on your machine using npm install -g angular-cli . Now create a new Angular 2 app with ng new material2-do . You are going to have to wait a little bit, because after it generates the necessary files, it initialises a Git repo and does an npm install to download all the necessary modules into node_modules/ . Take a look at the package.json and get familiar with the modules and scripts there.

You have now created a new Angular 2 application that follows theofficial best practices.

Add Material Design

The default app knows nothing about Material Design (an oversight I'm sure), so we have to add itourselves. You'll find the full instructionshere.

There is a list of published Angular 2 Material Design packages in the @angular2-material library. Inthis example we are going to use core (required for all Angular Material 2 apps), as well as button , card , checkbox , icon , input , list and toolbar :

npm install --save @angular2-material/{core,button,card,checkbox,icon,input,list,[email protected]

For the vendor bundle to work, we need to add @angular2-material/**/* to the array of vendorNpmFiles in angular-cli-build.js . We also need to add the path to @angular2-material to the maps object:

const map: any = { [email protected]': [email protected]' };

Let SystemJS know how to process new modules by pointing to the main files of each of the packages:

const packages:any = {}; // put the names of any of your Material components here const materialPkgs:string[] = ['core','button','card','checkbox', 'icon','input','list','toolbar']; materialPkgs.forEach((pkg) => { packages[[email protected]/${pkg}`] = {main: `${pkg}.js`}; });

Now it’s time to load the Material Design icon font in the of src/index.html . Any font will work, but we are using the standard Material Design icons:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> Create an MD dialog

We can now work with Material Design in our to-do app. One of the components currently missing from Angular 2 Material Design is a prompt or dialog, so for our first task we will make one!

Let’s create a new component using a Material Design card, a toolbar, an input and a couple of buttons. In the src/app folder of your repo, type ng generate component dialog . This generates a new DialogComponent in src/app/dialog , and adds a barrel to system-config.ts so SystemJS knows how to load it.

If you look at the generated dialog.component.ts file,you will see the first line is: import { Component, OnInit } from [email protected]/core'; . Component is one of the main building blocks of Angular, and OnInit is one of the interfaces it implements. However, in order to have access to communication between nested components, as well as the Material Design components mentioned above, we need to import Input , Output and EventEmitter from @angular/core; and MdCard , MdInput , MdToolbar and MdButton from their corresponding modules in the @angular2- material library.

To render these Material components, we need toinject the directives our DialogComponent requires.Wewill add the following directives to the @Components metadata:

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

We then declare a number of @Input variables ( okText , cancelText and so on) that allow us to define the contents of the dialog. We also need to add one @Output emitter that allows us to trigger a function with a value in the parent component when the dialog is closed.

Now we can replace the generated constructor in dialog.component.ts with the following code:

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

As well as using the @Input variables inside our DialogComponent within the dialog.component.html template, the md-input allows us to accept input fromthe user:

<md-input class="full-width" [placeholder]="placeholder" [(ngModel)]="value" #dialogInput (keyup.enter)="emitValue(value)" (keyup.escape)="emitValue(null)"></md-input>

The md-buttons allow the user to click 'OK', 'Cancel' or whatever you decide to label these buttons:

<button md-button (click)="emitValue(null)" color="primary"> {{cancelText}} </button> <button md-raised-button (click)="emitValue(value)" color="primary"> {{okText}} </button> Notice the keyup event handlers, which take careofthings when the Enter or Escape key is pressed. These handlers are identical to the clic

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Build a Material Design app with Angular 2
本站链接:http://www.codesec.net/view/481283.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(59)