angular2入门

首先下载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: '

<p>

login Works!

</p>

',

styles: []

})

export class LoginComponent implements OnInit {

constructor() { }

ngOnInit() {

}

}

 

组件建成之后，注意上面的代码中@Component修饰配置中的selector:‘app-login’，这意味着我么可以在其他组件的template中使用<app-login></app-login>来引用我们的组件。

现在我们打开app.component.html加入我们的组件引用：

 

<h1>

{{title}}

</h1>

<app-login></app-login>

 

保存后ng serve之后浏览器就会看到我们新加的组件了。

 

简单来说，模块就是提供相对独立功能的功能块，每块聚焦于一个特定业务领域。Angular内建的很多库是以模块形式提供的，比如FormsModule封装了表单处理，HttpModule封装了HTTP的处理，等等。

Angular模块是带有@NgModule装饰器函数的类。@NgModule接收一个元数据对象，该对象告诉Angular如何编译和运行模块代码。它指出模块拥有的组件、指令和管道，并把它们的一部分公开出去，以便外部组件使用它们。它可以向应用的依赖注入器中添加服务提供商。（依赖性注入和服务的概念我们在稍后的章节中讲解，此处暂时略过。）

NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：

·declarations：声明本模块中拥有的视图类。Angular有三种视图类：组件、指令和管道。

·exports：declarations的子集，可用于其他模块的组件模板。

·imports：本模块声明的组件模板需要的类所在的其他模块。

·providers：服务的创建者，并加入到全局服务列表中，可用于应用任何部分。

·bootstrap：指定应用的主视图（称为根组件），它是所有其他视图的宿主。只有根模块才能设置bootstrap属性

按照约定，根模块的类名叫做AppModule，放在app.module.ts文件中。

 

点击事件： 

 

<input #username type="text"> <button （click）="onClick(username.value)">登陆</button>

 

#username 在input里面可以传递input里面输入的值，接收的方式 是username.value

 

在Component内部的onClick方法也要随之改写成一个接受username的方法

 

onClick(username){

    console.log(username.value)

}

 

输入用户名的时候  点击登陆就可以在控制台看到打印出来输入框的值。