The initial setup:
<div ng-app="phoneApp">
<div ng-controller="AppCtrl">
<div class="button" ng-click="AppCtrl.sayHi()">Click me!</div>
</div>
</div>
var app = angular.module('phoneApp', []);
app.controller("AppCtrl", function ($scope) {
this.sayHi = function () {
alert("hi");
};
return $scope.AppCtrl = this;
});
It is possible to declare controllers, directives, and services in a different format than that above.
var app = angular.module('phoneApp', []);
var controllers = {};
controllers.AppCtrl = function ($scope) {
this.sayHi = function () {
alert("hi");
};
return $scope.AppCtrl = this;
});
app.controller(controllers);
Here, the controller is built as a standalone function object identical to the function parameter from before, and passed to the app.controller() method parametrically.
The same can be done for directives
return $scope.AppCtrl = this;
});
var directives = {};
directives.panel = function () {
return {
restrict: "E"
};
};
app.directive(directives);
app.controller(controllers);
This can be taken one step further, by grouping the sets of controllers, directives, etc. into a single app-wide variable:
var phoneAppStuff = {};
phoneAppStuff.controllers = {};
phoneAppStuff.controllers.AppCtrl = function ($scope) {
phoneAppStuff.directives = {};
phoneAppStuff.directives.panel = function ($scope) {
app.directive(phoneAppStuff.directives);
app.controller(phoneAppStuff.controllers);
This grouping style doesn’t work for filters.
There's more to learn!