AngularJS19

• 

  [AngularJS] ng-repeat로 반복해서 표시해 보자. #2 ​ 지난번에는 초기값으로 선언된 단순 배열을 반복해서 표시했다. 2023.02.22 - [■ Front-End ■/AngularJs] - [AngularJS] ng-repeat로 반복해서 표시해 보자. #1 [AngularJS] ng-repeat로 반복해서 표시해 보자. #1 ​AngularJS로 미리 선언된 초기값을 ng-repeat 속성으로 반복해서 표시하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-init 속성을 agapeuni.tistory.com 이번에는 좀 더 복잡한 형태의 값을 표시하는 예제를 구현해 본다. div 태그에 ng-init 속성을 만들고 값을 미리 정의한다. names라는 이.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] ng-repeat로 반복해서 표시해 보자. #1 ​AngularJS로 미리 선언된 초기값을 ng-repeat 속성으로 반복해서 표시하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-init 속성을 만들고 값을 미리 정의한다. ng-init에 정의한 books를 반복해서 표시하려면 태그에 ng-repeat 속성을 사용한다. 반복할 대상을 in으로 선언하고 그것을 표시하고자 하는 곳에 Angular 템플릿으로 정의한다. {{ book }} {{ book }} ​ ​ 예제코드 Book List: {{ book }} {{ book }} ng-init으로 정의한 목록이 아래의 화면과 같이 자동으로 반복하여 표시된다. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 앱(ng-app)과 컨트롤러(ng-controller) 생성 ​AngularJS를 사용하여 앱(ng-app)과 컨트롤러(ng-controller) 생성하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. 다음과 같이 "myApp" 이름으로 앵귤러앱(모듈)을 만든다. var app = angular.module('myApp', []); 생성한 "myApp" 앱에 "myCtrl" 이름으로 컨트롤러를 만든다. 이름은 div 태그에 ng-controller 속성에 정의한 값을 사용한다. $scope에 "id", "pwd", "name"의 속성의 이름으로 값을 할당하였다. 그리고 clear() 함수와 mean() 함수도 만들어 두었다. clear() 함수는 id, pwd 값을 공백으로 할당하고 .. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] ng-init 초기값 및 산술연산 초기값을 미리 선언하여 산술연산을 하는 예제를 구현해 본다. ​AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가합니다. div 태그에 ng-app 속성을 만들고 ng-init 속성으로 초기값을 설정한다. ​ span 태그에 ng-bind 속성이나 익스프레션으로 값을 표현한다. 산술연산자를 같이 사용하여 값을 계산할 수 있다. cost : rest : {{ money - cost * count }} ​ 예제코드 나는 지금 {{ money }}원을 갖고 있다. 음료수의 가격은 {{ cost }}원 이다. 날이 더워서 {{count}}개를 사먹었다. 소비 : 잔액 : {{ money - cost * count }} 클라이언트 템플릿과 ng-bind로 산술연산을.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] ng-init 초기값 설정 ​AngularJS로 미리 선언된 초기값을 화면에 표시하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 ng-init 속성으로 초기값을 설정한다. ng-init 속성에 정의한 값을 바인딩하여 바로 사용할 수 있다.​ ​ 그리고 span 태그에 ng-bind 속성을 만든다. ng-bind 속성의 값을 ng-init에 정의한 값을 사용한다. color1: name: skill: li 태그에 ng-repeat 속성을 입력하고 person.skill을 in으로 지정한다. 그러면 person.skill에 정의되어 있는 값이 하나씩 반복하며 표시된다. {{ sk }} 예제코드 color1: c.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] ng-model과 nb-bind로 동적으로 연동 ​AngularJS를 활용하여 화면에서 입력받은 문자열을 출력하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 AngularJS CDN을 script 태그에 추가한다. 웹 페이지에 div 태그를 만들고 ng-app 지시문을 작성한다. ng-app 지시문은 AngularJS 애플리케이션을 정의하는 지시문이다. input 태그에 ng-model 속성을 작성하고 ng-model 속성의 값은 "name"으로 한다. span 태그에 ng-bind 속성을 만들고 그 이름을 속성의 값으로 입력한다. 그렇게 되면 ng-model 속성이 ng-bind 속성에 바인딩되어 입력하는 값이 바로 태그에 출력된다. | 동적 바인딩 | 예제코드 Name : Good Morning. ​ 브라우저에서 화면을 .. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 안녕, 앵귤러 제이에스 (Hello, AngularJS) AngularJS를 활용하여 화면에서 입력한 문자열을 페이지에 바로 출력해 보자. AngularJS를 페이지에서 사용하려면 Aangular 파일을 내려받아 파일로 포함을 하던지 다음과 같이 AngularJS CDN(Contents Delivery Network)을 script 태그로 추가한다. ​ CDN을 추가하고 나서 div 태그에 ng-app 속성을 만든다. AngularJS는 ng-app 속성으로 단일 모듈을 생성할 수 있다. 그리고 input 태그에 ng-model 속성을 만든다. ng-model 속성의 값은 "name"으로 하고 그 이름으로 익스프레션을 {{ }} 추가한다. 화면에서 ng-model을 지정한 항목에서 값을 입력하면 익스프레션에 바인딩 되어 동적을 값이 표시된다. | 동적바인딩 |.. ■ Front-End ■/AngularJs 2023. 2. 22.