ホームページ >ウェブフロントエンド >jsチュートリアル >angular12 をすぐに使い始めるにはどうすればよいですか?スタートガイドの共有

angular12 をすぐに使い始めるにはどうすればよいですか?スタートガイドの共有

青灯夜游転載: 2021-08-13 11:20:043820ブラウズ

すぐに始める方法angular12?この記事では angular12 について紹介し、angular12 をすぐに使い始める方法を説明します。必要に応じて参照してください~

この記事は主にフロント向けです。角に興味のある子供用の靴を終了します。中国では、ほとんどの企業が使用しているテクノロジースタックは Vue と React ですが、Angular を使用している企業はほとんどなく、私はたまたま使用していたので、記録して共有します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

この記事を通じて、次の点を学習できます:

angular 環境構成
開発ツールの構成
CLI プロジェクトの構造
プロジェクトのソースコードファイル構造
プロジェクトの作成

1. Angular 環境の構成：

Node => NPM/CNPM => Angular CLI

node.js をインストールすると、npm を使用して、プロジェクトが依存するソフトウェアパッケージを管理します。ネットワーク上の理由により、、cnpm は代替パッケージ管理ツールとして使用できます。angular CLI を使用すると、複雑な構成を無視して Angular に集中できます。
インストール後、コンソールに次のように入力します:

npm install -g @angular/cli

バージョンを表示するには

angular version

angular12 をすぐに使い始めるにはどうすればよいですか?スタートガイドの共有

2. 開発ツールの構成:

Vscode の推奨拡張:

angular12 をすぐに使い始めるにはどうすればよいですか?スタートガイドの共有

Chrome の推奨拡張機能: Angular DevTools

プログラムのデバッグに便利な Angular DevTools は、Chrome オンラインアプリにあります。店＃＃＃。

3. 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  //  开发环境复制代码

4. プロジェクトソースコードファイル構造

1.app ディレクトリ:

アプリディレクトリはコードディレクトリです。書かれます。コマンドラインは、新しいプロジェクトを作成するときにデフォルトで生成されます。アプリディレクトリ内の

angular12 をすぐに使い始めるにはどうすればよいですか?スタートガイドの共有

2.app.component.ts:

このファイルは、Angular アプリケーションの基本的な構成要素であるコンポーネントを表します。ビジネスロジックとデータを含む HTML として理解してください

import { Component,} from &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-root&#39;,
  templateUrl: &#39;./app.component.html&#39;,
  styleUrls: [&#39;./app.component.css&#39;]
})
export class AppComponent {
 
}

次に、app.component.ts ファイル内の各コードを分析しましょう:

import {Component} from '@angular/core';复制代码

このコードは Angular コアからのものですmodule コンポーネントデコレータの紹介

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

このコードは、デコレータを使用してコンポーネントとコンポーネントのメタデータを定義します。すべてのコンポーネントには、このデコレータで注釈を付ける必要があります。Angular は、内部の属性を通じてコンポーネントのメタデータを渡します。レンダリングするにはコンポーネントと実行ロジック

は CSS セレクターです。コンポーネントが app-root の HTML タグを通じて呼び出せることを示します。index.html には Loading...があります。 root> タグ。このタグはコンポーネントのコンテンツを表示するために使用されます。
HTML ファイルをコンポーネントのテンプレートとして指定し、コンポーネントのレイアウトとコンテンツを定義します。ここで app.component.html を定義し、最後に index.html のタグ <app-root>/<app-root></app-root></app-root> の内容を定義します。 app.component.html 内のコンテンツが表示されます。つまり、templateUrl で定義されたページは、ユーザーが最終的に見るページのレイアウトとコンテンツを定義します。
CSS ファイルのセットを指定します。このコンポーネントテンプレートで使用されるスタイルをこの CSS に記述することができます。つまり、2 つのファイル app.component.html と app.component.css です。
```
export class AppComponent {
    title = &#39;hello Grit&#39;;
}
```

これは元々は通常の typescript ですクラスですが、上記のコンポーネントメタデータデコレータは、AppComponent がコンポーネントであり、このクラスにメタデータを追加する必要があることを Angular に伝えます。Angular は AppComponent をコンポーネントとして扱います

このファイルはモジュールを表します

import { NgModule } from &#39;@angular/core&#39;;
import { BrowserModule } from &#39;@angular/platform-browser&#39;;

import { AppRoutingModule } from &#39;./app-routing.module&#39;;
import { AppComponent } from &#39;./app.component&#39;;
import { ScrollableTabComponent,ImageSliderComponent } from &#39;./components&#39;;
@NgModule({
  declarations: [
    AppComponent,
    ScrollableTabComponent,
    ImageSliderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular アプリケーションはモジュール式であり、NgModule と呼ばれる独自のモジュールシステムを持っています。すべての Angular アプリケーションには、ルートモジュールである NgModule クラスが少なくとも 1 つあり、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 中国語 Web サイトの他の関連記事を参照してください。

typescript node.js css chrome bootstrap html npm angular 栈 JS 对象选择器 vscode https

声明：

この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Node.js のノンブロッキング I/O とは何ですか?例文でわかる！次の記事：Node.js のノンブロッキング I/O とは何ですか?例文でわかる！

続きを見る

angular12 をすぐに使い始めるにはどうすればよいですか?スタートガイドの共有

この記事を通じて、次の点を学習できます:

1. Angular 環境の構成 ：

2. 開発ツールの構成:

このファイルはモジュールを表します

五、项目创建、运行

関連記事

1. Angular 環境の構成：