AngularJS is a JavaScript framework. It can be added to the HTML page via the <script> tag.
AngularJS extends HTML attributes through directives, and then binds data to HTML elements through expressions.
AngularJS is a JavaScript framework
AngularJS is a JavaScript framework, which is a class library written in the JavaScript language.
AngularJS is published as a JavaScript file, which we can add to the web page via script tags:
AngularJS extends HTML
AngularJS extends HTML through a series of ng-directives directives.
The ng-app directive defines AngularJS application.
The ng-model directive binds the value of the HTML control with the data model.
The ng-bind directive binds model data to an HTML view.
<script src="//1.3.14/"></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 execution automatically when the page loads.
The ng-app directive tells AngularJS that the <div> element it is located in is the root element of AngularJS Application.
The ng-model directive binds the value of the input tag to the variable name.
The ng-bind directive binds the value of the variable name to the innerHTML property of the <p> element.
AngularJS directive
As you can see, the AngularJS directive is a set of HTML attributes starting with ng.
The ng-init directive can be used to initialize the variables of AngularJS Application.
<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>
Note You can use the prefix data-ng- instead of ng-, which ensures that the HTML on the page is valid (valid).
You will learn more AngularJS directives in the following chapters.
AngularJS expressions
AngularJS expression is written in double braces: {{ expression statement }}.
AngularJS will accurately "output" the expression as the result of the calculation, for example:
<!DOCTYPE html>
<html>
<script src="/ajax/libs/angularjs/1.3.14/"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS expressions bind data to HTML in the same way as ng-bind directives.
<!DOCTYPE html>
<html>
<script src="/ajax/libs/angularjs/1.3.14/"></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 the following chapters.
AngularJS Application
The AngularJS module defines AngularJS Applications.
AngularJS controller controls the behavior of AngularJS Applications.
The ng-app directive is used to specify the application, while the ng-controller 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 = ('myApp', []);
('myCtrl', function($scope) {
$= "John";
$= "Doe";
});
</script>
AngularJS module definition applications:
var app = ('myApp', []);
AngularJSController controlAngularJS ApplicationsBehavior：
('myCtrl', function($scope) {
$= "John";
$= "Doe";
});
You will learn more about modules and controllers in the following chapters.
The above is the entire content of this article, I hope you like it.