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

fa97ac8f63d24b71c8d4ad332b7d8b91d3771b0717303fa4cff39e39630091b7Name: < ;span ng-bind="firstName ' ' lastName ">a40bb0e8c769d46bcc97ea6ddd88211f8c05e4ba700ecf3a3fba632670b48d2e8c05e4ba700ecf3a3fba632670b48d2e[Execution result: Name: Doe 】

2. Initialize the Json object

                310240b6a0d00f18c6a46832e8bdbb45 d3771b0717303fa4cff39e39630091b7The last name is {{ person.lastName }}8c05e4ba700ecf3a3fba632670b48d2e8c05e4ba700ecf3a3fba632670b48d2e[Execution result: ’s last name is Doe]

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

9b3b37be4095c1173be2590c988b0ea6 d9228ca872d6ad780b323e9807fb0960The third value is {{ points[2] }}77c0e188e8a6e0de9e8d776fa76a706b77c0e188e8a6e0de9e8d776fa76a706b[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

                        5febe34c59450fb17b70c81c5ffd10f9 

                                  d3771b0717303fa4cff39e39630091b7使用 ng-repeat 来循环数组8c05e4ba700ecf3a3fba632670b48d2e 

                                  94cf9f71896cce458971adf2bc978fb1

                                          4fa76e168b8fe1de649ff42059b63884 {{ x }} 00264599778bfef15205fe2f698216e0

                                  6f304873f188339d0626400a7defcfa7 

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

• 【ng-app：应用程序】

1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，e388a4556c0f65e1904146cc1a846bee 元素是 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开发手册中学习）

            fa97ac8f63d24b71c8d4ad332b7d8b91d3771b0717303fa4cff39e39630091b7Name: < ;span ng-bind="firstName ' ' lastName ">a40bb0e8c769d46bcc97ea6ddd88211f8c05e4ba700ecf3a3fba632670b48d2e8c05e4ba700ecf3a3fba632670b48d2e[Execution result: Name: Doe 】

2. Initialize the Json object

        310240b6a0d00f18c6a46832e8bdbb45d3771b0717303fa4cff39e39630091b7The last name isa419c3af9a83e97e080bcafe4b71b837d6d448110e0324953b5d7bc1e2b276ce8c05e4ba700ecf3a3fba632670b48d2ee30e3a09b04a72ceba5f2e4f3d5f795f【Execution result : The last name is Doe】

## 3. Initialize the array object (

The array subscript starts from 0)           

d80e24e6d4c1014cc7c7feb71a10597e"points=[1,15,19,2,40] ">8fdffc43b18ff2e74331a866100215f2 The third value is 8aac239f29fafec582381e3a8cb3b88554bdf357c58b8a65c66d7c19c8e4d1142de52fdac855d5bc9514ca9dee18399f2de52fdac855d5bc9514ca9dee18399f【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.

                                                                                                                                                                           d37070fa41e3077cb458827a44e28484                                 48507d60fc2623aa57ef89b6d0fb56d8 Not a valid email address0fbfdfa508bd33acf6040ea18195c7c5                                                                                          ##>##                                                                                                                                                                                                                        [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

• >

  39075b267cea17014acaa9fdc452bf7f

{{x}}

759e1fd2f050b189d34ad036e96c6e43

8b6da71f934e6257b5e5c30657e34a36

                                                                                                                                                                                                                                         ;18bb6ffaf0152bbe49cd8a3620346341

                                                                                                                                                                                                                                                                   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 : " 4a249f0d628e2318394fd9b75b4636b1Custom directive!473f0a7621bec819994bb5020d29372a"

  ## };

  } );

  2. Instruction call

  Mark call:

  b17ea4ea1b92fc40703941f8ae9159b5

  b0c37a7ee89b7dd7308c4960db1f2b2d

Attribute call:ead53459a002162675366ebe083b699a Class name call: caf904127b51129e581f0511d9fc943f94b3e26ee717c64999d7867364b1b4a3Comment call: f5d8b3fe03ed9ac581569e06355cbdf0 [Execution result: Customized command! Note that the execution result is not a comment] 3. Limit the scope of instruction use (default is as EA)

E: Use as element name

A: Use as attribute

C: Use as class name

M: Use as comment

[Note] 1. type="number" means that this input box is in numeric format. You can click up and down to increase or decrease numbers, but non-numeric characters are allowed to be entered

This article ends here (if you want to see more, go to the PHP Chinese website AngularJS User Manual to learn). If you have any questions, you can leave a message below.

The above is the detailed content of How to use AngularJS front-end framework? Introduction to the use of angularjs front-end framework. For more information, please follow other related articles on the PHP Chinese website!