Angular.js learning record (I)

Time:2021-11-28

Node.js and angular launched by Google are definitely the hottest things in the front end. I have only recently started learning this thing. Write this article as my own learning witness!

Angular。 The name is very tall. So what does it do? Simply say, it is upgraded on the MVC Mode – >MVVMpattern. Angularjs extends HTML with new attributes and expressions. He can build single page applications, namely Spa (Spas: single page applications).

download

Official website: https://angularjs.org/ (domestic walls, you know, are generally very high!)
CDN address: http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.js

Simple use

First, it is a JavaScript framework, so you need to use the script tag before using it.

ng-app

This command determines the scope of angularjs. You can use it as follows

html<html ng-app> 
…  
</html> 

If you only want angularjs to render the entire page, you can also use

html<div ng-app='myapp'>
……
</div>

To render part of it.

ng-model

Ng model: when your data model is changed, for example, ng model = ‘test’, when the value of this test is changed, the value of the bound {test}} will also change, that is, the test connected to the ng model will also change, as shown below

html<!doctype html>
<html>
    <head>
        <script type="text/javascript"></script>
        <title>learing argularjs--widuu</title>
    </head>
    <body ng-app>
    <input ng-model='test' >
    <p> hello {{test}} </p>
    </body>
</html>

The results are shown in the figure:
Angular.js learning record (I)
how. Not bad. With just a few lines of code, you can realize several times the functions implemented by jQuery. Of course, this is just the tip of the iceberg of angular. It is said that a Google project had 15000 + code before using angular. After using angular, only about 3000 + is used. Of course, I’m not sure about the specific situation. But this is enough to show the power of angular!

controller

Controller is a method in angular.module.
The usage method is controller (name, constructor);
Where name is the name of the controller and constructor is the constructor of the controller. Let’s use the code to see:

html<!doctype html>
<html>
    <head>
        <script type="text/javascript"></script>
        <script type="text/javascript">
        var app = angular.module('myapp',[]);
        app.controller('hockor',function($scope){
            $scope.test="hello word";
        });
        </script>
        <title>learing argularjs--widuu</title>
    </head>
    <body ng-app='myapp' ng-controller='hockor' >
    <input ng-model='test'>
    <p> hello {{test}} </p>
    </body>
</html>

After executing the code, you can see that the effect is the same as the previous one, which is the function of the controller. Controller. The $scope and module in the code may be unfamiliar. It doesn’t matter. I’ll explain next.

$scope

As the name suggests, this refers to the scope. When it comes to the scope of JS, I believe many people who have been engaged in JS development for many years are still a little dizzy. JS pre parsing is an important inspection point in recruitment. Well, without much nonsense, let’s look at the problem through the code. (I’ll point out that important parts are posted in later codes. The ng app instruction is placed on the HTML tag by default)

html<p ng-controller="hockor">{{name}}</p>
Javascriptfunction hockor($scope){
        $scope.name = "hello hockor";
    }

The controller in the code points to the function of hockor. In the function of hockor, I define a formal parameter, which is $scope, which is built-in in angular. Now I mount the variable name on $scope so that the attribute name can be found. If you simply write var name = “XXX”, it is invalid. It is an ordinary variable, not the data we want.

Let’s take another example.

html<div ng-controller="hockor">
<p>{{name}}</p>
</div>
<p> {{age}}</p>
javascriptfunction hockor($scope,$rootScope){
        $scope.name = "hello hockor";
        $rootScope.name = "Just test";
    }

This time, you can see that in addition to $scope, we also have a parameter $rootscope. We can also guess from its name that it is a top-level scope, that is, a global scope. Originally, {{age}} in the above code is not attached to the hockor controller, but by executing the code, we can find that it is still parsed into the sentence just test, which is the scope in angular!

Note: the formal parameter $scope. $rootscope written above cannot be modified to other values!

Why?

You can observe the ng controller above. What we write is a function name. And there are no parentheses, which is different from our ordinary calling JS functions. Ordinary calling JS functions need parentheses, and parameters can be passed inside, and the name of formal parameters is unlimited. Here, we don’t need to write parentheses. We only need to write a function name. Angular automatically injects parameters for us. Therefore, the formal parameter $scope. $rootscope cannot be modified to other values, and must be written in the format of angular.

OK, that’s the end of the first article!

Original article: reprint please specify- hockor

Recommended Today

On the mutation mechanism of Clickhouse (with source code analysis)

Recently studied a bit of CH code.I found an interesting word, mutation.The word Google has the meaning of mutation, but more relevant articles translate this as “revision”. The previous article analyzed background_ pool_ Size parameter.This parameter is related to the background asynchronous worker pool merge.The asynchronous merge and mutation work in Clickhouse kernel is completed […]