AngularJS tutorial and example code analysis-JS Tutorial-php.cn

AngularJS tutorial and example code analysis

小云云

Release： 2018-01-04 09:32:23

Original

1316 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

AngularJS module definition application:

AngularJS module

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

Copy after login

AngularJS controller control application:

AngularJS controller

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

Copy after login

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!