AngularJS1.x その0014 DI(依存性注入)コンテナー機能を使う

参考にさせて頂いたページ

AngularJSの依存性注入を利用するには？ - Build Insider

AngularJSのDIの仕組み、minify対策は覚えておこう！ - Qiita

依存性注入(DI) | AngularJS 1.2 日本語リファレンス | js STUDIO

DIを使用しない記述

これまではcontrollerメソッドの第二引数には、以下のようにfunctionだけをそのまま渡していた。

// myAppモジュールを作成
var app = angular.module('myApp', []);

// myAppモジュールにSubmitCtrlコントローラーを登録
app.controller('SubmitCtrl', ['$scope', '$element', function($scope, $element) {
  $scope.onclick = function($event){
    // ページ遷移をキャンセル
    $event.preventDefault();
    // input要素をクリック $element[0]はSubmitCtrlの要素自身
    $element[0].nextElementSibling.click();
  }
}]);

DIを使用した記述

controllerメソッドの第二引数を以下のように配列にした。

// myAppモジュールを作成
var app = angular.module('myApp', []);

// myAppモジュールにSubmitCtrlコントローラーを登録
app.controller('SubmitCtrl', ['$scope', '$element', function($scope, $element) {
  $scope.onclick = function($event){
    // ページ遷移をキャンセル
    $event.preventDefault();
    // input要素をクリック $element[0]はSubmitCtrlの要素自身
    $element[0].nextElementSibling.click();
  }
}]);

browserifyの話

browserifyでrequireしてjsファイルを結合すると動かないという症状が直るかと思ったけど、直らなかった。

何か書き方が駄目なのかな。