如何快速入門angular12？入門指南分享

如何快速入門angular12？這篇文章就來介紹angular12，手把手教你快速入門angular12，有需要的可以參考~

該文章主要面向對angular感興趣前端童鞋。在國內，企業大多使用的技術棧是vue、react，鮮有公司使用angular，而我剛好用到，故記錄並分享。 【相關教學推薦：《angular教學》】

透過這篇文章，你能了解到以下幾點：

##angular環境配置
• 開發工具配置
• CLI工程結構
• 工程原始碼檔案結構
• 專案建立
• ##一、angular環境配置：

Node => NPM/CNPM => Angular CLI

#安裝node.js是使用npm管理專案依賴的軟體包，由於網路原因，可使用cnpm作為替代的套件管理工具，使用angular CLI 使我們無需理會複雜的配置，更專注Angular.

• 安裝完畢後，在控制台輸入：

• npm install -g @angular/cli

#查看版本

• angular version

二、開發工具配置：

Vscode 的建議拓展：

Chrome 的推薦擴充功能：Angular DevTools

• 方便調試程序，可在 

Chrome 線上應用商店

中找到Angular DevTools。 三、CLI工程結構：

| -- myProject
    | -- .editorconfig  // 用于在不同编辑器中统一代码风格
    | -- .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  //  整个工作区的TypeScript的配置文件
    | -- .tsconfig.spec.json  // 用于测试的TypeScript的配置文件
    | -- .tslint.json  // TypeScript的代码静态扫描配置
    | -- .e2e  // 自动化集成测试项目
    | -- .src  //  源代码目录
            | -- .favicon.ico //  收藏图标
            | -- .index.html //  收藏图标
            | -- .main.ts  //  入口 ts文件
            | -- .polyfill.ts  //  用于不同浏览器兼容版本加载
            | -- .style.css  //  整个项目的全局的css
            | -- .test.ts  //  测试入口
            | -- .app  //  工程源码目录
            | -- .assets //  资源目录
            | -- .environments  //  环境配置
                 | -- .environments.prod.ts  //  生产环境
                 | -- .environments.ts  //  开发环境复制代码

四、工程原始碼檔案結構

1.app目錄：

app目錄是要寫的程式碼目錄。在新建專案時命令列已經預設生成出來了。

2.app目錄中的app.component.ts：

此檔案表示元件，元件是Angular應用的基本建置模組，可理解為一段帶有業務邏輯和資料的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';复制代码

這段程式碼是從Angular核心模組裡面引入了component裝飾器

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

這段程式碼是用裝飾器定義了一個元件以及元件的元資料所有的元件都必須使用這個裝飾器來註解，元件元資料Angular會通過這裡面的屬性來渲染元件並執行邏輯

selector
• 是一個css選擇器。表示該元件可透過app-root的HTML標籤來調用，index.html中有一個<app-root>Loading...root></app-root>標籤，這個標籤用來展示該元件的內容。
templateUrl
• 指定了一個html檔案作為元件的模板，定義了元件的佈局和內容。這裡定義app.component.html，最終在index.html中<app-root>/<app-root></app-root></app-root>這個標籤的內容將展示app.component.html裡面的內容。也就是templateUrl所定義的頁面定義了使用者最終看見的頁面的佈局和內容。
styleUrls
• 指定了一組css檔。可以在這個css中寫這個元件模板要用到的樣式。也就是app.component.html和app.component.css兩個檔案。

  export class AppComponent {
      title = 'hello Grit';
  }

這個類別其實就是該元件的控制器，我們的業務邏輯就是在這個類別中寫

AppComponent
• 本來就是一個普通的typescript類，但是上面的元件元資料裝飾器告訴Angular，AppComponent是一個元件，需要把一些元資料加到這個類別上，Angular就會把AppComponent當元件來處理
# 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 應用程式是模組化的，它擁有自己的模組化系統，稱為NgModule。每個 Angular 應用程式都至少有一個 NgModule 類，也就是根模組，在app.module.ts檔案中，這個根模組就可以啟動你的應用。

• declarations

  （可宣告物件表） —— 那些屬於本 NgModule 的元件、指令、管道。

• exports

  （匯出表） —— 那些能在其它模組的元件模板中使用的可宣告物件的子集。

• imports

  （導入表） —— 導入其他模組

• providers

   —— 依賴注入

• bootstrap —— 设置根组件

五、项目创建、运行

ng new myProject  //项目默认会新建一个目录（项目工程）
cd myProject 
ng serve  //会启动开发环境下的Http 服务器复制代码

参考文献：Angular官网

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

作者：Grit_1024

更多编程相关知识，请访问：编程入门！！

以上是如何快速入門angular12？入門指南分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！