站長(zhǎng)資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        如何快速入門(mén)angular12?入門(mén)指南分享

        如何快速入門(mén)angular12?本篇文章就來(lái)介紹一下angular12,手把手教你快速入門(mén)angular12,有需要的可以參考~

        如何快速入門(mén)angular12?入門(mén)指南分享

        該文章主要面向?qū)?angular感興趣前端童鞋。在國(guó)內(nèi),大多企業(yè)使用的技術(shù)棧是vue、react,鮮有公司使用angular,而我恰好用到,故記錄并分享。【相關(guān)教程推薦:《angular教程》】

        通過(guò)這篇文章,你能了解到以下幾點(diǎn):

        • angular環(huán)境配置
        • 開(kāi)發(fā)工具配置
        • CLI工程結(jié)構(gòu)
        • 工程源碼文件結(jié)構(gòu)
        • 項(xiàng)目創(chuàng)建

        一、angular環(huán)境配置:

        Node => NPM/CNPM => Angular CLI

        • 安裝node.js是使用npm管理項(xiàng)目依賴(lài)的軟件包,由于網(wǎng)絡(luò)原因,可使用cnpm作為替代的包管理工具,使用angular CLI 使我們無(wú)需理會(huì)復(fù)雜的配置,更專(zhuān)注Angular.
        • 安裝完畢后,在控制臺(tái)輸入:
        npm install -g @angular/cli
        • 查看版本
        angular version

        如何快速入門(mén)angular12?入門(mén)指南分享

        二、開(kāi)發(fā)工具配置:

        • Vscode 的推薦拓展:

        如何快速入門(mén)angular12?入門(mén)指南分享

        • 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格式的說(shuō)明文件     | -- .angular.json  // angular 的配置文件     | -- .browserslistrc  // 配置瀏覽器兼容的文件     | -- .karma.conf.js  // 自動(dòng)化測(cè)試框架Karma的配置文件     | -- .package.json  //  NPM包定義文件     | -- .package-lock.json  // 依賴(lài)包版本鎖定文件     | -- .tsconfig.app.json  // 用于app項(xiàng)目的TypeScript的配置文件     | -- .tsconfig.spec.json  // 用于測(cè)試的TypeScript的配置文件     | -- .tsconfig.json  //  整個(gè)工作區(qū)的TypeScript的配置文件     | -- .tsconfig.spec.json  // 用于測(cè)試的TypeScript的配置文件     | -- .tslint.json  // TypeScript的代碼靜態(tài)掃描配置     | -- .e2e  // 自動(dòng)化集成測(cè)試項(xiàng)目     | -- .src  //  源代碼目錄             | -- .favicon.ico //  收藏圖標(biāo)             | -- .index.html //  收藏圖標(biāo)             | -- .main.ts  //  入口 ts文件             | -- .polyfill.ts  //  用于不同瀏覽器兼容版本加載             | -- .style.css  //  整個(gè)項(xiàng)目的全局的css             | -- .test.ts  //  測(cè)試入口             | -- .app  //  工程源碼目錄             | -- .assets //  資源目錄             | -- .environments  //  環(huán)境配置                  | -- .environments.prod.ts  //  生產(chǎn)環(huán)境                  | -- .environments.ts  //  開(kāi)發(fā)環(huán)境復(fù)制代碼

        四、工程源碼文件結(jié)構(gòu)

        1.app目錄:

        app目錄是要編寫(xiě)的代碼目錄。在新建項(xiàng)目時(shí)命令行已經(jīng)默認(rèn)生成出來(lái)了。

        如何快速入門(mén)angular12?入門(mé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 {   }

        接下來(lái),我們來(lái)分析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è)裝飾器來(lái)注解,組件元數(shù)據(jù) Angular會(huì)通過(guò)這里面的屬性來(lái)渲染組件并執(zhí)行邏輯

        • selector 是一個(gè)css選擇器。表示該組件可通過(guò)app-root的HTML標(biāo)簽來(lái)調(diào)用,index.html中有個(gè)<app-root>Loading...</app-root>標(biāo)簽,這個(gè)標(biāo)簽用來(lái)展示該組件的內(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所定義的頁(yè)面定義了用戶(hù)最終看見(jiàn)的頁(yè)面的布局和內(nèi)容。
        • styleUrls 指定了一組css文件。可以在這個(gè)css中編寫(xiě)這個(gè)組件模板要用到的樣式。也就是app.component.htmlapp.component.css兩個(gè)文件。
        export class AppComponent {     title = 'hello Grit'; }

        這個(gè)類(lèi)實(shí)際上就是該組件的控制器,我們的業(yè)務(wù)邏輯就是在這個(gè)類(lèi)中編寫(xiě)

        • AppComponent 本來(lái)就是一個(gè)普通的typescript類(lèi),但是上面的組件元數(shù)據(jù)裝飾器告訴Angular,AppComponent是一個(gè)組件,需要把一些元數(shù)據(jù)加到這個(gè)類(lèi)上,Angular就會(huì)把AppComponent當(dāng)組件來(lái)處理
        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),稱(chēng)作 NgModule。每個(gè) Angular 應(yīng)用都至少有一個(gè) NgModule 類(lèi),也就是根模塊,在app.module.ts文件中,這個(gè)根模塊就可以啟動(dòng)你的應(yīng)用。

        • declarations(可聲明對(duì)象表) —— 那些屬于本 NgModule 的組件、指令、管道。

        • exports(導(dǎo)出表) —— 那些能在其它模塊的組件模板中使用的可聲明對(duì)象的子集。

        • imports(導(dǎo)入表) —— 導(dǎo)入其他模塊

        • providers —— 依賴(lài)注入

        • bootstrap —— 設(shè)置根組件

        五、項(xiàng)目創(chuàng)建、運(yùn)行

        ng new myProject  //項(xiàng)目默認(rèn)會(huì)新建一個(gè)目錄(項(xiàng)目工程) cd myProject  ng serve  //會(huì)啟動(dòng)開(kāi)發(fā)環(huán)境下的Http 服務(wù)器復(fù)制代碼

        參考文獻(xiàn):Angular官網(wǎng)

        原文地址:https://juejin.cn/post/6994378585200918564

        作者:Grit_1024

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)
        主站蜘蛛池模板: 精品福利一区二区三| 国产精品免费αv视频| 精品视频在线免费观看| 少妇亚洲免费精品| 97国产视频精品| 2020亚洲男人天堂精品| 亚洲第一极品精品无码久久| 精品久人妻去按摩店被黑人按中出| 999国内精品永久免费观看| 真实国产乱子伦精品一区二区三区| 国产精品成人久久久久三级午夜电影 | 精品一区二区三区在线观看| 国产99久久精品一区二区| 亚洲乱码精品久久久久..| 欧美日韩国产中文精品字幕自在自线| 国产A√精品区二区三区四区| 国产精品久久久久影院嫩草 | 精品精品国产欧美在线小说区| 欧美精品黑人巨大在线播放| 国产亚洲欧美精品久久久| 亚洲国产精品18久久久久久| 亚洲精品无码成人片在线观看| 久久久久久噜噜精品免费直播| 国产精品美女WWW爽爽爽视频| 亚洲欧美日韩精品| 青青青青久久精品国产| 国产91精品在线观看| 97久久超碰国产精品2021| 国产精品女同久久久久电影院| 少妇人妻精品一区二区三区| 中文字幕精品无码一区二区三区 | 思思久久99热免费精品6| 免费人欧美日韩在线精品| 久久精品国产福利国产琪琪| 精品国产香蕉伊思人在线在线亚洲一区二区 | 国产69精品久久久久777| 91精品国产福利在线导航| 91麻豆精品国产| 国产一区二区精品久久| 国产一区二区精品| 99久久精品国产一区二区蜜芽|