您好,登錄后才能下訂單哦!
這篇文章主要介紹了angular12怎么用,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
Node => NPM/CNPM => Angular CLI
安裝node.js是使用npm管理項(xiàng)目依賴的軟件包,由于網(wǎng)絡(luò)原因,可使用cnpm作為替代的包管理工具,使用angular CLI 使我們無需理會復(fù)雜的配置,更專注Angular.
安裝完畢后,在控制臺輸入:
npm install -g @angular/cli
查看版本
angular version
Vscode 的推薦拓展:
Chrome 的推薦擴(kuò)展:Angular DevTools
方便調(diào)試程序,可在 Chrome 網(wǎng)上應(yīng)用店中找到 Angular DevTools。
| -- 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項(xiàng)目的TypeScript的配置文件 | -- .tsconfig.spec.json // 用于測試的TypeScript的配置文件 | -- .tsconfig.json // 整個(gè)工作區(qū)的TypeScript的配置文件 | -- .tsconfig.spec.json // 用于測試的TypeScript的配置文件 | -- .tslint.json // TypeScript的代碼靜態(tài)掃描配置 | -- .e2e // 自動化集成測試項(xiàng)目 | -- .src // 源代碼目錄 | -- .favicon.ico // 收藏圖標(biāo) | -- .index.html // 收藏圖標(biāo) | -- .main.ts // 入口 ts文件 | -- .polyfill.ts // 用于不同瀏覽器兼容版本加載 | -- .style.css // 整個(gè)項(xiàng)目的全局的css | -- .test.ts // 測試入口 | -- .app // 工程源碼目錄 | -- .assets // 資源目錄 | -- .environments // 環(huán)境配置 | -- .environments.prod.ts // 生產(chǎn)環(huán)境 | -- .environments.ts // 開發(fā)環(huán)境復(fù)制代碼
app目錄是要編寫的代碼目錄。在新建項(xiàng)目時(shí)命令行已經(jīng)默認(rèn)生成出來了。
該文件表示組件,組件是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'] })
這段代碼是用裝飾器定義了一個(gè)組件以及組件的元數(shù)據(jù) 所有的組件都必須使用這個(gè)裝飾器來注解,組件元數(shù)據(jù) Angular會通過這里面的屬性來渲染組件并執(zhí)行邏輯
selector
是一個(gè)css選擇器。表示該組件可通過app-root
的HTML標(biāo)簽來調(diào)用,index.html
中有個(gè)<app-root>Loading...</app-root>
標(biāo)簽,這個(gè)標(biāo)簽用來展示該組件的內(nèi)容。
templateUrl
指定了一個(gè)html文件作為組件的模板,定義了組件的布局和內(nèi)容。在這里定義app.component.html
,最終在index.html
中<app-root>/<app-root>
這個(gè)標(biāo)簽的內(nèi)容將展示app.component.html
里面的內(nèi)容。也就是templateUrl所定義的頁面定義了用戶最終看見的頁面的布局和內(nèi)容。
styleUrls
指定了一組css文件??梢栽谶@個(gè)css中編寫這個(gè)組件模板要用到的樣式。也就是app.component.html
和app.component.css
兩個(gè)文件。
export class AppComponent { title = 'hello Grit'; }
這個(gè)類實(shí)際上就是該組件的控制器,我們的業(yè)務(wù)邏輯就是在這個(gè)類中編寫
AppComponent
本來就是一個(gè)普通的typescript類,但是上面的組件元數(shù)據(jù)裝飾器告訴Angular,AppComponent是一個(gè)組件,需要把一些元數(shù)據(jù)加到這個(gè)類上,Angular就會把AppComponent當(dāng)組件來處理
該文件表示模塊
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。每個(gè) Angular 應(yīng)用都至少有一個(gè) NgModule 類,也就是根模塊,在app.module.ts文件中,這個(gè)根模塊就可以啟動你的應(yīng)用。
declarations
(可聲明對象表) —— 那些屬于本 NgModule 的組件、指令、管道。
exports
(導(dǎo)出表) —— 那些能在其它模塊的組件模板中使用的可聲明對象的子集。
imports
(導(dǎo)入表) —— 導(dǎo)入其他模塊
providers
—— 依賴注入
bootstrap
—— 設(shè)置根組件
ng new myProject //項(xiàng)目默認(rèn)會新建一個(gè)目錄(項(xiàng)目工程) cd myProject ng serve //會啟動開發(fā)環(huán)境下的Http 服務(wù)器復(fù)制代碼
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“angular12怎么用”這篇文章對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。