建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹了angular12怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、成都做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出尼瀘西免費(fèi)做網(wǎng)站回饋大家。
一、angular環(huán)境配置：
Node => NPM/CNPM => Angular CLI
安裝node.js是使用npm管理項目依賴的軟件包，由于網(wǎng)絡(luò)原因，可使用cnpm作為替代的包管理工具，使用angular CLI 使我們無需理會復(fù)雜的配置，更專注Angular.
安裝完畢后，在控制臺輸入：
npm install -g @angular/cli
查看版本
angular version
二、開發(fā)工具配置：
Vscode 的推薦拓展：
Chrome 的推薦擴(kuò)展：Angular DevTools
方便調(diào)試程序，可在 Chrome 網(wǎng)上應(yīng)用店中找到 Angular DevTools。
三、CLI工程結(jié)構(gòu)：
| -- myProject | -- .editorconfig // 用于在不同編輯器中統(tǒng)一代碼風(fēng)格 | -- .gitignore // git中忽略文件列表 | -- .README.md // Markdown格式的說明文件 | -- .angular.json // angular 的配置文件 | -- .browserslistrc // 配置瀏覽器兼容的文件 | -- .karma.conf.js // 自動化測試框架Karma的配置文件 | -- .package.json // NPM包定義文件 | -- .package-lock.json // 依賴包版本鎖定文件 | -- .tsconfig.app.json // 用于app項目的TypeScript的配置文件 | -- .tsconfig.spec.json // 用于測試的TypeScript的配置文件 | -- .tsconfig.json // 整個工作區(qū)的TypeScript的配置文件 | -- .tsconfig.spec.json // 用于測試的TypeScript的配置文件 | -- .tslint.json // TypeScript的代碼靜態(tài)掃描配置 | -- .e2e // 自動化集成測試項目 | -- .src // 源代碼目錄 | -- .favicon.ico // 收藏圖標(biāo) | -- .index.html // 收藏圖標(biāo) | -- .main.ts // 入口 ts文件 | -- .polyfill.ts // 用于不同瀏覽器兼容版本加載 | -- .style.css // 整個項目的全局的css | -- .test.ts // 測試入口 | -- .app // 工程源碼目錄 | -- .assets // 資源目錄 | -- .environments // 環(huán)境配置 | -- .environments.prod.ts // 生產(chǎn)環(huán)境 | -- .environments.ts // 開發(fā)環(huán)境復(fù)制代碼
四、工程源碼文件結(jié)構(gòu)
1.app目錄：
app目錄是要編寫的代碼目錄。在新建項目時命令行已經(jīng)默認(rèn)生成出來了。
2.app目錄中的app.component.ts：
該文件表示組件，組件是Angular應(yīng)用的基本構(gòu)建模塊，可理解為一段帶有業(yè)務(wù)邏輯和數(shù)據(jù)的html
import { Component,} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}接下來，我們來分析app.component.ts文件中的每一段代碼：
import {Component} from '@angular/core';復(fù)制代碼這段代碼是從Angular核心模塊里面引入了component裝飾器
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})這段代碼是用裝飾器定義了一個組件以及組件的元數(shù)據(jù) 所有的組件都必須使用這個裝飾器來注解，組件元數(shù)據(jù) Angular會通過這里面的屬性來渲染組件并執(zhí)行邏輯
selector是一個css選擇器。表示該組件可通過app-root的HTML標(biāo)簽來調(diào)用，index.html中有個Loading... templateUrl指定了一個html文件作為組件的模板，定義了組件的布局和內(nèi)容。在這里定義app.component.html，最終在index.html中/ app.component.html里面的內(nèi)容。也就是templateUrl所定義的頁面定義了用戶最終看見的頁面的布局和內(nèi)容。styleUrls指定了一組css文件?？梢栽谶@個css中編寫這個組件模板要用到的樣式。也就是app.component.html和app.component.css兩個文件。
export class AppComponent {
title = 'hello Grit';
}這個類實際上就是該組件的控制器，我們的業(yè)務(wù)邏輯就是在這個類中編寫
AppComponent本來就是一個普通的typescript類，但是上面的組件元數(shù)據(jù)裝飾器告訴Angular，AppComponent是一個組件，需要把一些元數(shù)據(jù)加到這個類上，Angular就會把AppComponent當(dāng)組件來處理
3.app文件中的app.module.ts：
該文件表示模塊
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ScrollableTabComponent,ImageSliderComponent } from './components';
@NgModule({
declarations: [
AppComponent,
ScrollableTabComponent,
ImageSliderComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Angular 應(yīng)用是模塊化的，它擁有自己的模塊化系統(tǒng)，稱作 NgModule。每個 Angular 應(yīng)用都至少有一個 NgModule 類，也就是根模塊，在app.module.ts文件中，這個根模塊就可以啟動你的應(yīng)用。
declarations（可聲明對象表） —— 那些屬于本 NgModule 的組件、指令、管道。exports（導(dǎo)出表） —— 那些能在其它模塊的組件模板中使用的可聲明對象的子集。imports（導(dǎo)入表） —— 導(dǎo)入其他模塊providers—— 依賴注入bootstrap—— 設(shè)置根組件
五、項目創(chuàng)建、運(yùn)行
ng new myProject //項目默認(rèn)會新建一個目錄（項目工程） cd myProject ng serve //會啟動開發(fā)環(huán)境下的Http 服務(wù)器復(fù)制代碼
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“angular12怎么用”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
當(dāng)前題目：angular12怎么用
當(dāng)前網(wǎng)址：http://www.dlmjj.cn/article/gegoij.html
