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

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

1:angularjs command

1.ng -bind#🎜🎜 #

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

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

로그인 후 복사

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

1	`<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 类。

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

로그인 후 복사

5.ng-click

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

로그인 후 복사

6.ng-repeat

1	`<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>, < ;선택> 또는 <텍스트 영역>)

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

로그인 후 복사

4.ng-class#🎜🎜 #

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

1	`<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-반복

1	`<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 属性：

1	`<img [src]="imageUrl">`

로그인 후 복사

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

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

로그인 후 복사

设置指令的属性：

1	`<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)]

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

로그인 후 복사

NgIf

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

로그인 후 복사

NgFor

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

로그인 후 복사

（click）

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

로그인 후 복사

[(checked)]

1	`<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