Of Stack

A brief introduction to AngularJS basic study notes

  • 2020-06-07 04:03:05
  • OfStack

AngularJS is an JavaScript framework. It can pass through < script > Tags are added to the HTML page.

AngularJS extends the HTML attribute with instructions and then binds the data to the HTML element with expressions.

AngularJS is an JavaScript framework

AngularJS is an JavaScript framework that is a class library written in the JavaScript language.

AngularJS is published as an JavaScript file and can be added to the web page with the script tag: 

<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.min.js"></script>

AngularJS extends HTML

AngularJS extends HTML through the ES39en-ES40en series 1 directive.

The ES44en-ES45en directive defines AngularJS application.

The ES50en-ES51en directive binds the value of the HTML control to the data model from 1.

The ng-ES56en directive binds model data to the HTML view. 


<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>

Example description:

AngularJS starts automatically when the page load is complete.

The ES67en-ES68en directive tells AngularJS where it is < div > The element is the root element of AngularJS Application.

The ES77en-ES78en directive binds the value of the input tag to the variable name.

The ES83en-ES84en directive binds the value of the variable name to < p > The innerHTML attribute of the element.

AngularJS instruction
As you can see, the AngularJS directive is a set of HTML attributes beginning with ng.

The variable of AngularJS Application can be initialized with the ES99en-ES100en instruction. 


<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

Equivalent code: 


<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>

You can use the prefix ES111en-ES112en - instead of ng- to ensure that the HTML on the page is valid (valid).
You will learn more about the AngularJS directive in later chapters.

AngularJS expression

The AngularJS expression is written in double braces: {{expression statement}}.

AngularJS will "output" the expression exactly as the result of the calculation, for example: 


<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

The AngularJS expression binds data to HTML in the same way as the ng-ES135en directive. 


<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
 <p>Name: <input type="text" ng-model="name"></p>
 <p>{{name}}</p>
</div>

</body>
</html>

You will learn more about AngularJS expressions in later chapters.

AngularJS Application

The AngularJS module defines AngularJS Applications.

The AngularJS controller controls the behavior of AngularJS Applications.

The ng-ES158en directive is used to specify application, while the ES160en-ES161en directive is used to specify the controller. 


<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});
</script>

AngularJS Module Definition applications: 


var app = angular.module('myApp', []);
　　AngularJS Controller control AngularJS Applications Act: 

app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});

You will learn more about modules and controllers in later chapters.

This is the end of this article, I hope you enjoy it.

Related articles: