Binding events through code

by Pasan Ratnayake

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!-- the ngApp tag is in the body -->
<div id="myDiv" ng-controller="testController">
    <div>Hello, {{name}}!</div>
    Move your mouse over me
    <input type="button" id="myButton" value="Click Me"></input>
</div>

JavaScript

angular.module('testApp.services', []);
angular.module('testApp.directives', []);
angular.module('testApp.controllers', ['testApp.services', 'testApp.directives']);
angular.module('testApp', ['testApp.services', 'testApp.controllers', 'testApp.directives']);

/*
 * To declare a directive
 * angular.module('testApp.directives').directive('testDirective', function() { return {}; });
 * 
 * To declare a service
 * angular.module('testApp.services').factory('testService', function() { return {}; });
 */
// 

angular.module('testApp.controllers').controller('testController', ['$scope', function ($scope) {
    $scope.name = 'CodeHawkz';
    var buttonElement = angular.element('#myButton');
    buttonElement.bind('click', function (e) {
        alert('This is a code bound event');
    });
}]);

angular.module('testApp').run(['$document', function($document) {
    var bodyElement = angular.element($document);
    bodyElement.bind('click', function (e) {
        alert('bound to document');
    });
}]);