A brief introduction to AngularJS basic tutorial_AngularJS
AngularJS is a JavaScript framework. It can be added to HTML pages via the http://cdn.bootcss.com/angular.js/1.3.14/angular.min.js">>
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
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>
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.

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

AI Hentai Generator
Generate AI Hentai for free.

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



Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

The article discusses effective JavaScript debugging using browser developer tools, focusing on setting breakpoints, using the console, and analyzing performance.

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

The article explains how to use source maps to debug minified JavaScript by mapping it back to the original code. It discusses enabling source maps, setting breakpoints, and using tools like Chrome DevTools and Webpack.

This tutorial will explain how to create pie, ring, and bubble charts using Chart.js. Previously, we have learned four chart types of Chart.js: line chart and bar chart (tutorial 2), as well as radar chart and polar region chart (tutorial 3). Create pie and ring charts Pie charts and ring charts are ideal for showing the proportions of a whole that is divided into different parts. For example, a pie chart can be used to show the percentage of male lions, female lions and young lions in a safari, or the percentage of votes that different candidates receive in the election. Pie charts are only suitable for comparing single parameters or datasets. It should be noted that the pie chart cannot draw entities with zero value because the angle of the fan in the pie chart depends on the numerical size of the data point. This means any entity with zero proportion

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...
