なになれ

IT系のことを記録していきます

コードが公開されているAngularの使用例をまとめてみた

モチベーション

Vue.jsのドキュメントにある使用例(https://jp.vuejs.org/v2/examples/)の内容が魅力的だったので、Angularにもそういうものがないかを探してみました。
実際に動くものを見ると、どんなことができるのかイメージできるので良いと思っています。

使用例の紹介

Tour of Heroes

stackblitz.com

Angular公式ドキュメントのチュートリアルです。まずはこれでAngularの基本を学びつつ、どんな風に作って、どんなことが出来るかを理解できると思います。

Angular+Firebaseでチャットアプリを作る

qiita.com

AngularからFirebaseを使うための内容が細かく解説されています。Firebaseを使うことやNgRxの説明など一通りAngularの基本的なことを学んだ人の次のステップとして学んでおくと良いことが色々載っていると思います。
チュートリアル形式で学べるようになっています。2018年12月15日の時点でまだ未完のようです。

Angular RealWorld Example App

github.com

Mediumのクローンアプリです。モジュールの分け方などAngular公式のスタイルガイドに則って作られているちゃんとしたアプリなので学べるものが多いです。
Tour of Heroesを一通り実施した人が実用的なアプリを作りたい時に参考になるアプリだと思います。認証処理が参考になります。

Angular NgRx Material Starter

github.com

Angular+NgRx+Angular Materialを使って作成されたスタータープロジェクトです。
NgRxが全面的に使われていてNgRxを学びたい人にとっては参考になる内容だと思います。
以下の内容が盛り込まれています。

  • カスタムテーマのサポート (4つのテーマがある)
  • フィーチャーモジュールの遅延ロード
  • ローカルストレージでの画面状態の永続化
  • @ngrx/effects によるAPIリクエストの発行
  • レスポンシブデザイン対応
  • angular-material and custom components in SharedModule
  • Angular Materialと SharedModule内にカスタムコンポーネントを配置
  • CypressによるE2Eテスト
  • プロダクション向けDockerfileによるアプリ公開

E2Eテストが用意されているのは珍しいと思います。

Hackernews clone using Angular 5

github.com

シンプルかつ実用的なアプリになっているのが良いです。Angular5なので若干古いです。

TuneIn

github.com

おしゃれなアプリです。こちらもシンプルかつ実用的なアプリです。Angular6なので比較的新しいです。

Angular公式サイト

github.com

Angularの公式サイトですが、実はAngularで作られています。コードも見ることができます。
流石に作り込まれている感じでパッと見ではよく分かりません。
dgeniというドキュメントを生成するツールが使われているようです。

Angular Console

github.com

Angular CLIの機能+αをGUIで使えるようにしたプロダクトです。
Nxという大規模組織向けのAngularプロジェクト構成ツールが使われているため、通常のAngularプロジェクト構成とは異なるので理解しにくいところがあります。
NxはAngular Consoleを作った会社が作っているライブラリのようです。
ElectronやGraphqlを利用しているのが注目ポイントだと思います。

まとめ

とりあえずアプリケーションっぽいものを集めました。コードが公開されているものを前提にしたのでだいぶ限定されました。
Angularが使用されているところを調べてみると色々なところで使われているんだなぁということが分かりました。

https://www.madewithangular.com/

whouse.angular.jp

サンプルやUI部品での使用例を集めるのも良さそうです。