음악이 있는 개발자 블로그 음악이 있는 개발자 블로그

이 Tutorial은 w3schools의 AngularJS 강좌를 직접 실습해보는 글이다. Tutorial : www.w3schools.com/angular/default.asp

마지막으로 Update를 구현해보도록 한다. 아이디를 받아오는 Delete와 생성을 가능하게 하는 Create가 있으니 그렇게 어렵지 않다. 간단한 구현을 목표로 하고있으므로 따로 창을 생성하지 않고 input 태그를 그대로 사용하자. No. Title Name Update Delete {{$index+1}} {{item.title}} {{item.writer}} Update Delete 게시판 table을 다음과 같이 수정한다. Delete와 마찬가지로 버튼을 구현해 update 메소드와 연결시킨다. $scope.update = function(id) { if(!id) return; //예외처리 var idx = -1 for(var i = 0; i < $scope.boardlist.length; i++..

지난 글에 이어 오늘은 Create를 구현해보자. 우선 데이터를 받아와 저장할 수 있는 board의 포맷이 필요하다. $scope.boardForm = {}; 태그 내부에 boardForm이라는 변수를 만들어준다. 이 변수는 $scope 객체에서 JSON 변수로 저장된다. Title : Name : Add 게시판 태그 위에 이렇게 태그를 배치하고 내부에 table을 만들어준다. Title과 Name을 입력 받을 수 있는 input을 만들어 boardForm이라는 형식으로 저장한다. submit 버튼을 통해 insert 함수가 실행되게 한다. $scope.insert = function() { var newId; if(! $scope.boardlist.length) { newId = 1; }else { n..

이번 글에서는 AngularJS의 기본 구조를 이용하여 가벼운 게시판을 만들어 CRUD를 구현해보려한다. 게시물은 DB 연동 대신 JSON 배열(JavaScript Object Notation)을 활용한다. JSON의 활용법에 대해서는 다음 문서를 참고하자. 참고 : tcpschool.com/json/json_basic_structure 태그 내부에 다음과 같은 코드를 작성한다. 이를 통해 boardlist에 게시판의 정보가 저장된다.

참고 : 프레임워크(FrameWork) 란? 지난 글에서 프레임워크에 대한 글을 다뤄보았다. 이번 글에서는 그 중에서도 MVC Model2의 View에 해당하는 개발에 사용되는 Front-End 프레임워크에 대해 공부해보려한다. 모든 Front-End 프레임워크는 다음 3가지 특징을 갖고 있다. 1. 컴포넌트(Component) 컴포넌트란 '소프트웨어의 부품'이라고 할 수 있다. 표준으로 정의된 규약 하에서 우리는 이 모듈을 애플리케이션의 부품처럼 재사용할 수 있다. JavaScript 프레임워크에서는 JSX(JavaScript XML)이나 HTML 템플릿을 주로 사용한다. 2. 라우팅(Routing) 프레임워크는 Client-Side 라우팅을 생성하고 관리할 수 있는 API를 제공한다.* 3. 상태관리..

구글에서 만든 자바스크립트 기반의 프론트엔드 웹 애플리케이션 프레임워크 이번 글에서는 AngularJS에 대해 다뤄보려 한다. AngularJS는 SPA(Single Page Application : 단일 페이지 내에서 새로운 View를 동적으로 로드하여 사용) 프레임워크다. JavaScript 기반으로 MVVM(Model - View - View Model) 모델링이 가능하다. HTML에 다음과 같은 소스를 넣어 AngularJS 프레임워크를 사용할 수 있다. 왜 AngularJS인가? 유지보수가 쉽다. 개발속도가 빠르다 간편한 데이터 바인딩을 통해 뷰 업데이트가 쉽다. 코드 패턴이 동일해 개인간 차이에 따른 결과물의 차이가 적다. SPA 개발에 최적화되어 있다. 기능적인 분리가 명확해 협업이 쉽다. ..