The sky is the limit

ハイブリッドアプリ開発、人工知能(機械学習など)に関する備忘録 たまに宇宙のことも語る【AngularJS、Monaca、Cordova、OnsenUI】

【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

以上!