これはAngularJSを勉強した内容をまとめたものです。

今回したこと

MVCな構造を作ってみる
処理内容を確認

環境

Ubuntu 14.04 (VirtualBox)
AngularJS 1.4.7

MVCな構造を作ってみる

１. 以下のようなhtmlを用意

<!DOCTYPE html>
<html ng-app="testMod">
  <head>
    <title>MVC</title>
    <script src="angular.min.js"></script>
    <script src="mvc.js"></script>
  </head>
  <body ng-controller="testController">
    {{str}}
  </body>
</html>

２. 以下のようなjsを用意

angular.module('testMod', [])
  .controller('testController', function($scope, HelloWorld){
    $scope.str = HelloWorld();
  })

  .value('HelloWorld', function(){
    return "HelloWorld"
  });

３. ブラウザでhtmlをみてみる

HelloWorldが出せた！！

処理内容を確認

View

Viewはhtmlの{{str}}の部分。
Viewの式は{{}}で囲む
式の結果が出力される

Model

Modelはjsの以下の部分

  .value('HelloWorld', function(){
    return "HelloWorld"
  });

valueメソッドでHelloWorldという名前のサービスを作成している。
HelloWorldサービスは"HelloWorld"というデータを返す。
(今はあまりに味気ないけど、本来はサーバー側からデータを取得したり、更新するデータを渡したりするらしい。。)

Controller

Controllerはjsの以下の部分

  .controller('testController', function($scope, HelloWorld){
    $scope.str = HelloWorld();

contorllerメソッドでtestControllerという名前のコントローラーを作成している。
contorllerメソッドは第一引数にコントローラー名、第二引数にコンストラクタを渡すみたい。
コンストラクタに渡している$scopeはView側に値を渡すのに使う。HelloWorldはvalueメソッドで作ったサービス。
Viewで参照している"str"にモデルから渡された"HelloWorld"を入れている。

そのほかポイント

jsファイルの以下の部分はモジュールを定義している

angular.module('testMod', [])

moduleメソッドで'testMod'という名前のモジュールを作成。
モジュールでコントローラーやモデル定義する。

そしてhtml側でどのモジュール、コントローラーを使うか指定する

<!DOCTYPE html>
<html ng-app="testMod">　<!-- ここで利用するモジュールを指定 -->
  <head>
    <title>MVC</title>
    <script src="angular.min.js"></script>
    <script src="mvc.js"></script>
  </head>
  <body ng-controller="testController"> <!-- ここで利用するコントローラを指定 -->
    {{str}}
  </body>
</html>

指定したコントローラーのコンストラクタで$scope.strにモデルからもらった"HelloWorld"をいれて、Viewで($scopeの)strを表示している。

AngularJS勉強メモ その2(HelloWorldをMVCにわける)