Angular1 Controllers


// Angular 1 - Controllers:

Angular allows us to dynamically assign a Controller through the $routeProvider 
service, which is much more flexible. From now on let's use this instead of 
using ng-controller="" to declare Controllers.

Controllers are the middleman between the Model and the View, they drive the 
Model and View changes. Imagine that the controller is given some html from the 
route and a javascript object from the dependency injection; with these two 
things, the controller will tell the view (the html) what it can do by giving 
it scope variables and maybe a few functions.

A good Controller will have as little logic in it as possible, and should only 
be used for two things: Binding the Model to the View (initializing the View) 
and adding helper functions to the View.

If we go through the Angular documentation examples (available at 
we'll notice Model data being declared in the Controller. While this is okay for 
examples, the Controller easily becomes the Model as well - which is very bad 
for many reasons.

The .controller() method is another way to define a controller:

app.controller('InboxCtrl', function () {
   // Model and View bindings
   // Small helper function not needed anywhere else

Each controller has access to a $scope and some html. $scope is the most 
documented way of adding properties and methods to our view. Each 
'ng-controller' attribute specifies a scope of HTML to manage.  That scope has 
access to the same $scope as the Controller function.

Using $scope isn't the only way to pass data to the front end. Many developers 
use a combination of the "Controller As" configuration options along with the 
this keyword.

app.controller('InboxCtrl', function ($scope) {
   // initialize the title property to an array for the view to use
   $scope.title = "This is a title";
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License