読者です 読者をやめる 読者になる 読者になる

north-memo

数学できない方の数学科のブログ、一応デザイナー…なのか…?

Reactを勉強した(?) 4日目

引き続きAngularJSを勉強している。

今日学んだこと

1 Static Template

普通にHTMLを書くようにをapp/index.htmlに書くと反映される

2 Angular Templates

View と Template

  • View : Model(データ構造)をHTMLテンプレートに通して反映したもの
  • HTMLテンプレートについて
    • ng-app : モジュール(後述)を読み込む
    • ng-controller : DOMのsub-treeを担当している
    • ng-repeat : each文みたいな書き方が出来る(変数名 in 配列)
    • {{}} : コントローラーのモデルから参照できる

Model と Controller

  • Model : コントローラーの中にある、中にリテラルで記述されたオブジェクトがある簡単な配列
  • Controller : $scope という引数を持つ構造的な関数。モデルをインスタンス化するのがコントローラー
  • app.jsでng-appのmoduleを定義する

    The PhoneListController controller attaches the phone data to the $scope that was injected into our controller function. This scope is a prototypal descendant of the root scope that was created when the application was defined. This controller scope is available to all bindings located within the tag. ↑の記述はさっぱり意味がわからなかった

Scope

  • Scopeの概念はAngularJSにおいてかなり重要
  • Template, model, controllerを一緒に動かすためののりみたいな役割をするもの
  • コレによって model と views を切り分ける
  • 一方で model が変更すれば views にも反映し、逆もまた然りみたいな

Testing

controllerとviewを切り分けたことによってテストが簡単になるらしいが、テストをそもそもそんなに知らないので読み飛ばした

Experiments

やってみよう、みたいな所。実際にやってみたよ!