Home >Web Front-end >JS Tutorial >AngularJS tutorial and example code analysis

AngularJS tutorial and example code analysis

小云云Original: 2018-01-04 09:32:231370browse

This article mainly introduces you to the relevant knowledge of angularjs. Friends who are interested should take a look. AngularJS extends HTML with new attributes and expressions. AngularJS can build a single page application (SPAs: Single Page Applications).

Introduction to angularjs

AngularJS is a JavaScript framework. It can be added to HTML pages via the <script> tag. </p> <p>AngularJS extends HTML through directives and binds data to HTML through expressions. </p> <p>AngularJS is a JavaScript framework </p> <p>AngularJS is a JavaScript framework. It is a library written in JavaScript. </p> <p>AngularJS is published as a JavaScript file, which can be added to the web page through the script tag: </p> <p><script src="http://cdn.static.runoob.com/libs /angular.js/1.4.6/angular.min.js"></script>

Note We recommend placing the script at the bottom of the element.

This will increase page loading speed because HTML loading is not subject to script loading.

Download each angular.js version: https://github.com/angular/angular.js/releases

AngularJS extends HTML

AngularJS extends through ng-directives HTML.

ng-app directive defines an AngularJS application.

ng-model directive binds element values (such as input field values) to the application.

The ng-bind directive binds application data to an HTML view.

AngularJS Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> 
<p ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</p>
</body>
</html>

Example explanation:

When the web page is loaded, AngularJS will automatically start. The

ng-app directive tells AngularJS that the

element is the "owner" of the AngularJS application.

ng-model directive binds the value of the input field to the application variable name.

The ng-bind directive binds the application variable name to the innerHTML of a paragraph.

Note If you remove the ng-app directive, HTML will display the expression directly without calculating the result of the expression.

What is AngularJS?

AngularJS makes it easier to develop modern single page applications (SPAs: Single Page Applications).

AngularJS binds application data to HTML elements.
AngularJS can clone and repeat HTML elements.
AngularJS can hide and show HTML elements.
AngularJS can add code "behind" HTML elements.
AngularJS supports input validation.

AngularJS Directives

As you can see, AngularJS directives are HTML attributes prefixed with ng.

ng-init directive initializes AngularJS application variables.

AngularJS Example

<p ng-app="" ng-init="firstName=&#39;John&#39;">
<p>姓名为 <span ng-bind="firstName"></span></p>
</p>

Note HTML5 allows extended (homemade) attributes, starting with data-.

AngularJS attributes start with ng-, but you can use data-ng- to make the page valid for HTML5.

With valid HTML5:

AngularJS example

<p data-ng-app="" data-ng-init="firstName=&#39;John&#39;">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</p>

AngularJS expression

AngularJS expression is written within double curly braces: {{ expression } }.

AngularJS expressions bind data to HTML, which is similar to the ng-bind directive.

AngularJS will "output" data where the expression is written.

AngularJS expressions are much like JavaScript expressions: they can contain literals, operators, and variables.

Instance{{ 5 + 5 }} or {{ firstName + " " + lastName }}

AngularJS instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<p ng-app="">
  <p>我的第一个表达式： {{ 5 + 5 }}</p>
</p>
</body>
</html>

AngularJS application

AngularJS module (Module) defines the AngularJS application.

AngularJS Controller (Controller) is used to control AngularJS applications.

The ng-app directive defines the application, and ng-controller defines the controller.

AngularJS Example

<p ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});
</script>

AngularJS module definition application:

AngularJS module

var app = angular.module('myApp', []);

AngularJS controller control application:

AngularJS controller

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

Related recommendations:

AngularJS fuzzy query function implementation code

AngularJS implementation of shopping cart all-select and reverse-select function example sharing

AngularJS implements the word limit reminder function of the input box

The above is the detailed content of AngularJS tutorial and example code analysis. For more information, please follow other related articles on the PHP Chinese website!

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：Detailed explanation of how to directly access JSP pages in the WEB-INF directoryNext article：Detailed explanation of how to directly access JSP pages in the WEB-INF directory

See more

AngularJS tutorial and example code analysis

Related articles