AngularJS tutorial and example code analysis
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='John'"> <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='John'"> <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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
Analysis of the reasons why the secondary directory of DreamWeaver CMS cannot be opened
Mar 13, 2024 pm 06:24 PM
Title: Analysis of the reasons and solutions for why the secondary directory of DreamWeaver CMS cannot be opened. Dreamweaver CMS (DedeCMS) is a powerful open source content management system that is widely used in the construction of various websites. However, sometimes during the process of building a website, you may encounter a situation where the secondary directory cannot be opened, which brings trouble to the normal operation of the website. In this article, we will analyze the possible reasons why the secondary directory cannot be opened and provide specific code examples to solve this problem. 1. Possible cause analysis: Pseudo-static rule configuration problem: during use
How to get HTTP status code in JavaScript the easy way
Jan 05, 2024 pm 01:37 PM
Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service
Analyze whether Tencent's main programming language is Go
Mar 27, 2024 pm 04:21 PM
Title: Is Tencent’s main programming language Go: An in-depth analysis. As China’s leading technology company, Tencent has always attracted much attention in its choice of programming languages. In recent years, some people believe that Tencent mainly adopts Go as its main programming language. This article will conduct an in-depth analysis of whether Tencent's main programming language is Go, and give specific code examples to support this view. 1. Application of Go language in Tencent Go is an open source programming language developed by Google. Its efficiency, concurrency and simplicity are loved by many developers.
Analyze the advantages and disadvantages of static positioning technology
Jan 18, 2024 am 11:16 AM
Analysis of the advantages and limitations of static positioning technology With the development of modern technology, positioning technology has become an indispensable part of our lives. As one of them, static positioning technology has its unique advantages and limitations. This article will conduct an in-depth analysis of static positioning technology to better understand its current application status and future development trends. First, let’s take a look at the advantages of static positioning technology. Static positioning technology achieves the determination of position information by observing, measuring and calculating the object to be positioned. Compared with other positioning technologies,
