In other words, a logic behind AngularJS View and AngularJS Models
The main aspect which controls AngularJS is controllers itself. To define AngularJS controllers we use a directive ng-controller.
Let’s see it’s example:
Here, ng-app defines AngularJS application and name is given as “smApp” . Ultimately, it has created a root scope of application as well. This AngularJS application is within the scope of this
$scope is owner of application variables and functions. Controller creates two properties “firstName” and “lastName” with the help of $scope application object.
ng-model AngularJS directive is binding HTML input fields with controller properties “firstName” and “lastName”.
Why do we need Controllers
A question is arising here why do we need controller? Let’s understand single line definitions of followings:
AngularJS Model : – Model represents data in AngularJS application
AngularJS View:- View represents HTML part of the application
One important application object that is available at all three layers is Scope denoted by $Scope. We’ll learn more about AngularJS Scope later in this article.
In the last example of this article, we have seen that application properties (e.g. firstName and lastName) can be set inside controller. But, how to define methods in AngularJS application.
Let’s see an example and understand it’s implementation and execution.
In this example, we can see a method fullName() is called in AngularJS application which is defined in controller part of application.
As we are using an application object $Scope a multiple locations, lets understand it as well.
If an application is small, there is no issue to find out the scope you are dealing with. But if application is large and there are multiple scopes where certain sections have access to fixed set of available scopes. then?
Basically, there are two type of scopes in AngularJS application:
- Root Scope
All applications have $rootScope . This scope is created on the HTML element contains ng-app directive and available for entire application.
- Current Scope
This $scope is created on the HTML element which contains ng-controller directive.
If root scope and current scope both have a property of same name then the value of current scope will be used by application.
Let’s understand it using an example:
Here the value of color property in controller part is Green otherwise it’s Red throughout the application due to availability of $rootScope.