Home >Web Front-end >JS Tutorial >A brief introduction to AngularJS basic tutorial_AngularJS

A brief introduction to AngularJS basic tutorial_AngularJS

WBOYOriginal: 2016-05-16 15:37:521249browse

AngularJS is a JavaScript framework. It can be added to HTML pages via the 3f1c4e4b6b16bbbd69b2ee476dc4f83a 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 through the script tag:

de85def78bf4e5e73c3b76e0cbf117a2e41766e13484456de30e3c90d0e39b57df15d2bd3a0797a114d79c25e114807b

AngularJS extends HTML

AngularJS extends HTML through a series of ng-directives.

The ng-app directive defines the AngularJS application.

The ng-model directive binds the value of the HTML control to the data model.

The ng-bind 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 automatically starts execution when the page is loaded.

The ng-app directive tells AngularJS that the dc6dce4a544fdca2df29d5ac0ea9906b element it is located in is the root element of the 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 attribute of the e388a4556c0f65e1904146cc1a846bee element.

AngularJS Commands

As you can see, AngularJS directives are a set of HTML attributes starting with ng.

AngularJS Application variables can be initialized through the ng-init directive.

<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- to ensure that the HTML on the page is valid.
You will learn more AngularJS directives in later chapters.

AngularJS expression

AngularJS expressions are written in double braces: {{ expression statement }}.

AngularJS will accurately "output" the expression as the calculated result, 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>

AngularJS expressions bind data to HTML in the same way as the ng-bind directive.

<!DOCTYPE html>
<html>
<script src="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 the following chapters.

AngularJS Application

The AngularJS module defines AngularJS Applications.

AngularJS controllers control the behavior of AngularJS Applications.

The ng-app directive is used to specify the application, and 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 = 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控制器控制AngularJS Applications的行为：

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

You will learn more about modules and controllers in the following chapters.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Collection of imitation Tokyo mall menu, imitation Win right-click menu and imitation Taobao TAB special effects implemented by JS_javascript skillsNext article：Collection of imitation Tokyo mall menu, imitation Win right-click menu and imitation Taobao TAB special effects implemented by JS_javascript skills

See more

A brief introduction to AngularJS basic tutorial_AngularJS

Related articles