[AngularJS] Hello World 만들기

2013. 4. 4. 17:59 AngularJS/Prototyping

[AngularJS] Hello World 만들기

AngularJS의 세계에 빠져보자. BackboneJS 를 통하여 자유로운 영혼의 Client Side MV* framework 맛 보았다면 이제 AngularJS를 통하여 좀 더 절제되고 Fast Creating 가능한 방법에 대해 고민해 볼 때가 된 것 같다. 커뮤니티를 통하여 성숙하고 있고, 좋은 문서와 구글이라는 든든한 백그라운드까지 갖추고 있어서 무한한 성장 가능성을 가지고 있는 프레임워크라고 본다

1) Hello World

- 구글 CDN 참조

- 소스

<!doctype html>
<html lang="en" ng-app>
<head>
	<meta charset="UTF-8">
	<title>AngularJS Hello World</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>

<script>
	function DowonController($scope) {

		$scope.DowonProperty = "YoungSik";
	}
</script>

<div ng-controller="DowonController">

<input type="text" ng-model="DowonProperty" ng-model-instant/>
Hello World 

{{DowonProperty}}

</div>

</body>

</html>

- 코딩 순서

+ angularJS CDN script 태그 추가

+ <html ng-app> 추가

+ <div ng-controller> 추가

+ controller function 구현 : $scope에 속성추가/설정

+ ng-model 추가

+ {{ property }} 클라이언트 템플릿 추가

+ 수행 : WOW!!!

- 이해하기

+ ng-app를 선언한 DOM 하위는 angular를 통하여 제어가 가능하다.

+ ng-model을 HTML안에서 선언하면 controller function에서 프로퍼티를 사용할 수 있다

+ controller function에서 프로퍼티를 선언하면 HTML안에서 사용할 수 있다

+ 결국 Angular.js 는 양방향 Live Stream(Dynamic) binding을 가능하게 해준다

2) 동영상

- 소스 : https://github.com/ysyun/prototyping/blob/master/angularjs/hellworld.html

<참조>

- 동강 모음 http://johnlindquist.com/

- 페이스북 공개그룹 : https://www.facebook.com/groups/frontiner/permalink/525021784200620/

AngularJS Hello World
http://www.youtube.com/watch?v=uFTFsKmkQnQ&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

AngularJS - Getting Started - Google+
https://plus.google.com/communities/115368820700870330756/stream/f1fab692-830e-4341-b010-d0078e18719f

1. Devoxx 2012: AngularJS
http://www.youtube.com/watch?v=4EVBg1pNdtc&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

2. Mastering AngularJS - 1. Introduction
http://www.youtube.com/watch?v=DfstuptCfUo&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

3. Mastering AngularJS - 2. Using Directives .....감동의 도가니탕
http://www.youtube.com/watch?v=2SZQslQOgNg&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

4. AngularJS Tutorial .....감동의 도가니탕
http://www.youtube.com/watch?v=WuiHuZq_cg4&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

5. AngularJS Twitter Search
http://www.youtube.com/watch?v=IRelx4-ISbs&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

6. AngularJS - Directive Tutorial
http://www.youtube.com/watch?v=Yg-R1gchccg&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

7. AngularJS - Custom Components - Part 1
http://www.youtube.com/watch?v=A6wq16Ow5Ec&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

8. AngularJS - Custom Components - Part 2
http://www.youtube.com/watch?v=nKJDHnXaKTY&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

9. AngularJS - Communicating Between Controllers
http://www.youtube.com/watch?v=1OALSkJGsRw&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

10. AngularJS and DOM Manipulation
http://www.youtube.com/watch?v=bk-CC61zMZk&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

11. AngularJS - Handy Tricks With Developer Tools ...어려워 나중에
http://www.youtube.com/watch?v=4TM6wG9UW7s&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

12. AngularJS Routing ...............................................................내일은 여기서부터
http://www.youtube.com/watch?v=5uhZCc0j9RY&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

13. AngularJS - Behave like Gmail using Routes with Resolve
http://www.youtube.com/watch?v=P6KITGRQujQ&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

14. AngularJS + Chosen Plugin = Awesome
http://www.youtube.com/watch?v=8ozyXwLzFYs&list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz

저작자표시 비영리 변경금지

'AngularJS > Prototyping' 카테고리의 다른 글

[AngularJS] iCheck JQuery Plugin 을 AngularJS와 통합하기 (0)	2013.08.20
[AngularJS] Twitter Search 만들기 (0)	2013.04.05
[AngularJS] Todo 목록 만들기 (0)	2013.04.05

posted by Peter Note

AI Convergence

Publication

Tag

Category

Recent Post

[AngularJS] Hello World 만들기

'AngularJS > Prototyping' 카테고리의 다른 글

티스토리툴바