AngularJ와 Angular에서 일반적으로 사용되는 명령어 작성 방법의 차이점

이 글은 주로 AngularJ와 Angular의 차이점을 소개합니다. 어느 정도 참고할만한 가치가 있습니다. 이제 필요한 친구들이 참고할 수 있도록 하겠습니다.

1:angularjs Instructions

1.ng -bind

주어진 변수나 표현식의 값을 사용하여 HTML 요소의 내용을 대체하세요

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

2.ng-blur

HTML 요소가 포커스를 잃었을 때 실행해야 하는 함수(<a> ;</a>, <input>, <select></select>, <textarea></textarea> 지원) <a>, <input>, <select>, <textarea>支持）

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

3.ng-checked/ng-disabled

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

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

//flag为布尔类型

4.ng-class

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

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

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

5.ng-click

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

6.ng-repeat

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

• 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>

  <img [src]="imageUrl">

  로그인 후 복사

  로그인 후 복사
3.ng -checked/ng-disabled

• ng-checked는 체크박스 또는 라디오 버튼의 체크 속성을 설정합니다.
  ng-disabled 표현식이 true를 반환하면 양식 필드가 비활성화됩니다( &lt ;input>, <select> 또는 <textarea>)

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

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

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

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

🎜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-controller 정의 응용 프로그램 개체의 컨트롤러 🎜🎜🎜🎜ng-copy 복사 이벤트의 동작을 지정합니다🎜🎜🎜🎜ng-csp 콘텐츠의 보안 정책을 수정합니다🎜🎜🎜🎜ng-cut 컷 이벤트의 동작을 지정합니다🎜🎜🎜 🎜ng-dblclick 두 번 클릭 이벤트의 동작을 지정합니다. 🎜🎜🎜🎜ng-disabled 요소의 비활성화 여부를 지정합니다. 🎜🎜🎜🎜ng-focus 포커스 이벤트의 동작을 지정합니다. 🎜🎜🎜🎜ng-form HTML 형식을 지정합니다. 컨트롤러 양식을 상속하려면 🎜🎜🎜🎜ng-hide HTML 요소 숨기기 또는 표시 🎜🎜🎜🎜ng-href <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 요소의 열기 속성을 지정합니다🎜🎜 🎜🎜ng-options <options>를 지정합니다. ; list 🎜🎜🎜🎜ng-paste 붙여넣기 이벤트 동작 지정 🎜🎜🎜🎜ng-pluralize 현지화 규칙에 따라 정보 표시🎜🎜🎜🎜ng-readonly 요소의 읽기 전용 속성 지정🎜🎜🎜🎜 ng-repeat 컬렉션의 각 데이터 항목에 대한 템플릿 정의🎜🎜🎜🎜ng-selected 요소의 선택된 속성 지정🎜🎜🎜🎜ng -show HTML 요소 표시 또는 숨기기🎜🎜🎜🎜ng-src src 지정 요소의 속성🎜🎜🎜🎜ng-srcset 요소의 srcset 속성을 지정하세요.

详情参考：http://www.runoob.com/angular...

二：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

  로그인 후 복사

详情参考：https://angular.io/api/

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

Jquery以及AngularJS中Get/Post的传参

AngularJS 前台分页实现

위 내용은 AngularJ와 Angular에서 일반적으로 사용되는 명령어 작성 방법의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!