반응형 전체 글149 [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. [개발환경] 전자정부 표준프레임워크 v 3.9 웹 프로젝트 구축 전자정부 웹 프로젝트 구축을 위해 작업 노트북에 전자정부 표준프레임워크 개발환경을 구축한다. 다음은 파일을 받는 과정을 캡처한 동영상이다. 상단 메뉴에서 "다운로드 - 개발환경"을 먼저 선택하고 좌측에 "3.x 다운로드"를 선택하여 해당파일을 다운로드한다. 다운로드가 완료되면 파일을 실행하여 D 드라이브에 설치한다. 참고로 64bit용 파일을 받았다. 반디집이 설치되어 있어서 해당 파일을 클릭하니 반디집이 실행되었다. 압축 풀기 경로를 "D:\eGov"로 입력하고 압축 풀기를 클릭한다. "D:\eGov" 아래에 "eGovFrameDev-3.9.0-64bit" 폴더가 생겼는데 접근하기 쉽게 아래와 같이 변경하였다. D:\eGov\eclipse D:\eGov\workspace Java는 j.. ■ Project ■/개발 환경 2023. 2. 13. [개발환경] 전자정부 표준프레임워크 v3.9 - HSQL 대신 MariaDB 변경 2023.02.13 - [Project/개발 환경] - [개발환경] 전자정부 표준프레임워크 v3.9 - 설치 및 실행 [개발환경] 전자정부 표준프레임워크 v3.9 - 설치 및 실행 1. 개요 전자정부 표준프레임워크는 공공사업에 적용되며 java 기반의 정보시스템 개발을 위해 표준을 제공한다. 미리 구현된 주요 기능을 제공하여 효율적인 애플리케이션 구축을 지원하며 표 agapeuni.tistory.com 전자정부 표준프레임워크를 작업노트북에 설치했다. 설치하고 나서 eGovFrame Web Project를 생성할 때 기본 예제를 선택하면 HSQL를 사용한 CRUD가 제공된다. 이번 포스팅에서는 HSQL에서 MariaDB로 변경하려 한다. 테이블 생성 먼저 아래의 스크립트로 MaraiDB에 기본예제를 위한 .. ■ Project ■/개발 환경 2023. 2. 13. [개발환경] 전자정부 표준프레임워크 v3.9 - 설치 및 실행 1. 개요 전자정부 표준프레임워크는 공공사업에 적용되며 java 기반의 정보시스템 개발을 위해 표준을 제공한다. 미리 구현된 주요 기능을 제공하여 효율적인 애플리케이션 구축을 지원하며 표준화된 아키텍처를 통해 소프트웨어의 표준화를 이루며 품질향상을 도모한다. 2. 설치 전자정부 표준프레임워크 3.9 버전을 설치해 보았다. 전자정부 표준프레임워크 포털사이트에서 개발환경 파일(eGovFrameDev-3.9.0-64bit.exe)을 다운로드하고 실행하면 자동으로 압축을 해제한다. 압축해제가 완료되면 eGovFrame 기반의 애플리케이션 개발을 구축할 수 있다. * 개발자용 개발환경 버전 3.9.0 (32/64bit) - Eclipse Photon (4.8.0) 적용 - 공통컴포넌트 251종 - 실행환경 3.. ■ Project ■/개발 환경 2023. 2. 13. [jQuery 모바일] 패널과 리스트 with JSON 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 이번에는 화면 왼쪽에서 편리하게 사용할 수 있는 패널과 JSON 데이터를 읽어 목록에 추가하는 예제는 기본 템플릿에서 부터 만들어 보자. 패널 패널 밖을 누르거나 아래의 버튼을 클릭하세요. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 목록 테이블과 컬럼표시 연동 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 아래는 기능을 선택하기 위한 팝업을 구성하는 태그이다. 기능을 선택하세요 상세 보기 수정 삭제 테이블 태그에 아래와 같이 속성을 정의하면 컬럼 표시 팝업이 표시됩니다. 아래는 전테 코드이다. 목록 테이블과 기능팝업 기능... 기능을 선택하세요 상세 보기 수정 삭제 순위 영화 제목 년도 평점 1 쇼생크 탈출 1995.01.28 9.44 2 라이언 일병 구하기 1998.09.12 9.41 3 매트릭스 1999.05.15 9.40 4 인생은 아름다워 1999.03.06 9.40 5 타이타닉 1998.02.20 9.39 주한길 처음 로딩 화면 기능 선택 팝업 컬럼 선택 : 순위, 년도.. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 펼치기,접기와 몇가지팁 바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. jQuery Mobile에서 펼치기/접기가 가능한 collapsibleset에 대해서 알아보자. 다음과 같은 코드를 입력하면 각각의 표시영역에 대해서 펼치고 접기를 할 수가 있다. 표시영역 1 표시영역 2 표시영역 3 표시영역 첫번째를 보면 내용을 리스트뷰로 표시한 메세지함이다. 각각의 메세지에 대한 개수를 count로 표시하고 있다. 메세지함 보낸메세지12 받은메세지0 임시메세지4 휴지동328 표시영역 두번째를 보면 내용을 리스트뷰로 표시한 단어목록인데 data-autodividers 속성값을 true로 했다. 그렇게 설정을 하게되면 단어별로 자동으로 구분자가 표시된다. 영어단어 Ap.. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 여러가지 버튼과 리스트 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 이번에는 jQuery Mobile에서 표현할 수 있는 여러 가지 버튼과 리스트에 대해서 알아보자. 아래의 코드는 작은 원형의 버튼을 표시한다. 각각의 class 를 보면 -plus, -minus, -delete, -check에 따라 해당하는 모양이 표시된다. Plus Minus Delete Check class에 ui-grid-a 값을 두면 2단으로 표시하고 class에 ui-grid-b 값을 두면 3단으로 표시한다. 그리고 ui-block-a, b, c, ...... 순서로 칼럼의 위치를 나타낸다. 아래의 코드는 제목과 본문을 표시할때 사용하는 코드이다. classs에 값을 설정하면.. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. [jQuery 모바일] 여러가지 선택항목 (Select, Radio, Checkbox) 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. jQuery Mobile에서 표현할 수 있는 여러가지 다양한 선택항목들을 표시해 보자. 결과 화면을 보고 나서 위에 있는 항목에서 부터 아래로 하나씩 확인한다. 상단을 보면 좌측에 뒤로가기 버튼과 우측에 확인 버튼이 있고 그 아래에 메뉴1, 메뉴2, 메뉴3을 표시하고 있는 내비게이션바가 있다. 아래와 같이 여러가지 선택항목 뒤로 확인 메뉴 1 메뉴 2 메뉴 3 학년: 1학년 2학년 3학년 4학년 과목: 국어 영어 수학 외국어: 중국어 일본어 취미: 독서 음악 영화 여행 메뉴 4 메뉴 5 메뉴 6 주한길 jQuery Mobile에서 알아둘 속성 data-role="page | heade.. ■ Data Skill ■/jQuery Mobile 2023. 2. 11. 이전 1 ··· 8 9 10 11 12 13 다음 728x90