전체 글101

• 

  [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.

• 

  [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.

• 

  [jQuery 모바일] 패널과 리스트 with JSON 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 이번에는 화면 왼쪽에서 편리하게 사용할 수 있는 패널과 JSON 데이터를 읽어 목록에 추가하는 예제는 기본 템플릿에서 부터 만들어 보자. 패널 패널 밖을 누르거나 아래의 버튼을 클릭하세요. ■ Front-End ■/jQuery Mobile 2023. 2. 11.