Angular

プログラム

Angular Webアプリ開発入門16

今回は3つの機能のルーティングによるパスの関連付けを行い、簡単なタブ式のメニューページを作り、ドキュメントルートのリダイレクトを作成する。して、それぞれのリンクにクリックすると、ページの下の部分がそれぞれのコンポーネントに切り替わる仕組みを作り、CSSを定義しタブらしい表示を記述していく。
プログラム

Angular Webアプリ開発入門15

前回は各種コントロールとFormBuilderを使って、FormGroupやFormControlを構成する方法を学んだラジオボタン、チェックボタンの作成方法について学んだ。 今回はドロップダウンリストについて学んでいく。ラジオボタンとほぼ同じように実装することができる。
プログラム

Angular Webアプリ開発入門14

FormBuilderを使ったFormCpontorolを構成を使用し、ラジオボタンやチェクボックスの作成方法について学ぶ。ラジオボタンは全部で1つのFormContorolに結びつければよいのに対し、チェックボックスは選択された複数のFormControlに結びつけなければならない。しかも選択されたものだけがFormControlにに結びつけられるので、その数が可変で少し複雑である。
プログラム

Angular Webアプリ開発入門13

今回はFormBuilderを使用し、ユーザーから入力を受け付ける入力コントロールには、テキストボックス以外にもテキストエリア、チェックボックス、ラジオボタン、ドロップダウンリストなど、さまざまな入力コントロールがあり。Angularではそれらも同等の記法が提供されている。今回は入力フォームを簡単に記述する方法について学んでいく
プログラム

Angular Webアプリ開発入門12

リアクティブフォームにバリデータを設定する。リアクティブフォームの場合、バリデータの設定をテンプレートではなくて、コンポーネントの方に記述する。バリデータはFormControlオブジェクトを作るときに設定する。
プログラム

Angular Webアプリ開発入門11

今回はボタンがクリックされたときの処理を実装する。リアクティブフォームでは、結び付けられたFormControlオブジェクトを通じて、入力された値を取得する。(値を設定することもでき、値を設定すれば、その値がフォームに表示される)。
プログラム

Angular Webアプリ開発入門10

コンポーネントにあらかじめフォームオブジェクトなど用意しておき、テンプレートから参照するリアクティブフォームについて学んでいく。リアクティブフォームは、コンポーネントにあらかじめFormGroupオブジェクト、バリデータのオブジェクトなどを作っておく。そして、テンプレートの入力コントロールから、それらのオブジェクトを参照して利用する。
プログラム

Angular Webアプリ開発入門9

今回はバリデータを設定し、条件を設定することによってアプリの挙動を変える方法について学ぶ。Angularでは、ひとつ条件を指定するのではなく、まとめてバリデータの状態を知ることもできるようになっている。そのためには、「フォーム」でとりまとめていく。
プログラム

Angular Webアプリ開発入門8

「クリックされているかどうか」「値が変更されているかどうか」によって、出力されるクラスが変わる。そして、バリデータを設定すれば、さらに「バリデータとして指定した条件を満たしているかどうか」によってもクラスが変わる。今回は、テキストボックスが未入力の時は「赤色の下線」、入力されたら「緑色の下線」の表示する方法について学ぶ。
プログラム

Angular Webアプリ開発入門7

入力フォームを使って、ボタンがクリックされた時の処理の書き方、そしてテキストボックスに入力された値を取得し、数字や文字列を意識しながら足し算アプリを作成していく。