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>
：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='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】
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" " 【 】
## through select <option ng-repeat=【
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
"x in names"
{{x}}
</option
</select> ;
[ ng-disabled : Indicates whether the mark is hidden】 .directive 1. Directive definition var app = angular.module("myApp", []); restrit: "A", [restrict this directive to be used only as an attribute] >
## 1. true means the button is unavailable, false means the button is available
ng-hide## 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
: AngularJS click Event]
## 1. The ng-click directive defines the AngularJS click event
[app.directive("runoobDirective", function() {
return {
template : "
Custom directive!
"
## };
} );
2. Instruction call
Mark call:
runoob-directive<
><
Attribute call: <p runoob-directive>/p> Class name call: Comment call:
