How angular controllers bind with view?

Question

I dont understand how controllers is connecting with views in Hawtio project.

for example, view:

<div ng-controller="Core.AboutController">
  <div class="welcome">
    <div class="about-display" compile="html"></div>
  </div>
</div>

controller declaration:

module Core {
  export function AboutController($scope, $location, jolokia, branding, localStorage) {
    //...
  }
  //...
}

I expected to find something like that:

angular.module('moduleName').controller('Core.AboutController', Core.AboutController);

But found none. How it works?

Answer 1

This works because in the absence of any registration with angular i.e. angular.module('moduleName').controller('Core.AboutController' angular looks at window and tries to resolve it. Which is what

module Core {
  export function AboutController

does. After this line window.Core.AboutController will point to the correct function and that is what angular just found.

Answer 2

just look at the attribute in the first line of the HTML sample you posted.

ng-controller="Core.AboutController"

There are (As far as I know) two ways of associating a view to a controller. The first is with a an attribute, like in this example. The second is while configuring the router:

angular.module('MyApp', ['Core.Aboutcontrollers']).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/path', {templateUrl: 'partials/myfile.html'   });
}]);

Don't do both of them, or your controller will be invoked twice.