CodeSchool로 Angular.js 공부를 시작한다.
다이내믹하고 인터렉티브한, 그러면서도 서버와의 통신도 최소화해서 효율적인 프론트엔드 개발을 가능하게 해주는 프레임워크인듯 하다.
새로고침 없이 필요한 부분만 수정(?)하는게 ajax 처리랑 비슷해보이기도 한다.
코드스쿨 내용을 그대로 옮기는 건데 괜찮겠지..? 한번 문의해봐야겠다.
코드스쿨에서 가져왔다는 표기만 하면 된다고 하니 안심하고 기록해두겠다.
app.js
var app = angular.module('gemStore',[]);
gemStore라는 이름의 모듈을 만든다. 두번째 인자로 넘겨주는 배열에는 이 모듈의 dependency 모듈을 넣어주는 것 같다. 지금은 없으므로 빈 배열을 넘긴다. 여기서 중요한건 첫번재 인자인 모듈의 이름이다. 이걸 변수 app에 담든, app2에 담든 그건 상관이 없다. ng-app이 ng-app2가 될리는 없으므로... 중요한건 이름을 맞춰주는것.
index.html
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h1>{{'Hello, Angular!'}}</h1>
</body>
</html>
ng-app 지시자로 angular 모듈을 html에서 쓸 수 있도록 활성화(?)해준다.
2단계는 컨트롤러 만들기이다.
app.js
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController',function(){
this.product = gem;
});
})();
모듈 만들기와 동일하다. 대신 두번째 인자에 익명함수가 들어간다. 여기서 컨트롤러의 product변수에 gem을 셋팅해준다.
index.html
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div class="product row">
<h3>
{{store.product.name}}
<em class="pull-right">{{store.product.price}}</em>
</h3>
</div>
</body>
</html>
컨트롤러를 불러온다. as로 앨리어스를 줄수도 있다. 그리고 사용법은 간단하다. 컨트롤러는 불러온 위치에 따라 쓸 수 있는 영역이 정해진다. 위에서는 body태그에서 불러왔으므로 body 안에서 모두 컨트롤러의 object들을 불러올 수 있지만, 만약에 product row의 div에서 불러왔다면 해당 div 내에서만 해당 컨트롤러에 접근할 수 있다.
3단계 show/hide
app.js의 gem에 property를 추가한다.
var gem = {
name: 'Azurite',
price: 110.50,
canPurchase: false,
soldOut: true
};
그리고
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body class="container" ng-controller="StoreController as store">
<div ng-hide="store.product.soldOut" class="product row">
<h3>
{{store.product.name}}
<em class="pull-right">${{store.product.price}}</em>
</h3>
<button ng-show="store.product.canPurchase">Add to Cart</button>
</div>
</body>
</html>
이런식으로 show/hide 여부를 결정할 수 있다. 꽤나... 간단한데!?
4단계는 이제 리스트를 만들어서 뿌려주자.
app.js
(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.products = gems;
});
var gems = [
{ name: 'Azurite', price: 2.95 },
{ name: 'Bloodstone', price: 5.95 },
{ name: 'Zircon', price: 3.95 }
];
})();
gem를 배열로 만든다.
index.html
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body class="container" ng-controller="StoreController as store">
<div ng-repeat="product in store.products" class="product row">
<h3>
{{product.name}}
<em class="pull-right">${{product.price}}</em>
</h3>
</div>
</body>
</html>
이렇게 loop를 돌릴 수 있다. 물론 store.products[0], store.products[1] 이런식으로 접근하는 것도 가능하다.
신기하구먼... loop에서 인덱스를 따올 수 는 없으려나...??
아무튼 이렇게 해서 level1은 끝!
* 소스는 모두 http://campus.codeschool.com 에서 가져온 겁니다.
'Javascript > Angular.js' 카테고리의 다른 글
| CodeSchool Angular.js Level5 (0) | 2017.03.10 |
|---|---|
| CodeSchool Angular.js Level4 (0) | 2017.03.09 |
| CodeSchool Angular.js Level3 (0) | 2017.03.07 |
| CodeSchool Angular.js Level2 (0) | 2017.03.06 |