Angular 4.0 環境搭建

1.安裝node

 

2.angular cli安裝

sudo npm install -g @angular/cli

 

3. 使用ng -v 查看安裝結果

 

4. 創建項目

ng new helloworld

helloworld 為項目名稱

 

 

5.工程目錄結構分析

使用webstorm打開剛才創建的hello工程，工程的目錄結果如下圖

 

目錄介紹

e2e端到端的測試目錄

src  應用源代碼目錄

.editconfig  webstorm的一個配置文件

.angular-cli.json  angular命令行配置文件

karma.conf.js  karma是單元測試執行器， karma.conf.js 是karma的配置文件，用來執行自動化測試

package.json 標准的npm工具的配置文件。 里面定義了第三方依賴包

protractor.conf.js  做自動化測試配置文件

tslint.json 定義ts規范的配置文件

 src目錄

 

app 包含應用的組件和模塊

assets 存放靜態資源，如圖片

environments 環境配置，如開發環境，測試環境，生產環境公用一套代碼

index.html 應用程序的根html

main.ts  應用程序的入口點

polyfills.ts 用來導入一些必要的庫，作用是Angular能正常的運行在老版本的瀏覽器。

style.css  放應用全局的css

test.ts  用來搞自動化測試

tsconfig.json typescript編譯器的配置

 

app下的文件

 

1).組件

app.components.ts 整個應用程序的基礎。 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

（圖片來自慕課網）

 

 2). 模塊

app.module.ts

代碼如下

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

　　

6.項目運行

 1）Webstorm中運行,如下圖，新建npm

 

 點擊運行 ,

 

然后在瀏覽器中打開 http://localhost:4200/

2)使用命令運行

同理在瀏覽器中打開 http://localhost:4200/