使用NG2之前需要安裝node以及Npm環境，并到node下下載ng2所需要得文件，具體配置請到https://angular.cn/docs/ts/latest/quickstart.html按照提示操作，安裝完畢并創建后各種目錄后，正式開始編寫第一個HelloWordl;

ng2是基于typescript，文件以ts結尾代表typesript文件，啟動Npm start后，node會監視目錄下的文件變得將ts編譯為js文件

首先創建根模塊文件app/app.module.ts，?每個Angular2的應用都至少有一個模塊即跟模塊。?

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
imports: [ BrowserModule ]
})
export?class AppModule { }

?

//import2行表示從目錄中引入我們所需得文件，import是ES6關鍵字，經過編譯后會被轉化為ES5的require,形式如下：

//var core = require('@angular/core');

//var bsmodule = require('@angular/platform-browser');

?

//@NgModule：意思為告訴Angular如何去編譯和運行代碼。模塊內部可以包含組件、指令、管道，并且可以將它們的訪問權限聲明為公有，以使外部模塊的組件可以訪問和使用到它們；

NgModule的主要屬性如下：北京聯盟 http://www.010lm.com/

• declarations：模塊內部Components/Directives/Pipes的列表，聲明一下這個模塊內部成員

• providers：指定應用程序的根級別需要使用的service。（Angular2中沒有模塊級別的service，所有在NgModule中聲明的Provider都是注冊在根級別的Dependency Injector中）

• imports：導入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的組件中被使用。比如導入CommonModule后就可以使用NgIf、NgFor等指令。

• exports：用來控制將哪些內部成員暴露給外部使用。導入一個module并不意味著會自動導入這個module內部導入的module所暴露出的公共成員。除非導入的這個module把它內部導入的module寫到exports中。

• bootstrap：通常是app啟動的根組件，一般只有一個component。bootstrap中的組件會自動被放入到entryComponents中。

• entryCompoenents: 不會再模板中被引用到的組件。這個屬性一般情況下只有ng自己使用，一般是bootstrap組件或者路由組件，ng會自動把bootstrap、路由組件放入其中。 除非不通過路由動態將component加入到dom中，否則不會用到這個屬性

項目是運行在瀏覽器中的 Web 應用，所以根模塊需要從?@angular/platform-browser?中導入?BrowserModule?并添加到?imports?數組中;

//export?也是es6的關鍵字，表示導出，以使得其他組件或者模塊可以導入(import）；

接著創建根組件app/app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: '<h1>hello wordl</h1>'
})

export class AppComponent { }

//@Component表示將一份數據關聯到導出的AppComponent，雖然此處AppComponent導出內容為空，但實際上@Component中的內容由于與之關聯，因此里面的selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'實際上也一起導出，可供外部使用了；

//selector: 'my-app' ?指my-app標簽，即<my-app></my-app>;

select還可以使用屬性以及類，如selector:".example"或者selector:"[ example ]",代表類名為或者屬性為example的標簽；

//template：要渲染的模板，如<h1>12345</h1>則表示將上面對應的seletor的innerhtml渲染為<h1>12345</h1>，

temlpate為聯寫法，還可以寫為外部引入寫法：templateUrl:"../index.html", 這樣寫需要先定義好一個html文件，其內容為<h1>12345</h1>，并引入;

?

組件寫好后，需要在根模塊下將寫好的組件引入，在app/app.module.ts下import { AppComponent } from './app.component';
并修改:@NgModule({imports: [ BrowserModule ]

? ? ? ? ? ? ,declarations: [ AppComponent ],

? ? ? ? ? ? ?bootstrap: [ AppComponent ]

? ? ? ? ? ? }

? ? ? ? ? )

?

最后添加新文件main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

?

至此就可以啟動應用了，在npm下輸入npm start等待幾秒即可

?

轉載于:https://www.cnblogs.com/zhengrunlin/p/5901019.html

總結

以上是生活随笔為你收集整理的angular2.0学习日记1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。