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 스타일