AngularJS_AngularJS에서 가장 일반적으로 사용되는 기능 요약

AngularJS는 개발자에게 더 높은 수준의 추상화를 제공하여 애플리케이션 개발을 단순화합니다. 다른 추상화 기술과 마찬가지로 일부 유연성이 손실됩니다. 즉, 모든 애플리케이션이 AngularJS에 적합한 것은 아닙니다. AngularJS는 주로 CRUD 애플리케이션 구축과 관련이 있습니다. 다행스럽게도 WEB 애플리케이션의 최소 90%는 CRUD 애플리케이션입니다. 그러나 AngularJS를 사용하여 빌드하는 데 적합한 것이 무엇인지 이해하려면 AngularJS를 사용하여 빌드하는 데 적합하지 않은 것이 무엇인지 이해해야 합니다.

예를 들어 게임, 그래픽 인터페이스 편집기, 빈번하고 복잡한 DOM 작업이 포함된 애플리케이션은 CRUD 애플리케이션과 매우 다르며 AngularJS로 구축하기에 적합하지 않습니다. 이와 같은 상황에서는 jQuery와 같은 더 가볍고 간단한 기술을 사용하는 것이 더 나을 수 있습니다.

첫 번째 반복 출력 ng-repeat 태그

ng-repeat는 table ul ol 및 기타 태그를 js의 배열과 완벽하게 결합합니다

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

출력 순서를 지정할 수도 있습니다.

<li ng-repeat="person in persons | orderBy:'name'">

ng-model 태그의 두 번째 동적 바인딩

사용자 입력과 값이 포함된 모든 html 태그는 js의 변수에 동적으로 바인딩될 수 있으며 이는 동적 바인딩입니다.

<input type="text" ng-model='password'>

바운드 변수의 경우 {{}}를 사용하여 직접 참조할 수 있습니다.

<span>you input password is {{password}}</span>

fiter에 익숙하다면 원하는 형식으로 쉽게 출력할 수 있습니다

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

세 번째 바인딩 클릭 이벤트 ng-click 이벤트

ng-click을 사용하면 클릭 이벤트를 라벨에 쉽게 바인딩할 수 있습니다.

<button ng-click="pressMe()"/>

물론, $scope 도메인에 자체 pressMe 메소드를 정의해야 한다는 전제가 있습니다.

기존의 onclick 방법과 달리 다음과 같이 ng-click 방법에 객체를 전달할 수도 있습니다.

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

물론 ng-dblclick 태그도 있습니다

네 번째 분기 문: ng-switch on, ng-if/ng-show/ng-hide/ng-disabled 태그

Branch 문을 사용하면 인터페이스에 대한 논리적 판단을 작성할 수 있습니다.

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

다섯 번째 검증 문법: ng-trim ng-minlength ng-maxlength 필수 ng-pattern 및 기타 태그

양식의 입력 상자에 대해서는 위의 태그를 사용하여 사용자 입력을 확인할 수 있습니다.
당신은 이미 그것이 문자 그대로 무엇을 의미하는지 알고 있습니다.

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

$scope.yourForm.inputText.$error.required를 사용하여 입력 상자가 비어 있는지 확인할 수 있습니다

$scope.yourForm.inputText.$invalid를 사용하여 입력 콘텐츠가 ng-pattern, ng-maxlength, maxlength를 충족하는지 확인할 수 있습니다

$scope.userNum을 통해 얻은 입력 콘텐츠에는 ng-trim이 있기 때문에 앞뒤 공백이 제거되었습니다.

6번째 드롭다운 상자 ng-options 태그

ng-options는 드롭다운 상자용으로 특별히 만들어진 태그입니다.

<select ng-model="yourSelected" ng-options="person.id as person.name in persons"></select>

드롭다운 상자에 person.name이 표시됩니다. 그 중 하나를 선택하면 yourSelected를 통해 선택한 person.id를 얻을 수 있습니다.

일곱째: CSS의 ng 스타일 태그 제어

ng 스타일을 사용하면 CSS 속성을 쉽게 제어할 수 있습니다

<span ng-style="myColor">your color</span>

다음과 같이 myColor에 값을 할당하여 원하는 효과를 변경할 수 있습니다.

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};

비동기 요청을 위한 여덟 번째 $http 객체입니다.

AngularJS는 비동기 요청을 위해 jquery의 $.ajax와 유사한 객체를 제공합니다.
비동기 작업은 AngularJS에서 매우 중요하므로 $http 작업은 비동기 매개변수도 제공하는 jquery.ajax와 달리 모두 비동기입니다.

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});

POST 요청을 하는 경우 params의 데이터는 URL 끝에 배치되고 data의 데이터는 요청 본문에 배치됩니다.

위에서는 AngularJS에서 가장 일반적으로 사용되는 8가지 기능을 공유했습니다. 도움이 되길 바랍니다.