Scope of the Angularjs Introductory tutorial (scope) _angularjs

Angularjs scope (SCOPE)

Scope (scope) is the link between HTML (view) and JavaScript (Controller).

Scope is an object that has methods and properties available.

Scope can be applied to views and controllers.

How to use Scope

When you create a controller in Angularjs, you can pass $scope object as a parameter:

Angularjs instance

The properties in the controller correspond to the properties on the view:

<! DOCTYPE html>
 
 

Run Result:

Volvo

The controller creates a property name "Carname" that corresponds to the name in the view used in {{}}.

Views (HTML) can get these properties when $scope objects are added to the controller.

View, you do not need to add $scope prefix, just add the property name, such as: {{carname}}.

Scope Overview

ANGULARJS application composition is as follows:

View (views), that is, HTML.

Model, the data available in the current view.

Controller (Controller), the JavaScript function, can add or modify properties.

Scope is the model.

Scope is a JavaScript object with properties and methods that can be used in views and controllers.

Angularjs instance

If you modify the view, the model and the controller will also be updated accordingly:

<! DOCTYPE html>
 
 

Run Result:

My name is John Doe.

When you modify the value in the input box, it affects the model and, of course, the corresponding property value of the controller.

Scope of Action

It is important to understand the scope of your current use.
In the above two instances, there is only one scope scope, so it's simpler to work with, but in a large project, there are multiple scopes in the HTML DOM, and you need to know which scope you are using.

Angularjs instance

When we use the Ng-repeat directive, each duplicate entry accesses the current duplicate object:

<! DOCTYPE html>
 
 

Run Result:

• Emil
• Tobias
• Linus

Each <li> element can access the current duplicate object, which corresponds to a string and is represented by a variable x.

Root scope

All applications have a $rootScope that can function in all HTML elements contained in the ng-app instruction.
$rootScope can be used in the whole application. is the bridge of scope in each controller. Values defined with Rootscope can be used in each controller.

Angularjs instance

When you create a controller, you pass $rootScope as a parameter that you can use in your application:

<! DOCTYPE html>
 
 

Run Result:

Last name is Refsnes family member:

• Emil Refsnes
• Tobias Refsnes
• Linus Refsnes

Note $rootScope can be accessed both inside and outside of the loop object.