ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

今さら聞けないmonacaでのangularのngControllerのベストプラクティスって

angularjs angular monaca onsen ui onsenui JavaScript cordova

monacaでangularを選択した際に、ng-clickを使ってアラートを表示させたいだけなのに、なんで、こんな複数パターンが存在するんだろうか？

1.asを使ってプロパティー名を使って実装するパターン

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-controller="ViewPageController as hoge">
  <button ng-click="hoge.alert()">click me!</button>
</div>
<script>
var module = angular.module('mainApp',[]);
module.controller('ViewPageController', function() {
  this.alert = function(){
    alert("hello angular");
  };
});
</script>
</body>
</html>

2.asを使わずに$scopeを使って実装するパターン

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-controller="ViewPageController">
  <button ng-click="alert()">click me!</button>
</div>
<script>
var module = angular.module('mainApp',[]);
module.controller('ViewPageController', ['$scope',function($scope) {
  $scope.alert = function(){
    alert("hello angular");
  };
}]);
</script>
</body>
</html>

果たしてどっちがいいんだろうな？