dakoo's tech blog: CodeSchool의 angular.js 강의에 사용된 예제 코드

Codeschool의 angular.js 강의는 free course로 따라만 하면 쉽게 angular.js에 대해 이해할 수 있다. 이 강의를 모두 수강한 후 CodeSchool의 다른 강의를 돈을 지불하고 들어야 하겠다라는 생각을 할 정도로 정말 좋은 강의이다.

CodeSchool은 안타깝게도 샘플코드를 내려 받을 수 없다는 것이 가장 안타깝다. 그래서 공부한 내용을 정리하는 차원에서 샘플코드를 남겨둔다.
총 5개의 챕터로 구성되어 있는데 그 중 3번째 챕터까지의 샘플 코드이다.

파일은 index.html, app.js, style.css이며 angular.min.js과 bootstrap은 다운받아 압축을 풀어 css, fonts, js 폴더를 같은 폴더에 둔다.
index.html은 view를 담당하고, app.js는 controller와 data를 담당한다. controller는 view와 data와의 연결, 그리고 임시 변수와 view와의 연결을 담당한다.
style.css는 required 태그로 지정된 것들의 coloring을 담당한다. 여기서는 review form에 입력할 때 invalid이면 빨간색, valid이면 녹색으로 border색을 지정한다.

index.html

<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.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">

<header>
<h1 class="text-center">Flatlander Crafted Gems</h1>
<h2 class="text-center">– an Angular store –</h2>
</header>


<div class="list-group">

<div class="list-group-item" ng-repeat="product in store.products">
<h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3>


<div ng-controller="GalleryController as gallery" ng-show="product.images.length">
<div class="img-wrap">
<img ng-src="{{product.images[gallery.current]}}" />
</div>
<ul class="img-thumbnails clearfix">
<li class="small-image pull-left thumbnail" ng-repeat="image in product.images">
<img ng-src="{{image}}" />
</li>
</ul>
</div>


<section ng-controller="TabController as tab">
<ul class="nav nav-pills">
<li ng-class="{ active:tab.isSet(1) }">
<a href ng-click="tab.setTab(1)">Description</a>
</li>
<li ng-class="{ active:tab.isSet(2) }">
<a href ng-click="tab.setTab(2)">Specs</a>
</li>
<li ng-class="{ active:tab.isSet(3) }">
<a href ng-click="tab.setTab(3)">Reviews</a>
</li>
</ul>


<div ng-show="tab.isSet(1)">
<h4>Description</h4>
<blockquote>{{product.description}}</blockquote>
</div>


<div ng-show="tab.isSet(2)">
<h4>Specs</h4>
<blockquote>Shine: {{product.shine}}</blockquote>
</div>


<div ng-show="tab.isSet(3)">

<ul>
<h4>Reviews</h4>
<li ng-repeat="review in product.reviews">
<blockquote>
<strong>{{review.stars}} Stars</strong>
{{review.body}}
<cite class="clearfix">—{{review.author}}</cite>
</blockquote>
</li>
</ul>


<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>


<blockquote >
<strong>{{reviewCtrl.review.stars}} Stars</strong>
{{reviewCtrl.review.body}}
<cite class="clearfix">—{{reviewCtrl.review.author}} on {{reviewCtrl.review.createdOn | date}}</cite>
</blockquote>


<h4>Submit a Review</h4>
<fieldset class="form-group">
<select ng-model="reviewCtrl.review.stars" class="form-control" ng-options="stars for stars in [5,4,3,2,1]" title="Stars" required >
<option value="">Rate the Product</option>
</select>
</fieldset>
<fieldset class="form-group">
<textarea ng-model="reviewCtrl.review.body" class="form-control" placeholder="Write a short review of the product..." title="Review"></textarea>
</fieldset>
<fieldset class="form-group">
<input ng-model="reviewCtrl.review.author" type="email" class="form-control" placeholder="jimmyDean@example.org" title="Email" required />
</fieldset>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary pull-right" value="Submit Review" />
</fieldset>
</form>
</div>

</section>
</div>

</div>
</body>
</html>

app.js

(function() {
    var app = angular.module('gemStore', []);

    app.controller('StoreController', function() {
        this.products = gems;
    });

    app.controller("TabController", function() {
        this.tab = 1;

        this.isSet = function(checkTab) {
            return this.tab === checkTab;
        };

        this.setTab = function(setTab) {
            this.tab = setTab;
        };
    });

    app.controller('GalleryController', function(){
        this.current = 0;

        this.setCurrent = function(imageNumber){
            this.current = imageNumber || 0;
        };
    });

    app.controller("ReviewController", function(){

        this.review = {};

        this.addReview = function(product){
            this.review.createdOn= Date.now();
            product.reviews.push(this.review);
            this.review = {};
        };
    });

    var gems = [{
        name: 'Azurite',
        description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
        shine: 8,
        price: 110.50,
        rarity: 7,
        color: '#CCC',
        faces: 14,
        images: [
            "images/gem-02.gif",
            "images/gem-05.gif",
            "images/gem-09.gif"
        ],
        reviews: [{
            stars: 5,
            body: "I love this gem!",
            author: "joe@example.org",
            createdOn: 1397490980837
        }, {
            stars: 1,
            body: "This gem sucks.",
            author: "tim@example.org",
            createdOn: 1397490980837
        }]
    }, {
        name: 'Bloodstone',
        description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
        shine: 9,
        price: 22.90,
        rarity: 6,
        color: '#EEE',
        faces: 12,
        images: [
            "images/gem-01.gif",
            "images/gem-03.gif",
            "images/gem-04.gif"
        ],
        reviews: [{
            stars: 3,
            body: "I think this gem was just OK, could honestly use more shine, IMO.",
            author: "JimmyDean@example.org",
            createdOn: 1397490980837
        }, {
            stars: 4,
            body: "Any gem with 12 faces is for me!",
            author: "gemsRock@example.org",
            createdOn: 1397490980837
        }]
    }, {
        name: 'Zircon',
        description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
        shine: 70,
        price: 1100,
        rarity: 2,
        color: '#000',
        faces: 6,
        images: [
            "images/gem-06.gif",
            "images/gem-07.gif",
            "images/gem-08.gif"
        ],
        reviews: [{
            stars: 1,
            body: "This gem is WAY too expensive for its rarity value.",
            author: "turtleguyy@example.org",
            createdOn: 1397490980837
        }, {
            stars: 1,
            body: "BBW: High Shine != High Quality.",
            author: "LouisW407@example.org",
            createdOn: 1397490980837
        }, {
            stars: 1,
            body: "Don't waste your rubles!",
            author: "nat@example.org",
            createdOn: 1397490980837
        }]
    }];
})();

style.css

.ng-invalid.ng-dirty {
    border-color:red;
}
.ng-valid.ng-dirty {
    border-color:green;
}

dakoo's tech blog

2015년 3월 31일 화요일

CodeSchool의 angular.js 강의에 사용된 예제 코드

index.html

app.js

style.css

댓글 없음: