环境准备

node.js

因为angular2需要支持ES6,因此node版本建议用6以上的版本,我这边使用的版本是v6.9.1。

python

对你没有看错,我们需要准备python环境,因为需要用到angular-cli,这个东西安装的时候会用到python,如果没有准备python环境安装会直接报错,我这边环境是Python 2.7.13版。
设置好python环境变量这里用windows为例在系统变量中增加PYTHON变量,对应你的python安装目录就可以了,然后在PATH变量中增加%PYTHON%,如下图:


测试是否安装成功,在命令控制台输入python:
C:\>python
出现如下文字就说明安装成功了:

安装angular-cli

npm install -g angular-cli

至此环境就已经准备完毕。

创建项目

现在可以使用angular-cli自动创建一个angular2的新项目
ng new my-project
执行完毕后如下图

安装angular官方的UI组件

npm install --save @angular/material

在项目文件中引入angular官方UI组件

修改src/app/app.module.ts文件,加入如下代码
import { MaterialModule } from '@angular/material'; // other imports @NgModule({ imports: [MaterialModule.forRoot()], ... }) export class PizzaPartyAppModule { }

至此安装工作告一段落,下面介绍下angular-cli的几个简单命令。

Angular-cli

angular2提供了一个好用的命令工具Angular-cli,提供了一些常用的项目工程命令,包括项目的创建(刚才已经用到过ng new 命令)、构建、测试、开发调试环境、甚至还包括github pages的发布命令,相当强大

新建项目

ng new myProject

启动开发调试环境

ng serve

生成组件

ng generate component component-name
该命令用于创建一个Angular2的标准组件,Angular2的一切都是基于组件,组件化是Angular2的核心概念

构建项目

ng build

运行测试代码

ng test

端到端测试

ng e2e angular-cli提供端到端测试是基于Protractor的

发布github pages

ng github-pages:deploy

帮助命令

ng help
这个可以查看所有命令的用法

我们运行一下ng serve看看吧,经过一段时间的等待(我这边环境大约等了30秒左右,真够慢的。。。),出现如下文字表示启动成功,现在我们可以访问我们的应用了。
浏览器打开网址 http://localhost:4200/ 然后可以看到出现如下文字:

嗯,现在我真的在工作了,开始增加一些小玩意儿吧。

添加一个表单应用

首先重新把开发环境关闭

引入皮肤样式

找到src/styles.css文件,添加一行代码
@import '~@angular/material/core/theming/prebuilt/purple-green.css';
这样皮肤文件就可以在编译运行的时候被自动加载到应用上了

修改Html

找到src/app/app.component.html文件,在文件中加入下面代码
<md-card><md-card-content><h2 class="example-h2">Checkbox configuration</h2><section class="example-section"><md-checkbox class="example-margin" [(ngModel)]="checked">Checked</md-checkbox><md-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</md-checkbox></section></md-card-content></md-card>

修改TS文件

import { Component } from '@angular/core';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent {
title = 'app works !'; checked = true; indeterminate = false; align = 'start'; disabled = false; slide = true; }

修改CSS文件

.example-h2 {margin: 10px;} .example-section{display: flex;align-content:center;align-items: center;height: 60px;} .example-margin {margin: 0 10px;}

现在可以启动开发环境了

ng serve等待编译结果,重新打开页面 http://localhost:4200/
效果如下图

差不多现在你应该了解最简单的angular2如何开始了,这里只做一个最基础的引路,更多详细的使用就靠各位自己去尝试做一些应用了。

参考资料

material getting-started