コンテンツ
- 01.バージョンチェックを実行します
- 02.Angularをインストールします
- 03.プロジェクトスケルトンを作成する
- 04.ハーネスの差動荷重
- 05 ....そして結果を見る
- 06.Webワーカーを生成します
- 07.コードを調べる
- 08.足場を設定する
- 09.コンストラクターがないことを心配しないでください
- 10.小さなコンパイル実行を実行します
- 11 ....そして出力を見つけます
- 12.仕事に取り掛かる
- 13.アイビーを探索する
- 14.変更されたng処理を試してください
- 15.改善された移行をお楽しみください
- 16.ワークスペースコントロールを調べる
- 17.プロセスを加速します
- 18.ウォーキング・デッドを避ける
- 19.変更ログを確認します
Angular 8は、GoogleのAngularの最新バージョンです。これは、最も優れたJavaScriptフレームワークの1つです。この記事では、Angular 8の特別な点を紹介し、開始方法を示します。まず、これまでのフレームワークで何が起こったかを簡単に振り返ります。
Angularの導入は、Web開発のパラダイムシフトにつながりました。ほとんどのライブラリは、アーキテクチャへの影響が比較的限られている開発者へのサポートの提供に限定されていましたが、Angularの開発者チームは別の方向に進みました。彼らの製品は、困難なものから商業的に無意味なものまでさまざまな逸脱を伴う特定のアーキテクチャを使用することを強制します。実際、ほとんどのAngularコードは、ブラウザーに到達する前に、比較的複雑なトランスパイルツールチェーンを介して実行されます。
Google Incの内外でAngularが大成功を収めたため、開発は概して安定しました。これは、コードの重大な変更がほとんどないことを意味しますが、半年ごとのアップグレードは、Webブラウジング環境の変化にフレームワークを適応させることに焦点を合わせています。
たとえば、Angular 8の場合、新しいJavaScriptコンパイラーがデプロイされます（まだ実験的ですが）。生成された互換性コードを最適化して、古いブラウザを犠牲にして大幅に小さく高速にします。さらに、Web Workerのサポートが統合され、Angularの処理能力が向上しています。要するに、見るべきことがたくさんあるので、すぐに飛び込みましょう。
コードなしでサイトをデザインしたい場合は、これらの簡単なウェブサイトビルダーのいずれかを試してください。そして、物事をさらにスムーズに実行するために、あなたのウェブホスティングサービスを正しくしてください。
01.バージョンチェックを実行します
AngularのツールチェーンはNodeJS環境内にあります。この記事の執筆時点では、Node.js 10.9以降が必要です。古いバージョンを使用している場合は、Node.jsWebサイトにアクセスしてアップグレードを入手してください。以下のコードは、このマシンのバージョンステータスを示しています。
tamhan @ TAMHAN18：〜$ node -v v12.4.0 tamhan @ TAMHAN18：〜$ npm -v 6.9.0
02.Angularをインストールします
Angularのツールチェーンは、という名前のコマンドラインユーティリティにあります ng。よく知られているNPMを介してインストールできます。
tamhan @ TAMHAN18：〜$ sudo npm install -g @ angular / cli tamhan @ TAMHAN18：〜$ ngバージョン
下の画像に示されている質問に注意して答えてください。
ツールからバージョン情報を取得することは非常に困難です。構文が一意であるだけでなく、出力も冗長です（下の画像を参照）。
03.プロジェクトスケルトンを作成する
ng Angularスキャフォールディングを生成します。次の手順では、ルーティングを追加し、CSSトランスパイルにSassを使用します。何らかの理由で展開が失敗した場合は、作業ディレクトリを空にして再起動します ng スーパーユーザー権限を持つ。
tamhan @ TAMHAN18：〜$ mkdir anglespace tamhan @ TAMHAN18：〜$ cd anglespace / tamhan @ TAMHAN18：〜/ angularspace $ ng new workertest
04.ハーネスの差動荷重
新しいバージョンのAngularは、下位互換性コードを最適化して影響を軽減します–ファイルは browserslist サポートするブラウザを決定できます。開いた browserslist 単語を削除します ない IE9からIE11の前。
。 。 。 > 0.5％最後の2つのバージョンFirefoxESRは死んでいないIE9-11＃IE 9-11をサポートするには、「not」を削除します。
05 ....そして結果を見る
プロジェクトのコンパイルを注文し、配布フォルダーに変更して、不要なマップファイルを削除します。
tamhan @ TAMHAN18：〜/ angularspace / workertest $ sudo ng build tamhan @ TAMHAN18：〜/ angularspace / workertest / dist / workertest $ ls
ツリーを呼び出して結果を確認します– ng さまざまなコードファイルの複数のバージョンを作成します（下の画像を参照）。
06.Webワーカーを生成します
Webワーカーは、JavaScriptをネイティブアプリケーションの最後のフロンティア、つまりタスクの超並列処理に参入させます。 Angular 8を使用すると、快適な環境からWebワーカーを作成できます。 ng コマンドラインユーティリティ。
tamhan @ TAMHAN18：〜/ angularspace / workertest $ sudo ng generate web-worker myworker CREATE tsconfig.worker.json（212バイト）CREATE src / app / myworker.worker.ts（157バイト）UPDATE tsconfig.app.json（236バイト） ）UPDATEangular.json（3640バイト）
07.コードを調べる
ngの出力は、一見恐ろしいように見える可能性があります。ファイルを開く src / app / myworker.worker.ts 選択したコードエディタで、からよく知っておくべきコードが明らかになります。 WebWorker 仕様。原則として、ワーカーはメッセージを受信し、必要に応じて処理します。
///参照lib = "webworker" /> addEventListener（ ’message’、（{data}）=> {const response = `worker response to $ {data}`; postMessage（response）;}）;
08.足場を設定する
Angularアプリケーションはコンポーネントで構成されています。 Webワーカーの起動は、内部で行うのが最適です。 AppComponent、のリスナーを含むように拡張されます OnInit イベント。今のところ、ステータス情報のみを出力します。
import {Component、OnInit} from ’@ angular / core’; @Component（{。。。}）エクスポートクラスAppComponentはOnInitを実装します{title = ’workertest’; ngOnInit（）{console.log（ "AppComponent：OnInit（）"）; }}
09.コンストラクターがないことを心配しないでください
経験豊富なTypeScript開発者は、なぜ私たちのコードがプログラミング言語によって提供されるコンストラクターを使用しないのかを自問します。その理由は ngOnInit は、初期化イベントが発生するたびに発生するライフサイクルイベントです。これは、クラスの呼び出しと関連付ける必要はありません。
10.小さなコンパイル実行を実行します
この時点で、プログラムを実行する準備ができています。内部のサーバーから実行します ng、これは、serveコマンドを介して呼び出すことができます。このアプローチの優れた点は、プログラムが変更を検出し、プロジェクトをその場で再コンパイルすることです。
tamhan @ TAMHAN18：〜/ angularspace / workertest $ sudo ngserve
下の画像でこれが実際に動作していることを確認するには、図を見てください。
11 ....そして出力を見つけます
ngサーブ ローカルWebサーバーのアドレスをputputsします。これは通常、 http：// localhost：4200 /。 Webページを開き、開発者ツールを開いてステータス出力を確認します。それを念頭に置いて console.log データをブラウザコンソールに出力し、NodeJSインスタンスのコンソールはそのままにします。
12.仕事に取り掛かる
この時点で、ワーカーのインスタンスを作成し、メッセージを提供します。その結果はブラウザコンソールに表示されます。
if（typeof Worker！== ’undefined’）{//新しいconstワーカーを作成= new Worker（ ’./ myworker.worker’、{type： ’module’}）; worker.onmessage =（{data}）=> {console.log（ ’page got message：$ {data }’）; }; worker.postMessage（ ’hello’）; } else {console.log（ "ワーカーサポートなし"）; }
13.アイビーを探索する
Angularの将来のバージョンでは、より高度なコンパイラが使用され、ビューがさらに小さくなります。製品はまだ完成していませんが、ツタ対応のスケルトンは次の方法でスポーンできます。 新しいivy-project–enable-ivyをng。または、スニペットに示されているようにコンパイラ設定を変更します。
"angularCompilerOptions"：{"enableIvy"：true}
警告の言葉：アイビーは驚くべきサイズの縮小につながりますが、それは無料ではありません。製品はまだ安定していないため、生産的な環境で使用することはお勧めしません。
14.変更されたng処理を試してください
Angularの ng コマンドラインツールは、しばらくの間、内部で子スクリプトを使用していました。 Angular 8は、アプリケーションのアセンブルとコンパイル時にこの機能を使用して独自のタスクを実行できるという点で、アンティを引き上げます。
"architect"：{"build"：{"builder"： "@ angular-devkit / build-angular：browser"、
1つのきちんとしたアプリケーション ng スクリプトには、アプリケーションをクラウドサービスに直接アップロードすることが含まれます。 Gitリポジトリは、作業内容をFirebaseアカウントにアップロードする便利なスクリプトを提供します。
15.改善された移行をお楽しみください
AngularJSとしても知られるAngular1.xから移行する開発者は、ナビゲーターを「結合された」アプリケーションで正しく動作させるための問題をかなりの割合で抱えています。新しいUnifiedLocation Serviceは、このプロセスをよりスムーズにすることを目的としています。
16.ワークスペースコントロールを調べる
大規模なプロジェクトでは、ワークスペースの構造を動的に変更できるというメリットがあります。これは、Angular8.0で導入された新しいWorkspaceAPIを介して行われます。このステップに付随するスニペットは、動作の概要を提供します。
非同期関数demonice（）{const host = workspaces。 createWorkspaceHost（new NodeJsSyncHost（））; constワークスペース=ワークスペースを待ちます。 readWorkspace（ ’path / to / workspace / directory /’、host）; const project = workspace.projects。 get（ 'my-app'）; const buildTarget = project.targets。 get（ ’build’）; buildTarget.options.optimization = true;ワークスペースを待つ.writeWorkspace（workspace、host）; }
17.プロセスを加速します
大規模なJavaScriptコードベースを構築するのは面倒です。 AngularJSの将来のバージョンでは、GoogleのBazelビルドシステムを使用してプロセスを加速します。残念ながら、執筆時点ではプライムタイムの準備ができていませんでした。
18.ウォーキング・デッドを避ける
Googleはコードを壊さないように細心の注意を払っていますが、一部の機能は不要になったため、単に削除する必要があります。避けるべき機能の詳細については、この減価償却リストを確認してください。
19.変更ログを確認します
いつものように、1つの記事がリリース全体を正当化することはできません。幸い、この変更ログには、すべての変更の詳細なリストが表示されます。これは、特に大切な機能のパルスを確認したい場合に備えてです。
あなたのサイトにアップロードする準備ができているたくさんのファイルを手に入れましたか？最も信頼性の高いクラウドストレージにバックアップします。
この記事はもともとクリエイティブなウェブデザイン誌に掲載されました ウェブデザイナー.
