Ctrl + Shift + v でプレビュー表示
web application prototype
git clone https://github.com/pppiroto/visappproto.git
- 本プロジェクト
$ cd ClientApp
$ npm install
https://dotnet.microsoft.com/en-us/download/dotnet/3.1
-
上記から入手しインストール
- Homebrew インストール
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- nodebrew インストール
brew install nodebrew
- nodebrew にパスを通す
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
- 最新バージョンをインストール
nodebrew install-binary latest
- nvm-windows https://blog.clock-up.jp/entry/2018/02/10/nodejs-manager-on-windows
- インストーラーのDownload (nvm-setup.zip) 解凍してインストール https://github.com/coreybutler/nvm-windows/releases
- https://angular.jp/
- dotnet new angular でプロジェクトにAngular CLI(ng)がインストールされるので、それを使用する場合
npm run ng --version
- Angular CLI をグローバルにインストール
$ npm install -g @angular/cli@12.2.2
- ClinentApp/dist が生成される
$ ng build
$ ng serve
- ng e2e Protractorを使用したエンドツーエンドテスト
$ ng g service services/Employee
https://docs.microsoft.com/ja-jp/dotnet/core/tools/dotnet-new-sdk-templates#spa
- カレントディレクトリにプロジェクトを生成
$ dotnet new angular -o visappproto
- テストプロジェクトの作成
$ dotnet new xunit -o visappproto_test
- ソリューションの作成とプロジェクトの追加、テストプロジェクトに参照の追加
$ dotnet new sln -o .
$ dotnet sln add visappproto
$ dotnet sln add visappproto_test
$ dotnet add ./visappproto_test/visappproto_test.csproj reference ./visappproto/visappproto.csproj
$ dotnet watch run
- Angular : ClinentApp/src/app/counter Sample
- Angular : ClientApp/src/app/fetch-data Sample
- ASP.NET Core : Controllers/WeatherForcastController.cs
$ cd ClientApp/src/app
要素 | コマンド |
---|---|
モジュール | ng g moduole {{name}} |
コンポーネント | ng g component {{name}} |
ディレクティブ | ng g directive {{name}} |
パイプ | ng g pipe {{name}} |
サービス | ng g service {{name}} |
ガード | ng g guard {{name}} |
クラス | ng g class {{name}} |
インターフェース | ng g interface {{name}} |
列挙 | ng g enum {{name}} |
- main-frame コンポーネントを追加
$ cd ClientApp
$ ng g component components/main-frame --module=app.module
CREATE src/app/components/main-frame/main-frame.component.css (0 bytes)
CREATE src/app/components/main-frame/main-frame.component.html (25 bytes)
CREATE src/app/components/main-frame/main-frame.component.spec.ts (650 bytes)
CREATE src/app/components/main-frame/main-frame.component.ts (284 bytes)
UPDATE src/app/app.module.ts (1267 bytes)
- app.module.ts に参照が追記される
- RouteModule.forRoot に追記
imports: [
:
RouterModule.forRoot([
:
{ path: 'main', component: MainFrameComponent },
])
],
- nav-menu.component.html にリンクを追加
<li class="nav-item" [routerLinkActive]="['link-active']">
<a class="nav-link text-dark" [routerLink]="['/main']"
> Main</a
>
</li>
- Home画面のメニューにMainを追加
- Mainクリックで作成したコンポーネント画面に遷移
- https://demo.grapecity.com/wijmo/docs/GettingStarted/Angular-Components
- https://demo.grapecity.com/wijmo/docs/GettingStarted/Referencing-Wijmo-NPM
$ cd ClientApp
$ npm install @grapecity/wijmo.angular2.all
- https://docs.microsoft.com/ja-jp/aspnet/mvc/overview/older-versions-1/controllers-and-routing/aspnet-mvc-controllers-overview-cs
- クラス名は「Controler」で終わらなければならない
- dotnet watch run で起動時、Web API用のポートが用意される(proxy.conf.js)
- Progmra.cs 参照
-
[Fact] 属性で、テスト ランナーによって実行されるテスト メソッドを宣言
-
テストプロジェクトフォルダから、以下を実行
$ cd visappproto_test
$ dotnet test
- フィルタをかける
$ dotnet test --filter AutoCompleteControllerTest
$ dotnet add package Moq --version 4.16.1
- https://github.com/serilog/serilog-aspnetcore
- https://github.com/serilog/serilog-extensions-logging
- https://www.claudiobernasconi.ch/2022/01/28/how-to-use-serilog-in-asp-net-core-web-api/
- https://minato128.hateblo.jp/entry/2017/09/12/232155
- https://qiita.com/panda728z/items/7638c84d0e07a9f85ec3
- https://ichiroku11.hatenablog.jp/entry/2018/12/05/232457
dotnet add package Serilog.AspNetCore --version 5.0.0-dev-00259
- SQL Developer 接続
- Connection文字列は、/Models/VisAppProtSettings.cs に記述したものをDI
$ dotnet add package Oracle.ManagedDataAccess.Core --version 3.21.50
- /Controllers/SimpleDataAccessController.cs
$ dotnet add package MySql.Data --version 8.0.28
$ dotnet add package Dapper --version 2.0.123
- ClientApp/src/app/orm-data-access
- Controllers/OrmDataAccessController.cs
- ngx-bootstrap
- ngx-bootstrap npm
- Bootstrapのラッパー
- Bootstrapの機能をコンポーネント、ディレクティブとして呼び出すことができる
$ ng add ngx-bootstrap
$ ng add @angular/material
? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
- https://www.creative-tim.com/product/material-dashboard-angular2
- Angular Material でカスタムカラーを使う
- カラーパレット生成
- カラーシステム
- Angular Materialのカスタムテーマを設定
- Angular Material _palette.scss
- FrexGrid
- visappproto/ClientApp/src/app/components/employees
- IISの構成及び、ASP.NET Core Runtime 6.0.1 Hosting Bundle のインストール
- ASP.NET Core Runtime 6.0.1 Hosting Bundle
- アプリケーションの発行
- 本体プロジェクト直下
- 発行されたら、IISのサイトにコピー
$ dotnet publish
visappproto -> ~/Workspaces/visappproto/visappproto/bin/Debug/net6.0/publish/
- EXEC : error : initial exceeded maximum budget. Budget 1.00 MB was not met by 171.82 kB with a total of 1.17 MB.
- angular.json
"budgets": [
{
"type": "initial",
"maximumWarning": "5mb",
"maximumError": "10mb"
},
- dotnet watch run ではなく、以下いずれかで直接起動する
npm start
ng serve
- Node バージョン下げる