AngularJS 애플리케이션

❮ 이전의 다음 ❯

이제 실제 AngularJS 응용 프로그램을 만들 차례입니다.

쇼핑 목록 만들기

AngularJS 기능 중 일부를 사용하여 항목을 추가하거나 제거할 수 있는 쇼핑 목록을 만들 수 있습니다.

내 쇼핑 목록

우유×
빵×
치즈×

응용 프로그램 설명

1단계. 시작하기:

라는 응용 프로그램을 만들어 시작하고 myShoppingList이름이 지정된 컨트롤러를 추가 myCtrl합니다.

products컨트롤러는 현재 에 이름이 지정된 배열을 추가합니다 $scope.

HTML에서는 ng-repeat지시문을 사용하여 배열의 항목을 사용하여 목록을 표시합니다.

예시

지금까지 배열 항목을 기반으로 HTML 목록을 만들었습니다.

var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
});

</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

2단계. 항목 추가:

ng-model HTML에서 텍스트 필드를 추가하고 지시문 을 사용하여 애플리케이션에 바인딩합니다 .

컨트롤러에서 라는 함수를 만들고 입력 필드 addItem의 값을 사용 하여 배열에 항목을 추가합니다.addMeproducts

버튼을 추가하고 버튼 을 클릭할 때 기능 ng-click을 실행할 지시문을 지정합니다 .addItem

예시

이제 쇼핑 목록에 항목을 추가할 수 있습니다.

</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>

3단계. 항목 제거:

또한 쇼핑 목록에서 항목을 제거할 수 있기를 원합니다.

컨트롤러에서 removeItem제거하려는 항목의 인덱스를 매개변수로 받는 이라는 함수를 만듭니다.

HTML에서 <span>각 항목에 대한 요소를 ng-click만들고 removeItem 현재 $index.

예시

이제 쇼핑 목록에서 항목을 제거할 수 있습니다.

</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in products">
      {{x}}<span ng-click="removeItem($index)">×</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
</div>

4단계. 오류 처리:

동일한 항목을 두 번 추가하려고 하면 응용 프로그램이 충돌하는 등 응용 프로그램에 몇 가지 오류가 있습니다. 또한 빈 항목을 추가할 수 없습니다.

새 항목을 추가하기 전에 값을 확인하여 수정하겠습니다.

HTML에서 오류 메시지용 컨테이너를 추가하고 누군가 기존 항목을 추가하려고 하면 오류 메시지를 작성합니다.

예시

오류 메시지를 작성할 수 있는 쇼핑 목록:

</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">
      {{x}}<span ng-click="removeItem($index)">×</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
<p>{{errortext}}</p>
</div>

5단계. 디자인:

응용 프로그램은 작동하지만 더 나은 디자인을 사용할 수 있습니다. W3.CSS 스타일시트를 사용하여 애플리케이션의 스타일을 지정합니다.

W3.CSS 스타일시트를 추가하고 애플리케이션 전체에 적절한 클래스를 포함하면 결과는 이 페이지 상단의 쇼핑 목록과 동일합니다.

예시

W3.CSS 스타일시트를 사용하여 애플리케이션 스타일 지정: