Search within TutorialsPark

AngularJS Scopes and Controllers

Learn the Basics of AngularJS Controllers and Scopes, Creation Setup and Modifications

AngularJS Controllers and Scopes : Introduction

In AngularJS Controllers serve as a link between the data Model and the View, all the data and Services to the View is provided via a controller, it defines the business logic inorder to affect changes in the data model based on user actions.

Every AngularJS Application needs atleast one controller to work, however user can create as many controllers as needed, users can even define how the controllers are organised, the data controllers can access, and their relations with the view.

Controllers provide the data and logic to Views via scopes, the data-binding feature of AngularJS is due the scopes. In other words, a scope is like an object, it has properties and function attached to it, a scope object is used to hold values of data model.

AngularJS Scopes and Controllers : Creating and Using Controllers

In AngularJS Controllers are created using the method controllers provided by AngularJS Module object.

The arguments of the controller method are name of the controller and the function to create Controller i.e the constructor.

All controllers use the service $scope inorder to provide the view with a scope, and to set the data and logic to be used to create the view.

Example: AngularJS Forms Validation FeedBack

Give it a TRY! » Note: The $scope is an object provided by a service called $rootScope

AngularJS Controllers and Scope : Scope Setup

AngularJS Controllers can provide data to the view using scopes, scopes define the relationship between the controllers and view and also provide a mechanism to perform these actions, like data-binding.

To make use of scopes, you need to define the data and behaviours which then can be called from the binding expressions or directives within the the view.You can create Properties on the $scope object that is passed to the controller function, and also assign values and functions.

In the demo, the scope of the controller is set using the property device, an inital value is assigned to it as well, the behaviour Company is function which accepts device name and returns the Name of Company. The directive ng-model is used to create data-binding.

Example: AngularJS Forms Checkbox Attributes

Give it a TRY! » Note:If You alter the name of device to Galaxy, the Company Name is changed in Realtime as well.

AngularJS Scopes and Controllers : Modifying the Scope

The most exciting feature of scopes it that is reacts to change in realtime, it can update all the related data provided by the behaviour. The modifications done on the ng-model directive is updated automatically.

In the demo, an array of device names is created and used with the attribute ng-options within the element select, it generates a set of option elements.When value of device is changed, the change is reflect in Company

Example: AngularJS Scopes and Controllers Modifying the Scope

Give it a TRY! » Note:Pick a value from the select to see a change in the Name of the company.