■ Front-End ■/AngularJs19

• 

  [AngularJS] Bootstrap을 적용한 간단한 장바구니를 만들어보자 AngularJS로 장바구니(ShoppingList)에 상품을 등록하고 삭제하는 예제다. 화면이 깔끔하게 표시되도록 Bootstrap을 사용하였다. 아래의 URL의 우측에 표시된 장바구니 화면을 참고하여 코드에 적용하였다. https://getbootstrap.com/docs/4.4/examples/checkout/ Checkout example · Bootstrap Checkout form Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form wi.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 데이터를 SelectBox에 표시한 뒤 선택한 항목을 표시 SPA 작성을 쉽게 하는 자바스크립트 웹 프레임워크이다. AngularJS에서 JSON 형식의 데이터를 SelectBox에 표시한 뒤 선택한 항목을 표시하는 예제다. code, name, price로 이루어진 books이라는 데이터를 아래와 같이 정의한다. $scope.books = [ { "code" : "code01", "name" : "MongoDB", "price" : 16000 }, { "code" : "code02", "name" : "Express", "price" : 12000 }, { "code" : "code03", "name" : "AngularJS", "price" : 13000 }, { "code" : "code04", "name" : "Node.js", "price" : 1500.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 헤더를 클릭하여 테이블에 출력한 데이터를 정렬 AngularJS에서 JSON 형식의 데이터를 테이블에 표시한 뒤 헤더를 클릭하여 데이터를 정렬하는 예제다. 먼저 books이라는 데이터를 선언하고 orderByMe() 함수를 정의하는데 파라미터를 입력받아 myOrderBy에 저장합니다. angular.module('myApp', []).controller('myCtrl', function($scope) { $scope.books = [ { ... (아래의 코드를 참조) ... } ]; $scope.orderByMe = function(x) { $scope.myOrderBy = x; } }); ng-repeat를 사용하여 JSON 형식의 데이터를 반복하여 출력한다. 여기서 orderBy:myOrderBy라고 필터를 적용하였는데 ng-click으로 선언한.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 폼 입력항목 AngularJS의 유효성검사 AngularJS에서 angular.copy() 함수를 사용하여 폼의 reset 기능을 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. form 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성에는 "myCtrl"이라고 정의한다. form 태그에 novalidate 속성을 정의하면 브라우저의 유효성 검사를 하지 않는다. 폼 입력항목에 required 속성을 정의한다. "name" 입력항목에 유효성검사 오류시 표시되는 문구다. $dirty 는 폼에서 사용자가 값을 수정한 적이 있는지를 확인한다. $invalid 는 폼에서 입력항목의 값에 오류가 있는지를 확인한다. 참고로 $valid는 항목의 값.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 폼에서 angular.copy() 함수를 사용하여 reset 기능구현 AngularJS에서 angular.copy() 함수를 사용하여 폼의 reset 기능을 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다. 컨트롤러에 다음과 같이 resetUser를 정의해 두고 reset() 함수를 만든다. reset() 함수에서는 angular.copy() 함수를 사용하여 resetUser를 currUser에 복사한다. AngularJS 가 처음 시작할 때 $scope.reset(); 로 한번 호출되어 currUser에는 resetUser가 복사되어 있다. app.controlle.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] ng-show, ng-hide 속성으로 화면요소를 보이기/감추기 AngularJS에서 ng-show, ng-hide 속성을 사용하여 화면요소를 동적으로 보이고 감추는 예제를 구현한다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다. lastName은 ng-show 속성을 만들었고 firstName은 ng-hide 속성을 만들었다. ng-show 속성은 true일 때 보이고 false 일 때 안 보인다. ng-hide 속성은 true일때 감추고 false 일 때 표시된다. 컨트롤러에 다음과 같이 isShow, isHide 값을 정의했다. $scope..isShow = fals.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] ng-disabled 속성으로 버튼을 활성화/비활성화 AngularJS에서 ng-disabled 속성을 사용하여서 동적으로 버튼의 활성화 상태를 변경한다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "" 으로 정의하고 ng-init 속성에 값을 "mySwitch=true" 로 정의한다. 버튼1은 활성화 상태로 표시되고 버튼2는 비활성화 상태로 표시되는 일반적인 버튼이다. 버튼1 버튼2 버튼3은 ng-diabled 속성을 만들고 값을 "mySwich"로 정의하였다. ng-init에 "mySwitch=true" 로 초기설정이 되어있어 처음에 표시될 때는 버튼3은 비활성화 상태로 표시된다. 버튼3 체크박스항목에 ng-model 속성을 만들고 "mySwitch".. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] $http 서비스로 받아온 데이터에 필터를 적용해보자. AngularJS에서 $http 서비스를 이용하여 json 데이터를 컨트롤러에 갖고 와 필터를 적용해서 화면에 표시해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다. 컨트롤러 코드를 살펴보면 $http.get()으로 파일경로를 입력하면 파일 내용을 response에 담아 온다.JSON 파일경로나 JSON 데이터를 넘겨주는 URL을 기재하면 된다. json 데이터를 보면 date 이름으로 배열형태로 담겨져 있어서 response.data로 하였다. $http.get("./data.json").then( f.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] $http 서비스를 이용하여 json을 갖고와 표시해보자. AngularJS에서 $http 서비스를 이용하여 json 데이터를 컨트롤러에 갖고 와 화면에 표시해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp" 으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다. 컨트롤러 코드를 살펴보면 $http.get()으로 파일경로를 입력하면 파일 내용을 response에 담아온다. JSON 파일경로나 JSON 데이터를 넘겨주는 URL을 기재한다. json 데이터를 보면 date 이름으로 배열형태로 담겨 있어서 response.data로 했다. $http.get("./data.json").success( function(re.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 출력된 목록에 필터(Filter)를 적용해보자. AngularJS에서 표시되는 값에 Filter를 적용해서 소문자로 대문자로 표시하고 검색어로 필터하여 표시해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp" 으로 정의하고 ng-controller 속성을 만들고 "myCtrl" 이라고 정의한다. ng-repeat 속성으로 값을 표시할때 search로 필터를 적용하고 orderBy 필터에 "name" 필드로 정렬을 하였다. 표시되는 항목의 name속성은 소문자로 desc 속성은 대문자로 적용하였다. {{ (x.name | lowercase) + ', ' + (x.desc | uppercase) }} 예제의 전체코드이다. Filter : .. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 표시되는 데이터를 정렬(orderBy) 해보자. AngularJS에서 orderBy 필터를 사용해서 화면에 데이터를 정렬하여 표시하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp" 으로 정의하고 ng-controller 속성을 만들고 "myCtrl" 이라고 정의한다. 영역에서 div 태그에 정의한 "myApp" 으로 app을 생성하고 "myCtrl" 로 controller를 생성합니다. controller 내에서 $scope 에 값을 할당하면 화면요소에 바인딩되어 표시된다. angular.module('myApp', []).controller('myCtrl' , function($scope) { $scope.names.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] ng-controller에서 $scope 를 사용해보자. AngularJS에서 ng-controller를 생성하고 $scope를 사용하여 화면에 표시하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp" 으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다. 영역에서 div 태그에 정의한 "myApp" 으로 app을 생성하고 "myCtrl"로 controller를 생성한다. 그리고 나면 controller 내에서 $scope 에 값을 할당하면 화면 요소에 바로 바인딩되어 표시된다. 참고로 $scope는 정의된 controller 내에서 화면 요소와 연계된 유효한 저장공간으로 생각할 수 있다. var .. ■ Front-End ■/AngularJs 2023. 2. 22.