angular aspnetcore seed

angular-aspnetcore-seed

完全な VS Code デバッグを備えた Angular 7.2.7 / ASP.NET Core 2.2 シード プロジェクト

インストール

1. 選択したフォルダーにプロジェクトのクローンを作成します - git clone https://github.com/wesleygrimes/angular-aspnetcore-seed.git
2. .gitフォルダーを削除します - rm -rf .git
3. ディレクトリ内の新しいリポジトリを初期化します - git init
4. NPM パッケージをインストールする - (cd ClientApp && npm install)
5. NuGet パッケージの復元 - dotnet restore
6. Visual Studio Code を起動しますcode .
7. サーバーとクライアントのコードのデバッグは、 F5を押すことで実行できます。

プロジェクトの構造

バックエンド

バックエンドは ASP.NET Core 2.2 WebAPI アプリケーションです。

• Controllers - このディレクトリでコントローラーを作成または更新して、新しいエンドポイントを追加します
• Models - このフォルダーにデータ モデルを追加します
• Interfaces - このディレクトリに実装されるインターフェースを追加します。
• Services - このディレクトリにサービスを追加します。通常、サービスは HttpClient とデータベースの直接のやり取りを行います。
• Startup.cs - 起動構成がここに存在し、実行時にコントローラーに挿入されるデータ サービスの登録も行われます。

フロントエンド

フロントエンド コードはClientAppディレクトリにあります。これは、完全に互換性のある Angular 7.2.0 CLI アプリケーションです。これは、 ClientAppフォルダー内から完全なng generate機能が利用可能であり、推奨されていることを意味します。

プロジェクトの実行

これは、Angular 6 フロントエンドを備えた ASP.NET Core 2.2 プロジェクトです。 dotnet プロジェクトは、 dotnet runの実行時に Angular プロジェクトを自動的にビルドするように構成されています。これは、 ng serve -o手動で実行することを心配する必要がないことを意味します。また、ホット リロード モードでも実行されるため、dotnet コードや Angular コードに変更を加えると、ブラウザーで自動的にリロードと更新が行われます。

Visual Studio Codeからのデバッグ

このプロジェクトには、 .vscode/launch.jsonファイルと.vscode/tasks.jsonファイルが含まれています。これは、デフォルトでF5を実行すると、サーバー側コードとクライアント側コードの両方でブレークポイントに到達できることを意味します。甘い！！

最初の実行時に問題が発生した場合は、 Full stackデバッグ ターゲットが選択されていることを確認してください。

貢献を歓迎します

これは非常に非公式なプロジェクトであり、改善を伴うあらゆるプル リクエストが受け入れられます。皆様のご意見をお待ちしております！

角度トレーニング

Angular の初心者または経験がある場合は、Ultimate Angular にアクセスして、Angular Framework コースにサインアップすることを強くお勧めします。バナー内のリンクをクリックしてください。