Anglejs와 각도 지시문 작성의 차이점은 무엇입니까? AngularJ와 Angular에서 일반적으로 사용되는 명령어 작성 방법의 차이점을 소개합니다.

이 글에서는 angularjs과 일반적으로 사용되는 명령어 작성 방법의 차이점을 주로 소개합니다. 비록 큰 차이는 없지만 여전히 차이가 있습니다. 또한 심각하게 받아들여야 합니다. 이 글을 함께 읽어보자

1:angularjs command

1.ng -bind#🎜🎜 #

HTML 요소의 내용을 주어진 변수 또는 표현식의 값으로 바꾸기

<p ng-bind="{{text}}"></p>

2.ng-blur#🎜 🎜##🎜🎜 #HTML 요소가 포커스를 잃었을 때 실행해야 하는 함수(<a></a>, <input>, <select>, <code><textarea> 지원)

<input ng-blur="pay()" />

3.ng-checked/ng-disabled<a>, <input>, <select>, <textarea>支持）

<input type="checkbox|radio" ng-checked="flag" ng-disabled="flag"></input>

//flag为布尔类型

3.ng-checked/ng-disabled

ng-checked设置复选框(checkbox)或单选按钮(radio)的 checked 属性
ng-disabled表达式返回 true 则表单字段将被禁用(<input>, <select>, 或 <textarea>)

//写法一
<p ng-class="home"></p>

//写法二
<p ng-class="{&#39;red&#39;:flag,&#39;green&#39;:&#39;!flag&#39;}"></p>
//flag为true则添加red类名，false则添加green类名

4.ng-class

给 HTML 元素动态绑定一个或多个 CSS 类。

<button ng-click="addpay($event)">OK</button>
//$event为当前元素的多种属性

5.ng-click

<p ng-repeat="(index,item) in list"></p>
// 每项值：{{item}}
// 下标：{{index}}

6.ng-repeat

<img [src]="imageUrl">

• ng-app    定义应用程序的根元素。

• ng-bind    绑定 HTML 元素到应用程序数据

• ng-bind-html    绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符

• ng-bind-template    规定要使用模板替换的文本内容

• ng-blur    规定 blur 事件的行为

• ng-change    规定在内容改变时要执行的表达式

• ng-checked    规定元素是否被选中

• ng-class    指定 HTML 元素使用的 CSS 类

• ng-class-even    类似 ng-class，但只在偶数行起作用

• ng-class-odd    类似 ng-class，但只在奇数行起作用

• ng-click    定义元素被点击时的行为

• ng-cloak    在应用正要加载时防止其闪烁

• ng-controller    定义应用的控制器对象

• ng-copy    规定拷贝事件的行为

• ng-csp    修改内容的安全策略

• ng-cut    规定剪切事件的行为

• ng-dblclick    规定双击事件的行为

• ng-disabled    规定一个元素是否被禁用

• ng-focus    规定聚焦事件的行为

• ng-form    指定 HTML 表单继承控制器表单

• ng-hide    隐藏或显示 HTML 元素

• ng-href    为 the <a> 元素指定链接

• ng-if    如果条件为 false 移除 HTML 元素

• ng-include    在应用中包含 HTML 文件

• ng-init    定义应用的初始化值

• ng-jq    定义应用必须使用到的库，如：jQuery

• ng-keydown    规定按下按键事件的行为

• ng-keypress    规定按下按键事件的行为

• ng-keyup    规定松开按键事件的行为

• ng-list    将文本转换为列表 (数组)

• ng-model    绑定 HTML 控制器的值到应用数据

• ng-model-options    规定如何更新模型

• ng-mousedown    规定按下鼠标按键时的行为

• ng-mouseenter    规定鼠标指针穿过元素时的行为

• ng-mouseleave    规定鼠标指针离开元素时的行为

• ng-mousemove    规定鼠标指针在指定的元素中移动时的行为

• ng-mouseover    规定鼠标指针位于元素上方时的行为

• ng-mouseup    规定当在元素上松开鼠标按钮时的行为

• ng-non-bindable    规定元素或子元素不能绑定数据

• ng-open    指定元素的 open 属性

• ng-options    在 <select> 列表中指定 <options>

  #🎜🎜 #ng-checked는 체크박스 또는 라디오 버튼의 체크 속성을 설정합니다.
  ng-disabled 표현식이 true를 반환하면 양식 필드가 비활성화됩니다(<input>, < ;선택> 또는 <텍스트 영역>)

<button [disabled]="isUnchanged">按钮是禁用的</button>

4.ng-class#🎜🎜 #

#🎜🎜 #하나 이상의 CSS 클래스를 HTML 요소에 동적으로 바인딩합니다.

<p [ngClass]="classes">[ngClass]绑定到classes 属性</p>

5.ng-클릭

<table border=1>
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
</table>

6.ng-반복

<input [(ngModel)]="currentUser.firstName">

ng-app 애플리케이션의 루트 요소를 정의합니다.

ng-bind HTML 요소를 애플리케이션 데이터에 바인딩

ng-bind-html HTML 요소의 innerHTML 바인딩 응용 프로그램 데이터에 저장하고 HTML 문자열에서 위험한 문자를 제거합니다.

#🎜🎜##🎜🎜##🎜🎜#ng-bind-template 템플릿으로 바꿀 텍스트 내용을 지정합니다.#🎜🎜 ##🎜🎜# #🎜🎜##🎜🎜#ng-blur 흐림 이벤트의 동작을 지정합니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-change 내용이 변경될 때 실행할 표현식을 지정합니다. #🎜🎜 ##🎜🎜##🎜🎜##🎜🎜#ng-checked 요소 선택 여부를 지정합니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-class HTML 요소에서 사용되는 CSS 클래스를 지정합니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-class-even ng-class와 유사하지만 짝수 행에서만 작동#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng -class-odd ng-class와 비슷하지만 홀수 줄에서만 작동합니다#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-click 요소를 클릭할 때 동작 정의#🎜🎜##🎜🎜 # #🎜🎜##🎜🎜#ng-cloak 앱 로딩 시 깜박임 방지 🎜🎜##🎜🎜##🎜🎜#ng-copy 복사 이벤트 동작 지정#🎜🎜##🎜🎜## 🎜🎜##🎜🎜#ng-csp 콘텐츠의 보안 정책 수정#🎜🎜##🎜🎜 ##🎜🎜##🎜🎜#ng-cut 컷 이벤트의 동작을 지정합니다#🎜🎜##🎜🎜# #🎜🎜##🎜🎜#ng-dblclick 두 번 클릭 이벤트의 동작을 지정합니다#🎜🎜##🎜🎜# #🎜🎜##🎜🎜#ng-disabled 요소가 비활성화되었는지 여부를 지정합니다#🎜🎜## 🎜🎜##🎜🎜##🎜🎜#ng-focus 포커스 이벤트의 동작을 지정합니다#🎜🎜##🎜🎜## 🎜🎜##🎜🎜#ng-form HTML 양식을 지정하여 컨트롤러 양식을 상속합니다#🎜🎜# #🎜🎜##🎜🎜##🎜🎜#ng-hide HTML 요소 숨기기 또는 표시#🎜🎜##🎜🎜## 🎜🎜##🎜🎜#ng-href <a&gt에 대한 링크를 지정합니다. ; 요소#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-if 조건이 거짓인 경우 HTML 요소 제외#🎜🎜##🎜🎜##🎜🎜##🎜🎜 #ng-include 애플리케이션에 HTML 파일 포함#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-init 애플리케이션 초기화 값 정의 #🎜🎜##🎜🎜##🎜🎜##🎜🎜# ng-jq 다음과 같이 애플리케이션에서 사용해야 하는 라이브러리를 정의합니다. jQuery#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng- keydown 키 누르기 이벤트의 동작을 지정합니다#🎜🎜##🎜🎜 ##🎜🎜##🎜🎜#ng-keypress 키 누르기 이벤트의 동작을 지정합니다#🎜🎜##🎜🎜##🎜🎜##🎜🎜# ng-keyup 키 릴리스 이벤트의 동작을 지정합니다#🎜🎜 ##🎜🎜##🎜🎜##🎜🎜#ng-list 텍스트를 목록(배열)으로 변환#🎜🎜##🎜🎜##🎜🎜## 🎜🎜#ng-model HTML 컨트롤러의 값을 바인딩합니다. 애플리케이션 데이터에 #🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-model-options 모델 업데이트 방법을 지정합니다#🎜🎜##🎜🎜## 🎜🎜##🎜🎜#ng-mousedown 마우스 버튼을 눌렀을 때 동작을 지정합니다#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-mouseenter 마우스 포인터가 요소를 통과할 때 동작을 지정합니다#🎜🎜# #🎜🎜##🎜🎜 ##🎜🎜#ng-mouseleave 요소를 떠날 때 마우스 포인터의 동작을 지정합니다. 때 동작 #🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-mouseover 마우스 포인터가 위에 있을 때 동작을 지정합니다 요소 요소에서 마우스 버튼을 놓았을 때의 동작을 지정합니다. #🎜🎜##🎜🎜#ng-open 요소의 열기 속성을 지정합니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng- options <select> 목록에 지정됨 <options>#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-paste 다음 동작을 지정합니다. 이벤트 붙여넣기#🎜🎜##🎜🎜##🎜🎜##🎜🎜 #ng-pluralize 현지화 규칙에 따라 정보 표시#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-readonly 읽기 전용 속성 지정 요소 중#🎜🎜##🎜🎜##🎜🎜##🎜🎜# ng-repeat 컬렉션의 각 데이터 항목에 대한 템플릿을 정의합니다#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng -selected 요소의 선택된 속성을 지정합니다#🎜🎜##🎜🎜##🎜🎜##🎜🎜 #ng-show HTML 요소 표시 또는 숨기기#🎜🎜#

ng-src    指定 元素的 src 属性

ng-srcset    指定 元素的 srcset 属性

ng-style    指定元素的 style 属性

ng-submit    规定 onsubmit 事件发生时执行的表达式

ng-switch    规定显示或隐藏子元素的条件

ng-transclude    规定填充的目标位置

ng-value    规定 input 元素的值

想看更多推荐到PHP中文网angularjs学习手册中学习。

二：angular指令

imageUrl 属性：

<img [src]="imageUrl">

[disabled]当组件为 isUnchanged( 未改变 ) 时禁用一个按钮：

<button [disabled]="isUnchanged">按钮是禁用的</button>

设置指令的属性：

<p [ngClass]="classes">[ngClass]绑定到classes 属性</p>

表格的colspan/rowspan

<table border=1>
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
</table>

[(NgModel)]

<input [(ngModel)]="currentUser.firstName">

NgIf

<p *ngIf="currentUser">Hello,{{currentUser.firstName}}</p>

NgFor

<p *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</p>

（click）

<button type="submit" class="btn btn-primary" (click)="hide()">确定</button>

[(checked)]

<input type="checkbox"  [(checked)]="checkflag">

• common

      NgClass
      NgComponentOutlet
      NgForOf
      NgIf
      NgPlural
      NgPluralCase
      NgStyle
      NgSwitch
      NgSwitchCase
      NgSwitchDefault
      NgTemplateOutlet

• forms

      CheckboxControlValueAccessor
      CheckboxRequiredValidator
      DefaultValueAccessor
      EmailValidator
      FormArrayName
      FormControlDirective
      FormControlName
      FormGroupDirective
      FormGroupName
      MaxLengthValidator
      MinLengthValidator
      NgControlStatus
      NgControlStatusGroup
      NgForm
      NgModel
      NgModelGroup
      NgSelectOption
      PatternValidator
      RadioControlValueAccessor
      RequiredValidator
      SelectControlValueAccessor
      SelectMultipleControlValueAccessor

• router

      RouterLink
      RouterLinkActive
      RouterLinkWithHref
      RouterOutlet

好了，以上就是本篇文章的全部内容了（想看更多就到PHP中文网angularjs学习手册中学习），有问题的可以在下方留言提问

위 내용은 Anglejs와 각도 지시문 작성의 차이점은 무엇입니까? AngularJ와 Angular에서 일반적으로 사용되는 명령어 작성 방법의 차이점을 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!