これは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を表示している。