首先下载node。直接官网上下载最新版的node即可   控制台输入node -v 查看node版本（查看node是不是安装成功）  npm install nrm -g 下载nrm    nrm ls 查看下载源  nrm use 切换下载源 全局下载npm install-g angular-cli   然后命令行执行ng new angular2-hello 新建一个angular2-hello的项目。   重新回到命令行，在根目录 ng serve  然后打开浏览器打开浏览器输入http://localhost:4200 就可以看到程序运行成功了。这是自动生成的 手动生成的需要打开app.component.ts修改title，保存后返回浏览器 再次运行ng serve 即可看到。     第一个组件     现在，我们可以为我们的app增加一个component，在命令行创窗口输入ng generate component  xxx--inline-template--inline-style （缩写是ng g c xxx）。参数generate是用来生成文件的，参数component是说明我们要生成一个组件 xxx是我们组件名称，后面的两个参数是告诉angular-cli：生成组件的HTML模板和css样式和组件放在同一个文件中（其实分开文件更清晰，默认是分开的。不加后面的参数就是分开的）。   import { Component, OnInit } from '@angular/core';   //@Component是Angular提供的装饰器函数， 用来描述Compoent的元数据 //其中selector是指这个组件的在HTML模板中的标签是什么 //template是嵌入(inline)的HTML模板， 如果使用单独文件可用templateUrl //styles是嵌入(inline)的CSS样式， 如果使用单独文件可用styleUrls @Component({ selector: 'app-login', template: '

login Works!

', styles: [] }) export class LoginComponent implements OnInit { constructor() { } ngOnInit() { } }   组件建成之后，注意上面的代码中@Component修饰配置中的selector:‘app-login’，这意味着我么可以在其他组件的template中使用来引用我们的组件。 现在我们打开app.component.html加入我们的组件引用：  

{{title}}

  保存后ng serve之后浏览器就会看到我们新加的组件了。   简单来说，模块就是提供相对独立功能的功能块，每块聚焦于一个特定业务领域。Angular内建的很多库是以模块形式提供的，比如FormsModule封装了表单处理，HttpModule封装了HTTP的处理，等等。 Angular模块是带有@NgModule装饰器函数的类。@NgModule接收一个元数据对象，该对象告诉Angular如何编译和运行模块代码。它指出模块拥有的组件、指令和管道，并把它们的一部分公开出去，以便外部组件使用它们。它可以向应用的依赖注入器中添加服务提供商。（依赖性注入和服务的概念我们在稍后的章节中讲解，此处暂时略过。） NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是： ·declarations：声明本模块中拥有的视图类。Angular有三种视图类：组件、指令和管道。 ·exports：declarations的子集，可用于其他模块的组件模板。 ·imports：本模块声明的组件模板需要的类所在的其他模块。 ·providers：服务的创建者，并加入到全局服务列表中，可用于应用任何部分。 ·bootstrap：指定应用的主视图（称为根组件），它是所有其他视图的宿主。只有根模块才能设置bootstrap属性 按照约定，根模块的类名叫做AppModule，放在app.module.ts文件中。   点击事件：    登陆   #username 在input里面可以传递input里面输入的值，接收的方式 是username.value   在Component内部的onClick方法也要随之改写成一个接受username的方法   onClick(username){     console.log(username.value) }   输入用户名的时候  点击登陆就可以在控制台看到打印出来输入框的值。