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

すぐに始める方法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

2. 開発ツールの構成:

• Vscode の推奨拡張:

• 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 ディレクトリ:

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

2.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 コアからのものですmodule コンポーネント デコレータの紹介

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

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

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

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

このクラスは実際にはコンポーネントのコントローラーです。ビジネス ロジックはこのクラスで書かれています

AppComponent
• これは元々は通常の typescript ですクラスですが、上記のコンポーネント メタデータ デコレータは、AppComponent がコンポーネントであり、このクラスにメタデータを追加する必要があることを Angular に伝えます。Angular は AppComponent をコンポーネントとして扱います
3. app.module.ts inアプリ ファイル:

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

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 クラスが少なくとも 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 サイトの他の関連記事を参照してください。