Skip to content

Instantly share code, notes, and snippets.

@jungheelee

jungheelee/app.html

Last active August 29, 2015 14:28
Show Gist options
  • Save jungheelee/30570f045a836db0edac to your computer and use it in GitHub Desktop.
Save jungheelee/30570f045a836db0edac to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.html
<!DOCTYPE html>
<html ng-app="quickStartApp">
<head>
<meta charset="utf-8">
<title>Quckstart for AngularJS</title>
<meta name="description" content="">
<link rel="shortcut icon" href="./favicon.ico">
<!-- build:css styles/vendor.css -->
<link rel="stylesheet" href="../bower_components/angular-ui-select/dist/select.min.css">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="styles/offcanvas.css" type="text/css"/>
<!-- endbuild -->
<!-- Select2 theme -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-class="{'collapsed': isCollapsed}" data-toggle="collapse" data-target="#navbar" ng-init="isCollapsed === true"
aria-expanded="{{isCollapsed}}" aria-controls="navbar" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse" ng-class="{'in': isCollapsed}" aria-expanded="{{isCollapsed}}">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="container" ng-controller="MainCtrl">
<div class="row row-offcanvas row-offcanvas-right" ng-class="{'active': isOffcanvas}">
<div class="col-xs-12 col-md-9 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas" ng-click="activeOffcanvas(isOffcanvas)">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>{{feeds.title.$t}}</h1>
<author>작성자 정보</author>
</div>
<!--/jumbotron-->
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-4" id="{{$index}}" ng-repeat="word in words">
<h2>{{word.gsx$heading.$t}}</h2>
<p>{{word.gsx$details.$t}}</p>
<p><a class="btn btn-default" ng-class="{'btn-primary': $index === isPrimary}" href="#detail"
ng-click="viewDetail($index, word.id.$t)" role="button">View details »</a></p>
</div>
</div>
<!--/list-->
<div class="row" id="detail">
<div class="col-xs-12" ng-if="word.hasOwnProperty('entry')">
<h2>{{word.entry.gsx$heading.$t}}</h2>
<p>{{word.entry.gsx$details.$t}}</p>
</div>
</div>
<!--/detail-->
</div>
<!--/.col-xs-12.col-sm-9-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a class="list-group-item" ng-repeat="link in feeds.link" href="{{link.href}}" target="_blank">Link to {{$index}}</a>
</div>
</div>
<!--/.sidebar-offcanvas-->
</div>
<!--/row-->
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div>
<!--/.container-->
<!-- build:js scripts/vendor.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../bower_components/angular-ui-select/dist/select.min.js"></script>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- endbuild -->
<!-- build:js scripts/main.min.js -->
<script src="scripts/main.js"></script>
<script>
$(document).ready(function () {
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
});
</script>
<!-- endbuild -->
</body>
</html>
Raw
cntrl.js
'use strict';
angular.module('quickStartApp', [])
.controller('MainCtrl', ['$scope', 'apiService', function ($scope, apiService) {
$scope.isPrimary = void 0;
$scope.isOffcanvas = true;
$scope.feeds = {};
$scope.words = [];
$scope.word = {};
//2. 샘플 백엔드 서버 프로토콜을 호출하여 $scope.words 배열에 담아 템플릿에 출력하세요.
apiService.getFeeds().then(function(feeds){
if(feeds !== null) {
$scope.feeds = feeds.feed;
$scope.words = $scope.feeds.entry;
}
});
//3. View Details 버튼 클릭 후 /words/:word_id 로 이동하는 SPA(Single Page Application)를 구현하세요.
$scope.viewDetail = function (idx, url) {
apiService.getDetail(url).then(function(feed){
if(feed !== null) {
$scope.word = feed;
}
});
$scope.isPrimary = idx;
};
$scope.activeOffcanvas = function (condition) {
$scope.isOffcanvas = !condition;
};
}])
.factory('apiService', ['$http', '$q', function($http, $q) {
var factory = {};
var listUrl = 'https://spreadsheets.google.com/feeds/list/1nnIMoOL5nZW4vAYuSE1EqyNN6LBnsi_LFvlnOKpjgkg/od6/public/values?alt=json';
factory.getFeeds = function () {
var deferred = $q.defer();
$http({url:listUrl,
method:'GET'})
.then(function(response) {
deferred.resolve(
response.data
);
}, function(x) {
deferred.reject(x);
});
return deferred.promise;
};
factory.getDetail = function (url) {
var deferred = $q.defer();
var detailUrl = url+'?alt=json';
$http({url:detailUrl,
method:'GET'})
.then(function(response) {
deferred.resolve(
response.data
);
}, function(x) {
deferred.reject(x);
});
return deferred.promise;
};
return factory;
}])
//1.앵귤러 디렉티브(Directive)를 직접 정의하여 템플릿 파일에서 사용하세요.
.directive('author', function() {
return {
restrict: 'E',
scope: false,
template: '<p>name: {{feeds.author[0].name.$t}}</p>'+
'<p>email: {{feeds.author[0].email.$t}}</p>'
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment