Angularjs Summary Two

# ANGULARJS Summary Two #

----------

* * The meaning of the controller: * *

The controller in Angularjs is a function used to add additional functionality to the scope of the view. Use it to set the initial state of the scope object and add custom behavior.

When a new controller is created on the page, Angularjs generates and passes a new $scope to the controller. The $scope can be initialized in this controller. Since ANGULARJS is responsible for handling the instantiation of the controller, it is only possible to write a control function.

function Mycontroller ($scope) {
$scope. Say = "Hello";
}

----------

The controller created above is created globally, so it is not reasonable to pollute the global namespace, it is more reasonable to create a module and to create a controller in the module

* * Note point 1: Use the Ng-controller directive to attach a Controller object to a DOM element, * *

* * Note point 2, when the module is created Ng-app does not need to be placed on the global top, but placed in the need of the place * *

Div ng-app= "myApp" >

<script type= "Text/javascript" >
var app = Angular.module (' myApp ', []);
App.controller ("Mycontroller", function ($scope) {
$scope. say= "Hello World";
});
</script>

----------

You can create a custom action that can be used in a view by simply creating a function in the controller scope. Angularjs allows us to invoke functions on the $scope in the same way that we call normal data in the view.

Built-in directive Ng-click
You can bind any other DOM element, such as a button, a link, and a click event
The Ng-click directive binds the MouseUp event in the browser with an event handler set on the DOM element

<div ng-app= "MYAPP" >
<div ng-controller= "Firstcontroller" >
<button ng-click= "Add (1)" class= "button" >Add</button>
<a ng-click= "Subtract (1)" class= "button alert" >Subtract</a>
</div>
</div>
<script type= "Text/javascript" >
var app = Angular.module (' myApp ', []);
App.controller (' Firstcontroller ', function ($scope) {
$scope. Counter = 0;
$scope. Add = function (amount) {$scope. counter + = amount;};
$scope. Subtract = function (amount) {$scope. Counter-= amount;};
});
</script>

* * Note that they are using the same scope**

----------

The system can encapsulate the business logic associated with a separate view in a separate container. It is good practice to streamline the controller as much as possible. As a ANGULARJS developer, the use of dependency injection to access the service can accomplish this purpose.

One of the main differences between ANGULARJS and other JavaScript frameworks is that the controller is not suitable for performing DOM operations, formatting or data manipulation, and state maintenance operations other than the storage data model. It's just between the view and the $scope.
Bridge.

ANGULARJS allows you to set any type of data, including objects, on $scope, and also shows the properties of the object in the view.

<div ng-app= "MYAPP" >
<div ng-controller= "Mycontroller" >
<p>{{people.name}}</p>
</div>
</div>
<script type= "Text/javascript" >
Angular.module (' myApp ', []). Controller ("Mycontroller", function ($scope) {//Note this is a shorthand form
$scope. people={
Name: "Zhangsan"
};
});
</script>

----------

In any child element inside an element that has ng-controller= ' Mycontroller ' attribute, the person object can be accessed because it is defined on the $scope.

$scope object is used to pass information from the data model to the view. It can also be used to set up event listeners, interact with other parts of the app, and create specific business logic related to the application.

Angularjs isolates views, controllers, and directives through scopes, which makes it easy to write tests for specific parts of a feature.

* * Focus: Controller nesting (Scope containment scope) * *

Any part of the ANGULARJS application has a parent scope exists. For Ng-app, its parent scope is $rootscope.
All scopes are inherited through prototypes, meaning that they all have access to the parent scope

Angularjs A property is not found in the current scope, it is searched in the parent scope.

<div ng-app= "MYAPP" >
<div ng-controller= "Parcontroller" >
<div ng-controller= "Chicontroller" >

{{people}}
</div>
</div>
</div>
<script type= "Text/javascript" >
var app=angular.module ("MyApp", [])
App.controller ("Parcontroller", function ($scope) {
$scope. People={gender: "Male"}
})
App.controller ("Chicontroller", function ($scope) {
$scope. Say=function () {
$scope. People.name= "Zhangsan"
}
})
</script>

----------

* * Expression: * *

Expressions are widely used in ANGULARJS applications, so it is important to understand in depth how ANGULARJS uses and evaluates expressions.
{{}}--This is a basic expression
It uses {{}} to bind a variable to the top of the $scope object and then take it out of the view to use when listening with $watch, ANGULARJS evaluates the expression or function.
Here comes a new knowledge point: $watch--by name you know what he does: monitoring--where it's used to monitor the data in the model and respond appropriately when the data changes

Angularjs provides a very handy $watch method that can monitor the variables in each scope

* Case: *

<div ng-app= "Watch" >
<input ng-model= ' name ' type= ' text '/>
<div>change Count: {{count}}</div>
</div>
<script>
Angular.module (' Watch ', [])
. Run ([' $rootScope ', function ($scope) {//run This thing first, it will explain
$scope. Count = 0;
$scope. Name = ' Alfred ';
$scope. $watch (' name ', function () {
$scope. count++;
})
}]);
</script>

----------

$watch to monitor the name in $scope and increase the Count property in $scope by 1 when it changes. As a result, the change count number shown below increases by 1 each time the name is modified.

In fact, the expression is very similar to eval (), but because the expression is handled by Angularjs

----------

There are a few different points:
1. All expressions are executed within the scope to which they belong and have access to local $scope;

2. The use of any process Control function (condition control, e.g. if/eles) is not permitted;

$parse can convert an expression to a function. This function can be called, where the argument is a context object, which is generally scoped.

* Case: *

<div ng-app= "MYAPP" >
<div ng-controller= "Mycontroller" >
<p>{{val}}</p>
</div>
</div>
<script type= "Text/javascript" >
var app=angular.module ("MyApp", [])
App.controller ("Mycontroller", Function ($scope, $parse) {
$scope. Name= "Zhangsan";
var expr= "name = = ' Wangwu '"
var fun= $parse (expr);
$scope. Val=fun ();
})
</script>

Angularjs Summary Two