AngularJs Scope and AngularJs RootScope

Friday, January 22nd, 2016 (0 Comment)

1. What is AngularJs Scope?

Angularjs Scope is an object which responsible for communication between the controller and view the data of the application. It will take the form expression, that means the model will be declared right with specifications, the Scope object will transmit the action or the corresponding data and can transmit the events through this object.

Angularjs Scope provide expressions like the current template engine, for example, to display the fullname, then we will declare as {{fullname}} and in the controller we simply assign $scope.fullname= ‘something’ , the object this will get fullname key assigned to {{fullname}} view.

$scope is a bridge between the controller and view.

If you add data to the $scope in controller, it will automatically assign the correct location information at the View. Let’s see example below:

Demo

  • Line 20-22: I declare an action ng-click=”welcome()”  means that when clicking on that input, it will call to welcome function which we define in $scope in controller.
  • Line 11: add input tag with attribute ng-model=”fullname”. This means that I declare a model with its fullname key, wants to get its data just use $scope as “$scope.fullname”, and want to set, then we will use syntax $scope.fullname = ‘value’

2. The incidence of angularjs scope

In an application AngularJS, we can use many Controller , many different $scope. You see examples below:

Demo

  • Line 9-11: declare the first view
  • Line 17-19: create a Controller to handle the first view
  • Line 12-14: declare the second view
  • Line 20-22: create other Controller to handle the second view
  • Thus, in two view are common use {{fullname}} variable, but {{fullname}} in two different controllers so should be get different values corresponding to each controller.

Output:

3. What is Angularjs RootScope ?

See the following example:

Demo

  • Line 16-21: The first Controller has $rootScope parameter additional and the second Controller will not action (empty).
  • Thus, do not transmit value for $scope in both 2 Controller that the View still have value? Because when the application is run, it will have a $rootScope variable, it is automatically generated, $rootScope variable is the highest it would cover all the $scope within it, this is not the same as $scope variable is only influence within the Controller.

Output:

4. $scope loop

Example: an outside Controller include 2 Controller inside

Demo

  • the principle of running, the outside Controller (FullnameController) will run before all inside Controller and all {{fullname}} variable have Michael value, but other Controller will auto set override new value if these Controller have set value

Output:

If remove Line 24, 27 then result is:

 

Tags: , , ,

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Leave a Reply

Your email address will not be published. Required fields are marked *