Brief description of angular instruction

Time:2021-8-20
Angularjs instruction system

In the previous example, we learned a few things about HTML tagsng-Properties of, such asng-app, ng-controller, they are all members of angularjs instruction system. In future study, we will encounter more instruction systems. They can help us realize many functions conveniently and quickly.

MVVM

Generally speaking, when the data changes, the view changes, and when the view changes, the data changes. This is the process of two-way change. In angular

  • dataIt refers to the function of JS declaration scope, which is mounted in$scopeThe specific value of the variable on
  • viewRefers to the in HTML{{}}Rendering effect of variables in

Let’s take a look at an example of data changing view
In JS, setTimeout can be implemented with delay, and in angular, setTimeout is also encapsulated with a function called$timeoutIts usage is consistent with setTimeout.

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script></script>
</head>
<body>
<div class="container">
    <div class="row" ng-controller="R1">
        <h4>{{name}}</h4>        
    </div>
</div>
</body>
<script>
    function R1($scope, $timeout) {
        $scope.name = "young jake";
        $timeout(function() {
            $scope.name = "old jake";
        }, 2000);
    }
</script>
</html>

Two seconds later, young Jake becomes old Jake

As another example, click button and the data in the input box changes

  • ng-clickClick event
<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script></script>
</head>
<body>
<div class="container">
    <div class="row" ng-controller="R1">
        <h4>{{name}}</h4>        
    </div>
    <div class="row" ng-controller="R2">
        <div class="input-group col-xs-6 col-xs-offset-3">
            <span class="input-group-btn" ng-click="text='after click.'">
                <button type="button" class="btn btn-default">Change!</button>
            </span>
            <input type="text" class="form-control" value="{{text}}">
        </div>
    </div>
</div>
</body>
<script>
    function R1($scope, $timeout) {
        $scope.name = "young jake";
        $timeout(function() {
            $scope.name = "old jake";
        }, 2000);
    }
    function R2($scope) {
        $scope.text = "this is a bootstrap input-group.";
    }
</script>
</html>

The last example is the example of view changing data. In this example, the value in the data is changed by changing the value of input, and then the changed data is displayed in another input

  • ng-model

The instruction used to synchronize the view and data content, and the bidirectional data synchronization is realized through the instruction

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script></script>
</head>
<body>
<div class="container">
    <div class="row" ng-controller="Show">
        <div class="input-group">
            < span class = "input group BTN" > < button type = "button" class = "BTN BTN primary" > Enter < / button ></span>
            <input type="text" class="form-control" ng-model="content" placeholder="{{default}}"> 
        </div>
        <div class="input-group">
            < span class = "input group BTN" > < button type = "button" class = "BTN BTN default" > display < / button ></span>
            <input type="text" class="form-control" value="{{content}}", placeholder="{{default}}">
        </div>
    </div>
</div>
</body>
<script>
    function Show($scope) {
        $scope.default = 'please input your content';
        $scope.content = "";
    }
</script>
</html>

Brief description of angular instruction