【AngularJS】$scopeを使う場合と使わない場合の比較【スコープ】

今回はAngularJSの$scopeについて調べた。

f:id:duo-taro100:20160218004611p:plain

$scopeとは？？

it-innovation.hatenablog.com

上記の記事でも書いたが、

AngularJS 2系では$scopeが廃止される

$scopeを使わないでも実装が可能

ということもあって、基本的には$scopeを使わない方針。

$scopeを使った場合、使わなかった場合の比較を行う。

赤文字の部分が変わったところ。

$scopeを使った場合

index.html

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="js/HelloWorld.js"></script>

</head>
<body>
 <div ng-app="myApp">
  <div ng-controller="myController">
   {{message}}
  </div>
 </div>
</body>
</html>

HelloWorld.js

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
  $scope.message = 'Hello Tom!';
});

$scopeを使わない場合

index.html

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="js/HelloWorld.js"></script>

</head>
<body>
 <div ng-app="myApp">
  <div ng-controller="myController as mycon">
   {{mycon.message}}
  </div>
 </div>
</body>
</html>

HelloWorld.js

var app = angular.module('myApp', []);
app.controller('myController', function() {
  this.message = 'Hello Tom!';
});

変わった部分

index.html

$scopeを使う場合

　　　　　ng-controller = "myController"

$scopeを使わない場合

ng-controller = "myController as mycon"

$scopeはindex.htmlへの記述がなくても、データモデルをビューへ渡せる。$scopeを使わない場合はその代わりに、「as」を使う。

HelloWorld.js

$scopeを使う場合

　　　　　function($scope){

　　　　　　　$scope.message = 'Hello Tom!';

}

$scopeを使わない場合

　　　　　function(){

　　　　　　　this.message = 'Hello Tom!';

}

$scopeの代わりに、「this」が使われている。また、引数も無くなっている。

このように、$scopeを使わない実装もできるので、覚えておく価値はある。

今後、当ブログでは$scopeを使わない実装をしていく。

f:id:duo-taro100:20160322234907p:plain