Skip to content

Commit

Permalink
added templating via AngularJS directives
Browse files Browse the repository at this point in the history
  • Loading branch information
@enchained
enchained committed May 26, 2014
1 parent 4ac1e28 commit db5369b
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 54 deletions.
106 changes: 61 additions & 45 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,56 +4,72 @@
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="flickr-search"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Flickr Search</title>
<meta name="description" content="Picture search that uses Flickr API">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body ng-controller="SearchController as search">
<div class="container">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Flickr Search</title>
<meta name="description" content="Picture search that uses Flickr API">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body ng-controller="SearchController as search">

<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<form name="searchForm" class="navbar-form navbar-default text-center" role="search" ng-submit="newSearch()" novalidate>
<div class="container-fluid">
<div class="form-group" ng-class="{'has-error' : emptySubmitted && searchForm.keywords.$error.required }">
<input name="keywords" type="text" class="form-control" placeholder="Искать на Flickr" ng-model="searchKeywords" ng-change="fieldChange()" required>
<div class="container">

<search-bar></search-bar>

<alert-message></alert-message>

<search-results-grid></search-results-grid>

<pagination ng-show="showNav" boundary-links="true" total-items="totalItems" ng-model="currentPage" ng-init='currentPage = 1' max-size="maxSize" items-per-page="itemsPerPage"
previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;">>
</pagination>

</div>

<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/templates.js"></script>
<script src="js/ui-bootstrap-tpls-0.11.0.js"></script>

<!-- Templates will be loaded to angularJS cache. This will allow to use custom directives as templates with file:// protocol.-->
<script type="text/ng-template" id="search-bar.html">
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<form name="searchForm" class="navbar-form navbar-default text-center" role="search" ng-submit="newSearch()" novalidate>
<div class="container-fluid">
<div class="form-group" ng-class="{'has-error' : emptySubmitted && searchForm.keywords.$error.required }">
<input name="keywords" type="text" class="form-control" placeholder="Искать на Flickr" ng-model="searchKeywords" ng-change="fieldChange()" required>
</div>
<button type="submit" class="btn btn-default">Найти</button>
</div>
<button type="submit" class="btn btn-default">Найти</button>
</div>
</form>
</form>
</div>
</div>
</div>
</script>

<div id="error" class="alert alert-danger alert-dismissable" ng-show="showMessage" ng-model="message">
<button type="button" class="close" data-dismiss="alert" ng-click="showMessage = false" aria-hidden="true">&times;</button>
{{message}}
</div>
<script type="text/ng-template" id="alert-message.html">
<div id="error" class="alert alert-danger alert-dismissable" ng-show="showMessage" ng-model="message">
<button type="button" class="close" data-dismiss="alert" ng-click="showMessage = false" aria-hidden="true">&times;</button>
{{message}}
</div>
</script>

<div class="container-fluid">
<div class="row" ng-repeat="row in pictureRows | limitTo: 3">
<div class="thumbnail picture col-sm-3 col-xs-12" ng-repeat="picture in row">
<a href="{{picture.flickr}}" target="_blank">
<img ng-src="{{picture.img}}" alt="{{picture.title}}">
<p class="caption text-center">{{picture.title}}</p>
</a>
</div>
<script type="text/ng-template" id="search-results-grid.html">
<div class="container-fluid">
<div class="row" ng-repeat="row in pictureRows | limitTo: 3">
<div class="thumbnail picture col-sm-3 col-xs-12" ng-repeat="picture in row">
<a href="{{picture.flickr}}" target="_blank">
<img ng-src="{{picture.img}}" alt="{{picture.title}}">
<p class="caption text-center">{{picture.title}}</p>
</a>
</div>
</div>
</div>
</div>
</script>

<pagination ng-show="showNav" boundary-links="true" total-items="totalItems" ng-model="currentPage" ng-init='currentPage = 1' max-size="maxSize" items-per-page="itemsPerPage"
previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;">>
</pagination>

</div>

<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/ui-bootstrap-tpls-0.11.0.js"></script>

</body>
</body>
</html>
16 changes: 7 additions & 9 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@


(function() {
var app = angular.module('flickr-search', ['ui.bootstrap']);

var app = angular.module('flickr-search', ['ui.bootstrap', 'template-directives']);



app.controller('SearchController', ['$scope', '$http', function ($scope, $http) {
var newSearchKeywords;

Expand Down Expand Up @@ -94,19 +96,15 @@
}
$scope.fetchOnePage($scope.currentPage);
} else if (newSearchKeywords && (newSearchKeywords === $scope.searchKeywords)) {
newSearchKeywords = $scope.searchKeywords;
// if ($scope.currentPage !== 1) {
$scope.currentPage = 1;
return;
// }
$scope.currentPage = 1;
return;
} else {
newSearchKeywords = $scope.searchKeywords;
$scope.fetchOnePage($scope.currentPage);

}
}
};

}]);

})();
35 changes: 35 additions & 0 deletions js/templates.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
'use strict';


(function() {

var app = angular.module('template-directives', []);

app.directive('searchBar', function($templateCache) {
return {
restrict: 'E',
templateUrl: 'search-bar.html',
scope: false,
transclude: false
};
});

app.directive('alertMessage', function($templateCache) {
return {
restrict: 'E',
templateUrl: 'alert-message.html',
scope: false,
transclude: false
};
});

app.directive('searchResultsGrid', function($templateCache) {
return {
restrict: 'E',
templateUrl: 'search-results-grid.html',
scope: false,
transclude: false
};
});

})();

0 comments on commit db5369b

Please sign in to comment.