はじめに

最新版のチュートリアル、見た目がスタイリッシュになっています。

今回は「最初のAngularアプリをローカルで構築する」をやっていきます。よろしくお願いします。
筆者も修行の身としてやらせて頂いているので、ご指摘などどんどん書いて欲しいです。

実況開始

中身全部英語。そして右下のプレビューが全く動かない。サードパーティークッキーの許可とかしてみたけど駄目でした。Console見てみたらUncaught (in promise)が大量にあるけどこれは本質じゃないやつだろうか。ちょっとサクッと解決出来ないので諦めます。どっちみちローカルで起動するので。

0. イントロダクション

ここはインストールとかいろいろやるだけ。

1. Hello world

1-1. Download the default app

Chromeからダウンロード出来ない。Edgeからならいけた。セーフ。

1-2. Test the default app

ん？
nixファイルがよく分からないので下記の通りにやってみました。

適当なディレクトリに移動。
そこのディレクトリ直下でng new first-app(アプリ名はなんでも良い)を打つ。
ダウンロードしてきたzipフォルダを解凍し、srcフォルダをコピーして、2.で作ったfirst-appのsrcフォルダをそいつに差し替える。

なんか本質じゃなさそうですが、無事ng serve出来ました。

1-3. Review the files in the project

my-first-appディレクトリに移動し、vscode的なものを開きましょう。srcフォルダの中身が本質です。

1-4. Create Hello World

言われた通りにやると「Hello Workd!」が表示されます。

2. Create home component

いよいよAngularの核心に迫っていきます。コンポーネントを感じましょう。

2-1. Create the Homecomponent

言われた通りでOKです。

2-2. Add the new component to your app's layout

作ったHomecomponentのselectorを用いてアプリに表示させます。
言われた通りでOKのはず。私の環境だと画像が表示されないですが、そこにいるので一旦次へ。

少し分かりづらいですが、各コードは広げて全文表示できます。

2-3. Add features to HomeComponent

Homecomponent編集します。
テンプレートを作成し、スタイルを充てていきます。ここも言われたとおりで大丈夫です。というか多分ここからは言われた通りでいけるはずです。だめならその都度自分なりの解決策を書いていきます。

3. Create the application’s HousingLocation component

またComponentを追加します。どんな部品なのかは作りながら見ていきましょう。

3-1. Create the HousingLocationComponent

はい。

3-2. Add the new component to your app's layout

HomeComponentにHousingLocationComponentを挿入します。

3-3. Add the styles for the component

はい。

4. Creating an interface

次はインターフェースを作ります。

4-1. Create a new Angular interface

HousingLocationの特長一覧を入れておく型のようなものを作成します。

4-2. Add properties to the new interface

特長一覧を書きます。

4-3. Create a test house for your app

HomeComponentにHousingLocationのオブジェクトを直接書き込んでいきます。実際のシステムではデータベースから取得してきた値が使われるはずです。

5. Add an input parameter to the component

HousingLocationの特長をクライアント側から入力出来るようにするための準備をします。

5-1. Import the Input decorator

はい。

5-2. Add the Input property

ほい。

6. Add a property binding to a component’s template

6-1. Update the HomeComponent template

バインディングのための属性を追加します。

6-2. Confirm the code still works

エラー無し！

7. Add an interpolation to a component’s template

7-1. Update HousingLocationComponent template to include interpolated values

HomeComponentからHousingLocationComponentに渡されたデータをHTMLで表示させています。
コンポーネント間のデータの受け渡しが出来ました。

7-2. Confirm the changes render in the browser

OK。

8. Use *ngFor to list objects in component

7章では家の情報を1つだけ渡して表示しましたが、ここではfor文を使ってリスト表示させます。楽しくなってきましたね。

8-1. Add housing data to the HomeComponent

家のデータをたくさん追加します。

8-2. Update the HomeComponent template to use ngFor

それらをfor文で回してHousingLocationに渡していきます。

9. Angular Services

サービスというのを学びます。進めていけば「あ～こういうのか」ってなると思います。

9-1. Create a new service for your app

何はともあれhousingサービスを作ってみます。

9-2. Add static data to the new service

仮の静的なサービスを置いておきます。

9-3. Inject the new service into HomeComponent

作ったサービスをHomeComponentに挿します。

10. Add routes to the application

ページ遷移を追加して、家の詳細ページを作成します。まずはルーティングの設置です。

10-1. Create a default details component

詳細ページ用のコンポーネントを作ります。

10-2. Add routing to the application

まだエラーが出ます。routeConfigを作っていないので。

10-3. Add route to new component

ルーティングを作成します。

11. Integrate details page into application

詳細ページを完成させます。

11-1. Using routerLink for dynamic navigation

とりあえず詳細ページに飛べるようになります。

11-2. Get route parameters

はい。

11-3. Customize the DetailComponent

詳細ページを完全体にします。

11-4. Add navigation to the HomeComponent

いつでもホームページに戻ってこられるようにします。

12. Adding a form to your Angular app

ユーザーからの入力を受け付けられるようにします。

12-1. Add a method to send form data

まずはサービスにユーザー情報を受け取りconsole.logする機能を追加します。

12-2. Add the form functions to the details page

詳細ページにフォーム機能を追加します。

12-3. Add the form's markup to the details page

フォームをそれっぽくします。

12-4. Test your app's new form

ユーザー情報を入力してApply Nowを押すとその情報がコンソールに出力されます。

13. Add the search feature to your app

検索機能を追加します。

13-1. Update the home component properties

なんか追加します。

13-2. Update the home component template

はい。

13-3. Implement the event handler function

はい。検索機能が出来ました。

14. Add HTTP communication to your app

よりWebアプリっぽくしていきます。

14-1. Configure the JSON server

クラスに直書きしていた家の情報をJsonから取得するようにします。
db.jsonは、first-appディレクトリ直下に手動で作成してください。
こんな感じで確認できます。

14-2. Update service to use web server instead of local array

取得するデータをJsonからのものにします。

14-3. Update the components to use asynchronous calls to the housing service

コンポーネントにも修正がいるようです。

おわり

とりあえず一通り動かせました。なんとなくコピペで動かした箇所はまた復習したいです。.nixの使い方教えて下さい。