티스토리 뷰

javascript/Angular js

Angular js - Tutorial 1. 작품 리스트

이브라히모비치 2015. 5. 28. 13:59







Angular js로 이런걸 만들겁니다.




우선 해야할일은 Angular 모듈 지정 : html 에 ng-app 을 통해 선언해줍니다. 

(실제 마크업에는 data-ng-app으로 되어있는데 w3c 벨리데이터 통과를 위함)


1
2
[ html ]
<html lang="ko" data-ng-app="webtoonApp"> <!-- 모듈설정 -->
cs

1
2
[ js ]
var webtoonApp = angular.module('webtoonApp',[]);
cs



view에 표현할 div에 컨트롤러 지정 : ng-controller 사용 (webtoonListCtrl)


1
2
[html]
<div class="wrap_webtoon" data-ng-controller="webtoonListCtrl"> <!-- 컨트롤러 지정 -->

cs


1
2
[ js ]
webtoonApp.controller('webtoonListCtrl', function(){});
cs




컨트롤러에서 내려주는 model을 루프 돌려줌 : ng-repeat 을 통해 webtoons 배열 루프


1
2
[ html ]
<li data-ng-repeat="webtoon in webtoons"> <!-- ng-repeat을 통해 루프 돌려줍니다. -->
cs

1
2
3
4
[ js ]
$http.get(jsonUrl).success(function(data){
    $scope.webtoons = data.data.webtoons;
});
cs




{{ string }} 으로 개별 webtoon 의 정보 표현


1
2
3
4
5
6
[ html ]
<a href="#none" class="link_webtoon">
    <img data-ng-src="{{ webtoon.thumbnailImage2.url }}" class="img_webtoon">
    <strong class="tit_webtoon"> {{ webtoon.title }} </strong>
    <span class="txt_artist"> {{ webtoon.cartoon.artists[0].name }} </span>
</a>
cs





[ 전체코드 ]


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
[ index.html ]
 
<!DOCTYPE html>
<html lang="ko" data-ng-app="webtoonApp"> <!-- 모듈설정 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Daum 만화속세상</title>
    <script type="text/javascript" src="http://s1.daumcdn.net/svc/original/U03/cssjs/jquery/jquery-2.1.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
</head>
<body>
<style>
.list_webtoon {overflow:hidden}
.list_webtoon li {float:left;width:120px;height:160px;margin:10px 10px 0 0;border:1px solid #000}
.list_webtoon .link_webtoon {display:block}
.list_webtoon .img_webtoon {display:block;width:120px;height:115px}
.list_webtoon .tit_webtoon {display:block}
</style>
 
<div class="wrap_webtoon" data-ng-controller="webtoonListCtrl"> <!-- 컨트롤러 지정 -->
    {{ webtoons.length }}개의 작품
    <ul class="list_webtoon">
        <li data-ng-repeat="webtoon in webtoons"> <!-- ng-repeat을 통해 루프 돌려줍니다. -->
            <a href="#none" class="link_webtoon">
                <img data-ng-src="{{ webtoon.thumbnailImage2.url }}" class="img_webtoon">
                <strong class="tit_webtoon">{{ webtoon.title }}</strong>
                <span class="txt_artist">{{ webtoon.cartoon.artists[0].name }}</span>
            </a>
        </li>
    </ul>
</div>
 
<script src="/resources/common.js"></script>
</body>
</html>

cs



1
2
3
4
5
6
7
8
9
[ common.js ]
 
var webtoonApp = angular.module('webtoonApp',[]);
 
webtoonApp.controller('webtoonListCtrl', function($scope, $http){
    $http.get('json url here').success(function(data){
        $scope.webtoons = data.data.webtoons;
    });
});
cs





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

'javascript > Angular js' 카테고리의 다른 글

Angular js - Tutorial 4. Event  (0) 2015.05.28
Angular js - Tutorial 3. $http (XMLHttpRequest)  (0) 2015.05.28
Angular js - Tutorial 2. 반복문, 조건문등  (0) 2015.05.28
공유하기 링크
댓글
Kakao 다음웹툰 / 웹표준 및 ft기술, 웹접근성 / 세아이 아빠, 제주 거주 중..
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday