全局安裝 Angular CLI 腳手架并創建項目

1.使用 npm 安裝命令

$ npm install -g @angular/cli

2.使用 ng new 項目名 命令創建項目

$ npm new my-app

3.進入創建的項目并運行

$ cd my-app && ng server --open

目錄結構解析

項目結構

文件用途

e2e/	在 e2e/ 下是端到端（End-to-End）測試，它們不在 src/ 下，是因為端到端的測試實際上和應用相互獨立的，它只適用于測試你的應用而已，這也就是為什么它會擁有自己的 tsconfig.json
src	項目的所有文件都放在 src 里面，所有的 Angular 組件、模板、樣式、圖片以及應用所需要的任何東西
node_modules/	Node.js 創建了這個文件夾，并把 package.json 中的依賴模塊都放在這里面
.angular-cli.json	Angular CLI 的配置文件。在這個文件中，我們可以設置一些默認值，還可以配置項目編譯時要包含的那些文件
.editorconfig	用于編輯器的簡單配置文件，它用于確保參與項目的每個人都具有基本的編輯器配置，詳情參見 http://editorconfig.org
.gitignore	Git 配置文件，用于確保某些生成的文件不會被提交到 Git 上
Karma.conf.js	給 Karma 的單元測試配置,當運行 ng test 時會用到
package.json	npm 配置文件。其中列出了項目使用到的第三方依賴包。還可以在這里添加自定義腳本
protractor.conf.js	給 Protractor 使用的的端到端測試配置文件，當運行 ng e2e 時會用到
README.md	項目的基礎文檔
tsconfig.json	TypeScript 編譯器的配置
tslint.json	給 TSLint 和 Codelyzer 用的配置信息，當運行 ng lint 時會用到。Lint 功能可以幫助你保持代碼風格的統一

src 目錄結構

文件用途

app/app.component.{ts,html,css,spec.ts}	組件使用的 HTML 模板、CSS 樣式和單元測試定義 AppComponent 組件。它是根組件
app/app.module.ts	定義 AppModule,這個根模塊會告訴 Angular 如何組裝該應用。目前，它之聲明 AppModule。稍后它還會聲明更多組件
assets/*	靜態資源文件，這個文件夾下可以放如圖片等任何資源，在構建應用時，它們會全都拷貝到發布包中
environments/*	這個文件夾中包括了各個目標環境準備的文件，它們導出了一些應用要用到的配置變量。這些文件會在構建應用時被替換
favicon.ico	站點圖標
main.ts	應用的主要入口點
polyfills.ts	不同的瀏覽器對 Web 標準的支持程度不同。填充庫（polyfill）能幫助我們把這些不同點進行標準化。可以查看 瀏覽器支持指南
style.css	全局樣式
test.ts	單元測試的主要入口點
tsconfig.{app|spec}.json	TypeScript 編譯器的配置文件。tsconfig.app.json 是為 Angular 應用準備的。tsconfig.spec.json 是為單元測試準備的

app.module.ts 代碼分析

// BrowserModule 瀏覽器解析的模塊import { BrowserModule } from '@angular/platform-browser';// angular 核心模塊import { NgModule } from '@angular/core';// 根組件import { AppComponent } from './app.component';@NgModule({// 引入當前項目運行的組件declarations: [AppComponent],// 引入當前模塊運行依賴的其他模塊imports: [BrowserModule],// 定義的服務providers: [],// 根據應用的主視圖（稱為跟組件）通過引導根 AppModule 來啟動應用，這里一般寫的都是跟組件bootstrap: [ AppComponent ]})// 根模塊不需要導出任何東西，因為其他組件組件不需要導入根模塊，但一定要寫export class AppModule { }

創建自定義組件

1.通過 ng g component 組件名稱 命令創建自定義組件

$ ng g component components/header

2.app.module.ts 會自動添加 header 組件的引用

// BrowserModule 瀏覽器解析的模塊import { BrowserModule } from '@angular/platform-browser';// angular 核心模塊import { NgModule } from '@angular/core';// 根組件import { AppComponent } from './app.component';// Header 組件import { HeaderComponent } from './components/header/header.component';@NgModule({// 引入當前項目運行的組件declarations: [AppComponent,HeaderComponent],// 引入當前模塊運行依賴的其他模塊imports: [BrowserModule],// 定義的服務providers: [],// 根據應用的主視圖（稱為根組件）通過引導根 AppModule 來啟動應用，這里一般寫的都是根組件bootstrap: [AppComponent]})// 根模塊不需要導出任何東西，因為其他組件不需要導入根模塊，但一定要寫。export class AppModule { }

3.打開 app/components/header/header.component.ts

// 引入 angular 核心模塊import { Component, OnInit } from '@angular/core';@Component({// 在 HTML 中的引用標簽名稱selector: 'app-header',// 組件 html 模板templateUrl: './header.component.html',// 組件 css 樣式styleUrls: ['./header.component.css']})export class HeaderComponent implements OnInit { // 實現 OnInit 接口// 構造函數constructor() { }// 初始化加載的生命周期ngOnInit() { }}

4.在 app/app.component.html 中引入 header 組件

<app-header></app-header>

5.通過命令運行項目

$ ng server --open

總結

以上是生活随笔為你收集整理的【玩转 Angular】1. Angular-CLI 安装与使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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