{"id":3124,"date":"2015-04-07T16:15:41","date_gmt":"2015-04-07T13:15:41","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=3124"},"modified":"2017-12-19T16:54:03","modified_gmt":"2017-12-19T14:54:03","slug":"angular-js-controller-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-controller-example\/","title":{"rendered":"Angular.js Controller Example"},"content":{"rendered":"

Hello! In today’s example we ‘ll see how do Angular’s controllers<\/a><\/code> work.<\/p>\n

To get into this, I chose a simple form concept, where the user is prompt to insert his username. This updates an informative message (i.e. “Your username is “); I’ll also include a reset button, for demonstration purposes.
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n[ulp id=’LXJcMJZXSsqGXYW8′]<\/p>\n

1. Required Background<\/h2>\n

Before getting into the technical part of this example, let me introduce you the $scope<\/a><\/code> element.<\/p>\n

1.1 What are scopes?<\/h3>\n

AngularJS supports the MVC pattern<\/a>, with the $scope<\/code> object associated with the application model. In fact, it’s the glue between View and Controller. In addition, they hold the Model data that we need to pass to View and use Angular’s two way data binding to bind model data to View.<\/p>\n

Their responsibility is to initialize the data that the View needs to display. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application.<\/p>\n

1.2 What are controllers?<\/h3>\n

Generally, an Angular controller is a JavaScript constructor function that augments the $scope<\/code> object. It can be attached to the DOM through the ng-controller<\/code> directive, where Angular instantiates a new Controller object, using the specified controller’s constructor function. Using a controller, we can instantiate a new child scope as an injectable parameter to controller’s function. The injected parameter is accessible through $scope<\/code>.<\/p>\n

1.2.1 How to initialize the state of a $scope<\/code> object<\/h4>\n

When creating an application, we need to set up the initial state for the Angular $scope<\/code>. This can be feasible by attaching properties to the $scope<\/code> object. These properties contain the View (the Model, which will be presented by the View). All the $scope<\/code> properties will be available to the template<\/a> at the point in the DOM, where the controller is registered.<\/p>\n

1.2.2 A small example<\/h4>\n

We here create a HelloController, which attaches a helloMessage<\/code> property containing the string “Hello World!” to the $scope<\/code>:<\/p>\n

\r\nvar myApp = angular.module('myApp',[]);\r\n\r\nmyApp.controller('HelloController', ['$scope', function($scope) {\r\n  $scope.helloMessage= 'Hello World!';\r\n}]);\r\n<\/pre>\n
What is actually done, is an Angular module<\/a> creation ( myApp<\/code> ) for our app. We then add the controller’s constructor function to the module, using the .controller()<\/code> method. This keeps the controller’s constructor function out of the global scope.<\/p>\n
Next, we attach our controller to the DOM using the ng-controller<\/code> directive. The helloMessage<\/code> property can now be data-bound to the template:<\/p>\n
\r\n<div ng-controller="HelloController">\r\n  {{ helloMessage }}\r\n<\/div>\r\n<\/pre>\n
1.2.3 Controllers’ use case<\/h4>\n
Generally, we usually use controllers either to setup the initial state of the $scope<\/code> object or to add behavior to the $scope<\/code> object.<\/p>\n
Cases that we cannot use controllers are to:<\/p>\n