AngularJS 게시판 accordion 스타일

요줌 web application 만드는 것에 재미를 느껴서 이것저것 기웃거리는 중이다.
오늘은 전에 만들어본 게시판을 single page application 이라는 형태에 부합시키기 위해서 accordion 형태로 변경해 보았다. angular ui bootstrap- accordion을 사용했다. 페이지 재로딩없이 모든 기능을 처리한려 구현 해봤는데.. 이러면 좀더 SPA 다워진걸까..^^

이 게시판의 소스는 아래에서 확인하세요.

https://github.com/jeremyko/simple_angularjs_bulletin_board

AngularJS : Seoul Dust Dashboard

Displaying current density of particulate matter(PM10) in seoul using AngularJS, Express.js

 https://github.com/jeremyko/SeoulDustDashBoard

앵귤러 보름만하면 나도 프론트엔드 웹개발자? ^^

서울시 대기환경 정보 사이트에서 주기적으로 데이터를 긁어와서  표와 챠트로 보여주게 하는 간단한 Web App을 만들어 보았다. 개발 하면서도 매우 재미 있었다.^^

AngularJS : Best practice, 'dot rule'

AngularJS 에서 model을 UI 에 바인딩 시키는 경우, 이른바 'dot rule' 이라고 하는 idiom 이 있다.

"ng-model을 사용 시 dot(.) 이 존재해야 한다. 그렇지 않다면 잘못하고 있는것이다"
"Whenever you have ng-model there’s gotta be a dot in there somewhere. If you don’t have a dot, you’re doing it wrong."

AngularJS Best Practices 에 나오는 내용이고 간단한 예제를 보이면서 설명하고 있다.
이 동영상에 나오는 예제와 동일한 맥락의 다음 예제를 살펴보자.

firefox 에서 JS Bin 이 제대로 표시가 안되는 경우엔 IE, chrome 을 사용해본다.

AngularJS : Controller들간 데이터 공유, $broadcast/$on or service?

AngularJS sharing data between controllers : $broadcast/$on or service?

예를 들어 A, B, C 컨트롤러간에 데이터를 공유해야 하는 경우가 있다라고 가정 해보자.
즉, A 컨트롤러가 변경시키는 어떠한 데이터를 다른 컨트롤러들에서 추적해서 화면등에 갱신이 필요한 경우라면 어떤 방법이 좋을까..
이러한 Controller들간의 데이터를 공유하는 방법에 대한 내용을 인터넷을 찾아보면
$broadcast, $on을 사용해서 구현한 경우를 자주 볼수 있다.
그런데 이곳저곳 살펴보고 내린 나름의 결론은 서비스를 사용하는것이 정석이란 것이다.
서비스의 본래 목적은 어플리케이션의 비지니스 로직을 담기 위한 장소이지만,  singleton의 특징을 활용, 이 서비스에 데이터를 보관하고 컨트롤러에서 inject하면 각 컨트롤러에서 동일한 데이터를 참조하게 할수 있는것이다.

firefox 에서 JS Bin 이 제대로 표시가 안되는 경우엔 IE, chrome 을 사용해본다.

AngularJS : Binding Primitive, Reference Type

AngularJS의 2 way-data binding 사용에 시행착오를 겪은 부분이 있어서 글로 남겨본다.

directive, expression 등을 사용하여 binding하는 경우 $watch가 생성되어 model의 변경을 감시하게 된다. 다음 예제를 한번 살펴보자.

예제1) 정상적으로 동작하지 않는 경우
버튼을 눌러봐도 값이 변경되지 않는다.

AngularJS 게시판

AngularJS(1.3.6)+ Express + mongojs 이용한 간단한 게시판

앵귤러 보름만 해보면 나도 프론트엔드 웹개발자^^

https://github.com/jeremyko/AngularJsBulletinBoard_PlainStyle
일반적인 형식

최근 Web front end 계의 대세라는 AngularJS에 흥미가 생겨서, 간단 게시판을 한번 만들어 보았다. Express app의 기본구조에 AngularJS의 처리를 추가한 형태이다. Express 는 일종의 Rest API 역활로서 mongodb의 데이터를 전송해주는 역활을 한다.

https://github.com/jeremyko/simple_angularjs_bulletin_board
accordion 스타일