角度8の内側は何ですか？

Sep 16, 2025
操作方法
Angular 8
（画像クレジット：未来）

Angular 8はGoogleのAngularの最新版です - のうちの1つ 最高のJavaScriptフレームワーク 周り。この記事では、Angular 8について特別なものを走り、始める方法を説明します。まず、これまでのところフレームワークで何が起こったのかを振り返ってください。

Angularの導入はWeb開発のパラダイムシフトにつながりました。彼らの製品はあなたに特定のアーキテクチャを使うことを余儀なくされ、偏差は難しいことから市販されていません。実際、ほとんどの角度コードは、それがブラウザに当たる前に比較的複雑な転置ツールチェーンを実行します。

Google Incの内側と外側の両方の角度の莫大な成功のため、開発は非常に安定しています。これは、破断コードが変更されていることを意味し、半年のアップグレードはWebブラウジングの風景の変更にフレームワークを適応させることに焦点を当てています。

たとえば、角度8の場合、新しいJavaScriptコンパイラが展開されます（まだ実験的にはいますが）。それは、生成された互換性コードを最適化して、古いブラウザを犠牲にして大幅に短くなります。さらに、Webワーカーのサポートは、角度の処理機能を向上させるために統合されています。一言で言えば、見るにはたくさんあります - それで私たちは右に飛び込みましょう。

あなたがコードなしでサイトをデザインするのであれば、これらの簡単なものの1つを試してください ウェブサイトのビルダー 。そして物事を滑らかにするようにするために、あなたの ウェブホスティング サービス権。

01.バージョンチェックを実行します

AngularのツールチェーンはNodeJS環境の内側に住んでいます。この書き込みの時点で、Node.js 10.9以上が必要です - 古いバージョンで自分自身を見つけた場合、 Node.jsのWebサイトを参照してください そしてアップグレードを入手してください。以下のコードは、このマシンのバージョンステータスを示しています。 

 Tamhan @ Tamhan18：〜$ node -v
v12.4.0
Tamhan @ Tamhan18：〜$ NPM-v.
6.9.0

02.角度を取り付ける

Angularのツールチェーンは、名前が付けられたコマンドラインユーティリティにあります。 n 。それは有名なNPMを介してインストールすることができます。 

 Tamhan @ Tamhan18：〜$ sudo npm install -g @ angular / cli
Tamhan @ Tamhan18：〜$ NGバージョン

下の図に示す質問に答えるように注意してください。

Click the icon in the top right to enlarge

拡大する右上のアイコンをクリックしてください （イメージクレジット：Tam Hanna）

ツールからバージョン情報を取得することは非常に困難です - 構文の一意は単独であるだけでなく、出力も冗長です（以下の図を参照）。

Click the icon in the top right to enlarge

拡大する右上のアイコンをクリックしてください （イメージクレジット：Tam Hanna）

03.プロジェクトスケルトンを作成します

n 私たちのための角度足場を生成します。次の手順では、ルーティングを追加し、CSS転送にSASSを使用します。何らかの理由で展開が失敗し、作業ディレクトリを空にして再起動する場合 n スーパーユーザー権利を持つ。 

 Tamhan @ Tamhan18：〜$ mkdir angularspace
Tamhan @ Tamhan18：〜$ CD angularspace /
Tamhan @ Tamhan18：〜/ angularspace $ NG NEW TOWNERTEST

04.ハーネス差動荷重

Impactの新しいバージョンが逆方向互換性コードを最適化します - 呼び出されたファイル ブラウザリスト どのブラウザをサポートするかを決定できます。開いた ブラウザリスト そして言葉を取り除きます じゃあ IE 9からIE11の前で。 

。 。 。
＆gt; 0.5％
最後の2バージョン
Firefox ESR.
死んでいません
IE 9-11＃は、IE 9-11のサポートのための9-11＃を削除します。

05. ...そして結果を見てください

プロジェクトのコンパイル、配布フォルダに変更し、不要なマップファイルを削除します。 

 Tamhan @ Tamhan18：〜/ angularspace / workertest $
sudo ngビルド
Tamhan @ Tamhan18：〜/アンギュラ空間/作品/ DIST / WORKARTESTESTESTESTESTESTESTS

結果を確認するにはツリーを呼び出します - n 複数のバージョンのさまざまなコードファイルを作成します（下の図を参照）。

Click the icon in the top right to enlarge

拡大する右上のアイコンをクリックしてください （イメージクレジット：Tam Hanna）

06. Webワーカーを生成する

Web Workers JavaScriptをネイティブアプリケーションの最後のフロンティアを入力してください：タスクの大並列処理。 Angular 8では、Web労働者を快適さから正しく作成できます。 n コマンドラインユーティリティ。 

 Tamhan @ Tamhan18：〜/ angularspace / workertest $
SUDO NG Web労働者マイワーカーを生成します
tsconfig.worker.jsonを作成する（212バイト）
src / app / myworker.worker.ts（157バイト）を作成する
tsconfig.app.jsonを更新する（236バイト）
更新angular.json（3640バイト）

07.コードを探る

n 一見すると、一見した出力が威圧される可能性があります。ファイルを開く src / app / myworker.worker.ts. in コードエディタ 選択のうちにあなたが知っておくべきコードを明らかにします WebWorker. 仕様。原則として、労働者はメッセージを受信し、必要に応じてそれらを処理します。 

 /// / <<<<<

08.足場を設定します

角度用途は部品で構成されています。私たちのWeb労働者を発射することは中で最もよく行われます AppComponent. これはリスナーを含むように拡張されます。 on on イベント今のところ、ステータス情報のみを発行します。 

 '@ angular / core'から{component、oninit}をインポートします。
@成分（{
。 。 。
）
エクスポートクラスAppComponent OnInit {
 title = 'terkertest';
 ngoninit（）{
   console.log（ "AppComponent：Oninit（）"）;
 }

09.コンストラクタの欠如を心配しないでください

経験豊富なタイプスクリプト開発者は、コードがプログラミング言語によって提供されたコンストラクタを使用していない理由を自分で尋ねます。その理由はそれです ngoninit. 初期化イベントが発生するたびに発生するライフサイクルイベントです。これはクラス呼び出しに関連付ける必要はありません。

10.小さなコンパイル実行を実行します

この時点で、プログラムは実行する準備ができています。内部のサーバーからそれを実行します n SERVEコマンドを介して呼び出すことができます。このアプローチのきれいな側面は、プログラムが変更を検出し、その場でプロジェクトを再コンパイルすることです。 

 Tamhan @ Tamhan18：〜/ angularspace / workertest $
SUDO NGサーブ

以下の画像の中でこれを見るために図を見てください。

Hit the icon in the top right to enlarge the image

画像を拡大するには、右上にアイコンを打つ （イメージクレジット：Tam Hanna）

11. ...そして出力を見つけてください

サーブサービス 通常、ローカルWebサーバーのアドレスを置きます。 http：// localhost：4200 / 。 Webページを開き、ステータス出力を確認するために開発者ツールを開きます。それを念頭に置いて console.log. ブラウザコンソールにデータを出力し、NodeJSインスタンスのコンソールを開いて解除します。

12.仕事に行きます

この時点で、ワーカーのインスタンスを作成してメッセージを提供します。その結果、ブラウザコンソールに表示されます。 

 if（Typeofワーカー！== '未定義'）{
 // 新しいを作成します
 const worker =新しいワーカー（ './ myworker.worker'、{type： 'module'}）;
 worker.onmessage =（{data}）=＆gt; {
   console.log（ 'Page Got Message：$ \
{データ\}'）;
 ;;
 worker.postmessage（ 'hello'）;
} そうしないと {
     console.log（「労働者サポートなし」）;

アイビーを探索する

将来のバージョンのAngularは、より高度なコンパイラを使用し、さらに小さいビューをもたらします。製品がまだ終了していない間は、IVY対応のスケルトンを介して負担をかけることができます。 NG New Ivyプロジェクト - Enable-Ivy 。または、スニペットに示すようにコンパイラ設定を変更します。 

「アンギュラコンバイレルト」：{
       "enableivy"：true.

警告の言葉：アイビーは素晴らしいサイズの削減につながりますが、それは無料ではありません。製品はまだ安定していないので、生産的環境では推奨されません。

14.修正されたNG処理を試してください

ang ang n コマンドラインツールは、しばらくの間、子スクリプトを内部的に使用しました。 Angular 8 UPSこれで、この機能を使用して、アプリケーションが組み立てられてコンパイルされているため、この機能を使用して独自のタスクを実行します。 

「建築家」：{
       「ビルド」：{
         "Builder"： "@ Angular-devkit /
ビルド角：ブラウザ "、

の1つのきちんと申請 n スクリプトには、クラウドサービスにアプリケーションを直接アップロードすることが含まれます。 the Gitリポジトリ あなたの仕事をFirebaseアカウントにアップロードする便利なスクリプトを提供します。

15.移住の向上をお楽しみください

開発者は、AngularJSとしても知られている角度1.xから移行している開発者は、「組み合わせた」アプリケーションでナビゲーターを働かせるためにナビゲーターが働くという公正なシェアを持っていました。新しい統一されたロケーションサービスは、このプロセスを滑らかにすることを目的としています。

16.ワークスペースコントロールを検索します

大きなプロジェクトは、ワークスペース構造を動的に変更する機能から利益を得ます。これはAngular 8.0で導入された新しいワークスペースAPIを介して行われます。この手順に付随するスニペットは、動作の概要を説明します。 

 Async関数が実証（）{
   const host =ワークスペース。
CreateWorkSpaceHost（New NodeJSSynchost（））;
   const workspace =ワークスペースを待っています。
ReadWorkSpace（ 'path / to / workspace / directory /'、
ホスト）;
   const project = workspace.projects。
get（ 'my-app'）;
   const buildtarget = project.targets。
get（ 'build'）;
   buildtarget.options.optimization = true;
   Workspaces.WriteworkSpace（ワークスペース、
ホスト）;

17.プロセスを加速させる

大きなJavaScriptコードベースの建物は面倒です。 AngularJSの将来のバージョンは、GoogleのBazel Buildシステムを使用してプロセスを加速させます - 悲しいことに、それを書く時点ではPrimeTimeの準備ができていませんでした。

18.歩行を避けてください

Googleはコードを壊さないように細心の注意を払っていても、いくつかの機能は単に不要になったとして削除される必要があります。小切手 この償却リスト 避けるべき機能についての詳細を学ぶために。

19.変更ログを見てください

いつものように、1つの記事はすべてリリース全体に正義をすることはできません。幸運なことに、 この変更ログ すべての変更の詳細なリストを提供します - あなたが特にあなたにとって特に愛する機能の脈拍をチェックするように感じています。

あなたのサイトにアップロードする準備ができているファイルがたくさんありましたか？最も信頼できるものに戻します クラウドストレージ 。

この記事はもともとCreative Web Design Magazineで公開されました ウェブデザイナー 。

続きを読む：

  • 角度に多言語サポートを追加します
  • 最高のJavaScript API
  • より速くコード化された、JavaScriptをより軽いにする方法

操作方法 - 最も人気のある記事

あなた自身のスタイラスをわずか4世帯で（真剣に）してください

操作方法 Sep 16, 2025

（イメージクレジット：オリーカーティス） あなたのiPadやタブレットのためにあなた�..

写真をイラストに変える方法

操作方法 Sep 16, 2025

（イメージクレジット：Cindy Kang） 写真をイラストに変えるための最善の方法を理解す�..

WordPressでクライアントポータルを構築する

操作方法 Sep 16, 2025

（画像クレジット：Webデザイナー） ユーザーがログインしてドキュメントをダウンロ�..

ローカル開発環境の設定方法

操作方法 Sep 16, 2025

（画像クレジット：未来） ローカル開発環境では、自分のマシンを使用してWebサイト�..

あなたのアプリをサービス労働者とオフラインで作業させる

操作方法 Sep 16, 2025

ページ1/2： Page 1：ロード速いロード Page 1：ロード速�..

CSSを使用して複雑なレイアウトを作成する方法

操作方法 Sep 16, 2025

Webのレイアウトは常に制限されていますが、意味を考慮した形式で簡単にコンテンツを簡単に表..

InDesignで本の表紙を設計する方法

操作方法 Sep 16, 2025

言うことは、「そのカバーで本を判断しない」があるが、カバーのデザインは、実際には本の成功を作るか破ることができる。あなたが私の�..

ハーレー・クインを描く方法

操作方法 Sep 16, 2025

私にとって、デジタルの魅力 絵画技術 簡単です。伝統的なメディアとは異なり、塗�..

カテゴリ