Scope of angularjs learning, angularjss.pdf

Scope of angularjs learning, angularjss.pdf

Introduction

Scope is the bond between HTML (View) and JavaScript (Controller) applications.

Scope is an object that stores the application data model. It has available methods and attributes.

Scope can be applied to views and controllers.

The scope is the binder between the Controller and view of the Web application:

Controller --> scope --> View (DOM)
Command --> scope --> View (DOM)

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

<Div ng-controller = "myCtrl"> 

Output result: walking all over the world

Create an attribute name "name" in the controller, which corresponds to the name in the view using.
When a $ scope object is added to the Controller, the view (HTML) can obtain these attributes.
View, you do not need to add the $ scope prefix, just add the attribute name, for example: {name }}.
The composition of AngularJS applications is as follows:
View (View), that is, HTML.
Model: The data available in the current view.
Controller (Controller), a JavaScript function, can be used to add or modify attributes.
Scope is a JavaScript Object with attributes and methods that can be used in views and controllers.
Let's look at an example:
<Div ng-app = "myApp" ng-controller = "myCtrl"> enter your name: <input ng-model = "name"> 

In this example,

  
 
 
   
Controller: MyCtrl, which references $ scope and registers two attributes and a method on it
 
 
   
$ Scope object: holds the data model required in the preceding example, including the name attribute, greeting attribute (Note: This is registered when the sayHello () method is called), and sayHello () method
 
 
   
View: contains an input box, a button, and a content block that uses bidirectional binding to display data.

  
The following two procedures are provided for the specific example:
1. The controller writes attributes to the scope:

Assign a value to the name in the scope, and then the input data in the scope Notification View changes. Because the ng-model enables bidirectional binding, the name changes, then, the changed value is rendered in the view.

2. Write the Controller to the scope

Assign a value to the sayHello () method in the scope. This method is called by the button in the view because the button is bound to this method through ng-click. When the user clicks the button, sayHello () is called, this method reads the name attribute in the scope, adds the suffix string, and then assigns the value to the newly created greeting attribute in the scope.

From the View perspective, the entire example process involves the following three parts:
1. Rendering logic in input: demonstrate the scopes implemented through ng-model and bidirectional binding of a form Element in the view

  
 
 
   
Use the name in ng-model to get the value from the scope. If there is already a value, use this default value to fill the current input box.
 
 
 
   
Accept user input and pass the string entered by the user to name. At this time, the attribute value in the scope is updated to the value entered by the user in real time.

  
2. logic in the button
Accept user clicks and call the sayHello () method in the scope

3. Rendering logic of {greeting}

  
 
 
   
Initial phase: the content is not displayed when the user does not click the button.
 
 
   
Value stage: After the user clicks, this expression will go to scope to obtain the greeting attribute. In this example, the scope and controller are the same. At this time, the greeting attribute already exists in this scope, and this attribute is retrieved.
 
 
   
Computing phase: Calculate the greeting expression in the current scope, and then render the view. It is a dumb to show Michael!

  
After the above two angle analysis examples, we can know that the scope object and its attributes are the only data source for view rendering.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.