AngularJS 애플리케이션

정말의 AngularJS 애플리케이션을 만들 때가 되었습니다.

쇼핑리스트 만들기

AngularJS의 몇 가지 기능을 사용하여 쇼핑리스트를 만들어 보겠습니다. 상품을 추가하거나 제거할 수 있습니다:

저의 쇼핑리스트
  • {{x}}×

{{errortext}}


애플리케이션 설명

1단계: 시작

먼저 myShoppingList 애플리케이션에 추가하고, 그에 대해 myCtrl 의 제어자

이름이 products 의 배열을 현재 $scope 중.

HTML에서, 사용하여 ng-repeat 배열 항목을 사용하여 목록을 표시하는 지시

예제

지금까지, 배열 항목을 기반으로 한 HTML 목록을 생성했습니다:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["우유", "반죽", "치즈"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

자신의 손으로 직접 시도해보세요

2단계: 상품 추가

HTML에서, 텍스트 필드를 추가하고, 사용하여 ng-model 지시를 애플리케이션에 연결합니다.

컨트롤러에서， addItem 함수를 사용하여 addMe 입력 필드의 값을 사용하여 상품을 추가합니다. products 배열에.

버튼을 추가하고, 그에 대해 ng-click 지시, 이 버튼을 클릭할 때 실행될 지시 addItem 함수。

예제

지금으로서는 상품을 구매 목록에 추가할 수 있습니다：

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["우유", "반죽", "치즈"];
  $scope.addItem = function () {
    $scope.products.push($scope.addMe);
  }
});
</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()">추가</button>
</div>

자신의 손으로 직접 시도해보세요

第 3 步：상품 제거

우리는 구매 목록에서 상품을 제거할 수 있기를 원합니다.

컨트롤러에서， removeItem 의 함수를 생성하여 제거하고자 하는 항목의 인덱스를 매개변수로 제공합니다.

HTML에서 각 항목에 대해 <span> 요소를 사용하고，그에 대한 ng-click 지시어，이 지시어는 현재 인덱스 호출 removeItem 함수。

예제

지금으로서는 구매 목록에서 상품을 제거할 수 있습니다：

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["우유", "반죽", "치즈"];
  $scope.addItem = function () {
    $scope.products.push($scope.addMe);
  }
  $scope.removeItem = function (x) {
    $scope.products.splice(x, 1);
  }
});
</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()">추가</button>
</div>

자신의 손으로 직접 시도해보세요

第 4 步：오류 처리

이 애플리케이션에는 몇 가지 오류가 있습니다. 예를 들어, 같은 상품을 두 번 추가하면 애플리케이션이 충돌할 수 있습니다. 또한, 비어 있는 상품을 추가할 수도 없어야 합니다.

이를 통해 새로운 상품을 추가하기 전에 값을 확인하여 이 문제를 해결할 수 있습니다.

HTML에서, 오류 메시지를 위한 컨테이너를 추가하고, 누군가가 기존 상품을 추가하려고 시도할 때 오류 메시지를 작성합니다.

예제

구매 목록, 오류 메시지를 입력할 수 있습니다：

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["우유", "반죽", "치즈"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "이 상품은 이미您的购物清单中에 있습니다.";
    }
  }
  $scope.removeItem = function (x) {
    $scope.errortext = "";
    $scope.products.splice(x, 1);
  }
});
</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()">추가</button>
  <p>{{errortext}}</p>
</div>

자신의 손으로 직접 시도해보세요

제 5 단계: 디자인

이 애플리케이션은 실행될 수 있지만, 더 나은 디자인을 사용할 수 있습니다. 우리는 W3.CSS 스타일 시트를 사용하여 애플리케이션을 설계했습니다.

W3.CSS 스타일 시트를 추가하고 전체 애플리케이션에 적절한 클래스를 포함하면, 이 페이지 상단의 쇼핑리스트와 같은 결과를 얻을 수 있습니다.

예제

W3.CSS 스타일 시트를 사용하여 애플리케이션을 설계하세요:

<link rel="stylesheet" href="https://www.codew3c.com/lib/style/w3.css">

자신의 손으로 직접 시도해보세요