Angularフロントエンドプロジェクト(ng-zorroコンポーネントライブラリを使用)

最近やっているフロントエンドプロジェクトを共有し、フロントエンド選択型Angular、コンポーネントライブラリ選択はng-zorro(公式サイト:http://ng.ant.design/docs/introduce/zh).プロジェクト構造およびプロジェクトで使用されるいくつかの汎用ライブラリ、例えばルーティング多重ラベル、ルーティングガード制御などはng-alain(公式サイト:https://ng-alain.com/zh,https://github.com/ng-alain/delon).
ng-zorroとng-alainはアリババ社から来た.感謝します.
一、プロジェクト構築
プロジェクトの生成手順を大まかに説明します.ng lessエンジニアリング、ng-zorroの導入、jqueryの導入、echartsの導入、layerの導入など.
1.1、angular作成プロジェクト(less)

ng new xxx --style less

ngコマンドはプロジェクトを作成します.xxxはプロジェクトの名前です.ここのスタイルはlessの方法を採用しています.lessはcssと完全に互換性があるからです.lessにはcssのフォーマットを直接書くことができます.
1.2.、nz-zorro導入(-themeテーマパラメータを導入zorroスタイルの変更を容易にする)

ng add ng-zorro-antd --theme

srcディレクトリの下でthemeが自動的に生成されます.less.後でzorroのデフォルトスタイルを修正する必要がある場合は、直接ここで修正します.参考になるhttp://ng.ant.design/docs/customize-theme/zh中身.
1.3、jquery導入
jqueryの多くのオープンソースライブラリはjqueryに依存する必要があります.だから私たちはまず彼をできるだけ導入します.

npm install --save jquery

npm install @types/jquery --save

angular.jsonファイルにjquery対応のjs依存を追加します.“node_modules/jquery/dist/jquery.min.js”

1.4.echarts導入(グラフコントロール)
私たちのプロジェクトでは、アイコンコントロールを大量に使用する必要があります.そして私たちのグループの他の兄弟はechartsに詳しいです.echartsを導入しました

npm install echarts --save

npm install ngx-echarts --save

angular.jsonはechartsに対応するjs依存性を追加します.echarts.min.js依存、「node_modules/echarts/dist/echarts.min.js」

5.layer導入(ポップアップコントロール)
プロジェクト全体の弾窓はlayerを使っているので、layerも導入しました.layerダウンロードアドレスhttps://layer.layui.com/緑色版を選んでダウンロードします.

layerダウンロードして解凍し、layerファイルをassetsディレクトリの下にコピーします(注意ですよassetsディレクトリの下で、ディレクトリが異なる場合は次のangular.jsonにcss、jsを導入しても対応するパスに変更します).

angular.json追加css依存"src/assets/layer/theme/default/layer.css"

angular.json追加js依存"src/assets/layer/layer.js"

6.統一スタイル
統一スタイル、目的も便利なスタイルの統一管理で、例えばmenuの高さ定義が低すぎる、itemの高さなど、後でsrc/styles/themeを修正するだけです.lessファイルでいいです.

src/stylesディレクトリの下にthemeを新規作成します.less、同時にangular.jsonに「src/styles/theme.less」

を追加

src/stylesディレクトリの下にindexを新規作成します.less、同時にangular.jsonに「src/styles/index.less」

を追加
スタイルファイルはangularにあることに注意してください.jsonの中の順番、最後から1番目のstyles.less、最後から2番目のindex.最後から3番目だless
theme.lessファイルは、適用するスタイル変数全体を統一的に配置します.たとえばmenuの高さ、タイトルバーの高さ、フォントの色などです.index.lessの中には私たちのアプリケーション全体の共通のスタイルが置いてあります.
angular.jsonファイルの内容は、jquery、echarts、layerが導入して追加したjs、cssの断面図を以下に示す.

8.推奨項目構造
プロジェクト全体のディレクトリ構造は、ng-alainのディレクトリ構造を完全に参照します.より詳細な内容はan-alain(https://ng-alain.com/zh)を参照してください.

├── core
│   ├── net
│   │   ├── default.interceptor.ts(     )
│   │   ├── http-base.service.ts(          )
│   ├── startup
│   │   ├── startup.service.ts(        )
│
├── entity (   )
│   ├── request(request   )
│   │   ├── xx
│   │   │   ├── xx.ts
│   │   ├── xx
│   │   │   ├── xx.ts
│   ├── response(response   )
│   │   ├── xx
│   │   │   ├── xx.ts
│   │   ├── xx
│   │   │   ├── xx.ts
│   ├── xx
│   │   ├── xx.ts
│   ├── xx
│   │   ├── xx.ts
│
├── layout (    )
│   ├── default(      )
│   │   ├── xx.html
│   │   ├── xx.less
│   │   ├── xx.ts
│   │   ├── README.md
│ 
├── routes
│   ├── dire1
│   │   ├── index.html
│   │   ├── index.less
│   │   ├── index.ts
│   │   ├── README.md
│   ├── dire2
│   │   ├── index.html
│   │   ├── index.less
│   │   ├── index.ts
│   ├── routes.module.ts
│   ├── routes-routing.module.ts
│   ├── README.md
├── shared(       )
│   ├── components(    )
│   │   ├── comp1
│   │   │   ├── index.ts
│   │   │   ├── README.md
│   │   ├── comp2
│   │   │   ├── index.ts
│   │   │   ├── README.md
│   ├── directives(    )
│   │   ├── dire1
│   │   │   ├── index.ts
│   │   │   ├── README.md
│   │   ├── dire2
│   │   │   ├── index.ts
│   │   │   ├── README.md
│   ├── shared.module.ts
│   ├── README.md
│

二、特別に分かち合う
2.1、nz-zorroコンポーネントライブラリスタイルの修正
nz-zorroコンポーネントライブラリの使用時にnz-zorro対応themを修正する.lessファイルがまだ私たちのニーズを満たしていないとき.試用:host::ng-deepまたはただ::ng-deep.以下のコードで示します.

:host ::ng-deep .ant-input-affix-wrapper .ant-input:not(:first-child){
  padding-left: 30px;
}

2.2、大丈夫ng-alain対応delonライブラリのコードを見て
delonライブラリコードアドレスhttps://github.com/ng-alain/delon少なくとも私たちのプロジェクトでは権限制御について、ルート服用ラベルは完全に参照されているdelonライブラリのコードです.
今回の分かち合いはこれだけです.プロジェクトの作成に重点を置きます.アリが与えたnz-zorroコンポーネントライブラリとng-alain足場にも特に感謝します.