Layout header や footer 等 全てのページで使われるパーツ ng g component layouts/componentName Pages ページごとのコンテンツを表示するページ ng g component pages/componentName Parts layout や page で使われるカードなどの UI パーツ ng g component parts/componentName テストをするためには必要だが、無駄なファイルを増やさないために ng generate component componentName --skip-tests でspecファイルを作らずに済む。 コンポーネントを呼び出したい <app-componentName></app-componentName> で、コンポーネントを呼び込む。
Angular Material UIのカラーパレットがどうにもパッとしない。 ということで、カスタムカラーを使用することにした。 カスタムカラーを使用するためにはインストールの段階でカスタムカラーを使用するよ、という宣言が必要だがその方法は前回書いたので、参考にしてほしい。 さて、さっそくカスタムカラーを設定していく。 手順としてさらっていくと、自作のパレットを作成し、それを適用するというそれだけのこと。 なので、まずは自作のパレットを作成する。 src/assets/_palette.scssを作成し、そこにカラーを書いていく。 例えばこんな感じに。 $custom-primary: ( 50: #e8f5ff, 100: #c5e5ff, 200: #9fd4ff, 300: #78c2ff, 400: #5bb5ff, 500: #3ea8ff, 600: #38a0ff, 700: #3097ff, 800: #288dff, 900: #1b7dff, A100: #ffffff, A200: #ffffff, A400: #cce0ff, A700: #b3d1ff, contrast: ( 50: #000000, 100: #000000, 200: #000000, 300: #000000, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #000000, ), ); 次に、このパレットを読み込む必要があるので、src/styles....
独断と偏見で言わせてもらうと、Angularはそれだけだと使いこなすことができない。 AngularはAngular側が用意してくれているモジュールをインストールして活用することで、簡単にWeb アプリを作成できるようになる。 が、そのモジュールなしで使いこなすことは難しい。 その筆頭がmaterial UIである。 material UIとは？ material UIはこちら。 要はよく使うパーツを用意されたモジュールをインストールするだけで使えるようになるというもの。 大変便利なのだが、決められたパーツなのでカスタマイズが絶妙に面倒くさいというデメリットもある。 とは言え、面倒な処理はやってくれるので、非常に重宝する。 いざ、インストール それでは実際にインストールしてみる。 $ ng add @angular/material 上記コマンドを実行後、インストールが進行し、いくつか質問されるので、下記のように回答する。 ℹ Using package manager: npm ✔ Found compatible package version: @angular/material@12.2.13. ✔ Package information loaded. The package @angular/material@12.2.13 will be installed and executed. Would you like to proceed? Yes ✔ Package successfully installed. ? Choose a prebuilt theme name, or "custom" for a custom theme: Custom ? Set up global Angular Material typography styles?...
Angularを業務で使用することがあり、かつバージョンが12指定とのことだった。 ちなみに現在のAngularのバージョンは13なので、普通にインストールすると13がインストールされる。 そこで12を指定し、インストールする方法を調べてみた。 Angular12をインストールする バージョン指定でインストールする方法は別段他の言語と変わりなく、ただただ末尾に指定バージョンを記載するだけでOK。 $ npm install -g @angular/cli@12.0.0 つまりこんな感じすれば12がインストールされる。 バージョンを確認する きっと問題ないけど、念のためにバージョンを確認する。 $ ng v _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 12....