Angular 5学習ノート(一)
今日Angular 5に接触したばかりで、APIを見て、初歩的な認識があった後、プロジェクトコードから見なければなりません.このようにAngular 5の全体的なアーキテクチャに対してもっと直観的な認識があります.そこでGitからdemoを探して、cloneを降りてからプロジェクトの構造と運行原理を見てみました.
Reference API URL: http://www.angularjs.net.cn/api/
Demo address: https://github.com/Ismaestro/angular5-example-app
プロジェクトをローカルにダウンロードした後、最初にプロジェクトの依存ライブラリをダウンロードします.プロジェクトの依存ライブラリの構成はpackageであることがわかります.jsonファイルにあるので、コンソールで実行:npm install、依存ライブラリのダウンロードが完了したらプロジェクトを実行し、実行効果を見て、命令:npm startを実行します.
ここのnpm startはpackageです.jsonにカプセル化された命令:
次のエラーはnpmstartプロセスで報告されたエラーです.Cannot find module'@angular-devkit/core'です.
解決方法:
参照リンク:https://github.com/angular/angular-cli/issues/9307
エラーが解決したら、ブラウザの入力-localhost:4200を開くと、実行インタフェースが表示されます.
ここには小さな知識点があります.プロジェクトの実行ポート:4200はprotractorです.conf.jsで構成されています.下図を参照してください.実際の開発では必要に応じて修正できます.
Angular 5起動アプリケーションの詳細:
コマンド:
・コマンドラインにng serveを入力した後
・ngはangular-cliに従う.jsonのmain要素はアプリケーションエントリファイルmainを見つけた.ts
· main.ts再ロードルートモジュールAppModule
・AppModule Angularモジュールの起動(@ngModule)
・@ngModule AppModuleにメタデータを追加し、最上位コンポーネントAppComponentを指定
・AppComponentでやりたいことができる
図解の説明を開始します.
参照リンク:http://blog.csdn.net/Edison_03/article/details/78935045
Reference API URL: http://www.angularjs.net.cn/api/
Demo address: https://github.com/Ismaestro/angular5-example-app
プロジェクトをローカルにダウンロードした後、最初にプロジェクトの依存ライブラリをダウンロードします.プロジェクトの依存ライブラリの構成はpackageであることがわかります.jsonファイルにあるので、コンソールで実行:npm install、依存ライブラリのダウンロードが完了したらプロジェクトを実行し、実行効果を見て、命令:npm startを実行します.
ここのnpm startはpackageです.jsonにカプセル化された命令:
次のエラーはnpmstartプロセスで報告されたエラーです.Cannot find module'@angular-devkit/core'です.
解決方法:
参照リンク:https://github.com/angular/angular-cli/issues/9307
エラーが解決したら、ブラウザの入力-localhost:4200を開くと、実行インタフェースが表示されます.
ここには小さな知識点があります.プロジェクトの実行ポート:4200はprotractorです.conf.jsで構成されています.下図を参照してください.実際の開発では必要に応じて修正できます.
Angular 5起動アプリケーションの詳細:
コマンド:
ng serve・コマンドラインにng serveを入力した後
・ngはangular-cliに従う.jsonのmain要素はアプリケーションエントリファイルmainを見つけた.ts
· main.ts再ロードルートモジュールAppModule
・AppModule Angularモジュールの起動(@ngModule)
・@ngModule AppModuleにメタデータを追加し、最上位コンポーネントAppComponentを指定
・AppComponentでやりたいことができる
図解の説明を開始します.
参照リンク:http://blog.csdn.net/Edison_03/article/details/78935045