Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > body text

A brief introduction to AngularJS basic study notes_AngularJS

WBOY

Release： 2016-05-16 15:59:58

Original

1192 people have browsed it

AngularJS is a JavaScript framework. It can be added to HTML pages via the <script> tag. </p> <p>AngularJS extends HTML attributes through directives, and then binds data to HTML elements through expressions. </p> <p><strong>AngularJS is a JavaScript framework<br> </strong></p> <p> AngularJS is a JavaScript framework, which is a class library written in the JavaScript language. </p> <p> AngularJS is published as a JavaScript file, which we can add to the web page through the script tag: <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="84745" class="copybut" id="copybut84745" onclick="doCopy('code84745')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code84745"><script src="http://cdn.bootcss.com/angular. js/1.3.14/angular.min.js"></script>

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>

Copy after login

Example description:

AngularJS automatically starts execution when the page is loaded.

The ng-app directive tells AngularJS that the

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

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>

Copy after login

Equivalent code:

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

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

</div>

Copy after login

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>

Copy after login

AngularJS expressions bind data to HTML in the same way as the ng-bind 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>

Copy after login

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>

Copy after login

AngularJS module definition applications:

var app = angular.module('myApp', []);
　　AngularJS控制器控制AngularJS Applications的行为：

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

Copy after login

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

The above is the entire content of this article, I hope you all like it.

Related labels：

angularjs

source：php.cn

Previous article：How to imitate the slide-out effect of Tencent Weibo using jQuery to report daily weather Next article：How to dynamically replace banner image path with JS tab_javascript skills

Statement of this Website

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