How to use AngularJS front-end framework? Introduction to the use of angularjs front-end framework

This article mainly introduces the learning about the front-end framework of angularjs. Everything you need to know is in this article. Let’s take a look at this article now

1. The main introduction to AngularJS:

AngularJS binds application data to HTML elements

AngularJS can be cloned And repeating HTML elements

AngularJS can hide and show HTML elements

AngularJS can add code "behind" HTML elements

AngularJS supports input validation

二, AngularJS directive features:

ng-directives extends HTML

ng-model directive binds element values ​​(such as input field values) to the application, that is, to pass to the background [ For example:]

Ng-Bind instructions bind the application data to the HTML view, that is, the background data is bound to the front desk

NG-IT initialization page

          AngularJS Module (Module) defines the AngularJS application.

AngularJS Controller is used to control AngularJS applications.

3. AngularJS expression:

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

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

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

4. The difference between AngularJS expressions and JavaScript expressions

Similar to JavaScript expressions, AngularJS expressions can contain letters, operators, variables

Different, AngularJS expressions can be written in HTML

Unlike JavaScript expressions, AngularJS expressions do not support conditional judgments, loops and exceptions

Unlike JavaScript expressions, AngularJS expressions support filtering device.

5. AngularJS defines a module:

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

6. AngularJS instruction learning:

• 【ng- init：Data initialization】

1. Initialize a single variable

<p ng-app=" " ng-init="firstName='John';lastName='Doe' "><p>Name: < ;span ng-bind="firstName ' ' lastName ">span>p>p>[Execution result: Name: Doe 】

2. Initialize the Json object

                <p ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>The last name is {{ person.lastName }}p>p>[Execution result: ’s last name is Doe]

##3 , initialize the array object (array subscript starts from 0)

<p ng-app="" ng-init= "points=[1,15,19,2,40]"> <p>The third value is {{ points[2] }}p>p>[Execution result:The third value is 19 】

• 【

  ng-model：Data synchronization】
  

## 1. AngularJS uses ng-model for data binding and transmits data to the background at the same time. As long as there are two related data in the foreground, if one side changes, the other side will change immediately

  <p ng-app="" ng-init="quantity=1;price=5”> 
<h2>价格计算器</h2> 
数量： <input type="number"  ng-model="quantity”> 
价格： <input type="number" ng-model="price”>
<p><b>总价：</b> {{ quantity * price }}</p>
</p>

【
• ng-repeat

  ：Data loop】

1. AngularJS uses ng-repeat to loop data. The html tag of the loop is the tag where the ng-repeat directive is located

                        <p ng-app="" ng-init="names=['Jani','Hege','Kai']”> 

                                  <p>使用 ng-repeat 来循环数组p> 

                                  <ul>

                                          <li ng-repeat="x in names"> {{ x }} li>

                                  ul> 

                        p>【执行结果：li整一个标记和里面的内容进行循环重复】

• 【ng-app：应用程序】

1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，

元素是 AngularJS应用程序的"所有者"。     

2、ng-app 指令指明了应用,  ng-controller 指明了控制器，放在一个p的属性中，指明这一段p都在AngularJS的控制范围内

3、ng-app 指令定义了 AngularJS 应用程序的 根元素

4、ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序 

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

•  【ng-bind：数据绑定】  
  

         1、绑定单一变量（想看更多就到PHP中文网AngularJS开发手册中学习）

            <p ng-app=" " ng-init="firstName='John';lastName='Doe' "><p>Name: < ;span ng-bind="firstName ' ' lastName ">span>p>p>[Execution result: Name: Doe 】

2. Initialize the Json object

        <p ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>The last name is<span ng-bind="person.lastName">p>p##>【Execution result : The last name is Doe】

## 3. Initialize the array object (

The array subscript starts from 0)           

<

p ng-app="" ng-initspan class="hl-quotes">"points=[1,15,19,2,40] "><p> The third value is <span ng-bind="points[2]">p>p>【Execution Result :The third value is 19】

【
• ng-show：

  Data display】

1. The ng-show instruction will display the tag content of the ng-show instruction when the value of the ng-show attribute is true.

                                                                                                                                                                           <form ng-app="" name="myForm"

"
name="myAddress" ng-model="text">                                 <span ng-show="myForm.myAddress.$error.email"
> Not a valid email address</span>                                                                                          ##>##                                                                                                                                                                                                                        [Execution results: When the value entered in the myAddress input box is a legal email address, then "not a legal email address" will not be displayed, otherwise , it will be displayed! 】
                                                                                                                                                                                                                                           {{myForm.myAddress.$valid}} (true if the entered value is legal) $dirty}} (true if the value changes) {{myForm.myAddress.$touched}} (true if clicked through the touch screen) [These are generally used as judgments of ng-show Condition】

【
ng-

options

: drop-down selection

】

##                                                                                                                        through select

• >

  <option ng-repeat=
  "x in names"

>

{{x}}

</option

>

</select>

                                                                                                                                                                                                                                         ;

                                                                                                                                                                                                                                                                   repeat selects A string, and ng-options selects an object

[

ng-disabled

: Indicates whether the button attribute is available]

## 1. true means the button is unavailable, false means the button is available
【

ng-hide

: Indicates whether the mark is hidden】

## 1. true means that the mark where ng-hide is located is hidden, false The tag indicating where ng-hide is located is displayed, which is the opposite of ng-show

• 
  

  [
ng-click

: AngularJS click Event]

## 1. The ng-click directive defines the AngularJS click event

• 7. Definition and use of custom directives

  
  

[

.directive

: Add a custom directive]

1. Directive definition

app.directive("runoobDirective", function() {

• var app = angular.module("myApp", []);
  return {

  restrit: "A", [restrict this directive to be used only as an attribute]

  template : "

  Custom directive!

  "

  ## };

  } );

  2. Instruction call

  Mark call:

  <

  runoob-directive

  >

  <

/runoob-directive

• >

Attribute call: <p runoob-directive>/p> Class name call:

Comment call:

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!

Show More

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Show More

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)

Show More

Hot Topics

Where is the login entrance for gmail email?

7629

15

CakePHP Tutorial

1389

52

What is the format of the account name of steam

89

11

win11 activation key permanent

70

19

nyt connections hints and answers

31

141

Show More