전체 글91

• 

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

• 

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