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)

}

 

輸入用戶名的時候  點擊登錄就能夠在控制檯看到打印出來輸入框的值。