The Gallery of My Life and Glacier National Park
- Create project folder, init and add .gitignore
- Get our index page to show up and folder structure
- Create static HTML
- Add bootstrap to make responsive
- Add Angular controller
- Replace HTML with ng-repeat and ng-src
- Swap image with the description
- Add like button and functionality (views)
Stretch
- Comments
- Heroku
- Server side routes ($http)
In Terminal
- Create a directory for your project
npm init
npm install express body-parser angular pg bootstrap --save
In Atom
- Folder structure
NOTE:
node_modules/
&package.json
are auto generated
weekend-4-challenge/
├── node_modules/
│ └── ...
├── server/
│ ├── modules/
│ ├── public/
│ │ ├── scripts/
│ │ │ └── client.js
│ │ ├── vendors/
│ │ │ └── ...
│ │ ├── styles/
│ │ │ └── style.css
│ │ └── index.html
│ ├── routes/
│ └── app.js
├── .gitignore
└── package.json
.gitignore
node_modules/
.DS_Store
*.log
Commit our changes
app.js
var express = require('express');
var app = express();
var port = process.env.PORT || 5000;
app.use(express.static('server/public'));
app.listen(port, function() {
console.log('Localhost running on port', port);
});
Copy vendor files
Copy angular
and bootstrap
files into the projects vendors folder.
Add HTML to the index file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Gallery of My Life</title>
<script type="text/javascript" src="vendors/angular/angular.js"></script>
<script type="text/javascript" src="scripts/data.js"></script>
<script type="text/javascript" src="scripts/client.js"></script>
<link rel="stylesheet" href="vendors/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body ng-app="app">
<div class="container">
<header>
<h1>Glacier National Park</h1>
</header>
</div>
</body>
</html>
Commit our changes
Having some static content will make it easier to build out our HTML in Angular.
Commit our changes
data.js
Example placeholder data
var placeholder = {};
placeholder.data = [
{id: 1, path: 'images/goat_medium.jpg', description:'This is a goat.', likes: 0, views: 0, showText: false},
{id: 2, path: 'images/river_medium.jpg', description:'River running from a glacier.', likes: 0, views: 0, showText: false},
{id: 3, path: 'images/sign_medium.jpg', description:'Sign.', likes: 0, views: 0, showText: false},
];
client.js
var app = angular.module('myApp', []);
app.controller('GalleryController', function(){
console.log('gallery controller running');
var gallery = this;
// Placeholder data is in data.js
gallery.photos = placeholder.data;
}]);
index.html
<!-- Under our header tag, add the following -->
<div ng-controller="GalleryController as gallery" ng-cloak>
<div>
Commit our changes
index.html
Next we'll output all images and descriptions to the screen. Hide and show will come later.
<!-- Update our HTML controller -->
<div class="row" ng-controller="GalleryController as gallery" ng-cloak>
<!-- 'entry' here could be anything, gallery.photos is from our controller -->
<div class="col-sm-6 col-lg-4" ng-repeat="entry in gallery.photos">
<!-- for each entry, print out the description and image -->
<span class="quote">"{{entry.description}}"</span>
<img class="img-responsive"
ng-src="{{entry.path}}"
alt="{{entry.description}}">
</div>
</div>
Commit our changes
index.html
<!-- Inside our controller, add the following -->
<div class="col-sm-6 col-lg-4" ng-repeat="entry in gallery.photos">
<div class="card">
<div class="button-style" ng-click="gallery.hideShow(entry)">
<span ng-show="entry.showText"
class="quote">"{{entry.description}}"</span>
<img ng-class="{'vis-hidden': entry.showText}"
class="img-responsive"
ng-src="{{entry.path}}"
alt="{{entry.description}}">
</div>
</div>
</div>
client.js
var app = angular.module('myApp', []);
app.controller('GalleryController', function(){
console.log('gallery controller running');
var gallery = this;
// Placeholder data is in data.js
gallery.photos = placeholder.data;
gallery.hideShow = hideShow;
function hideShow(image) {
image.showText = !image.showText;
}
}]);
Commit our changes
The final product moves data storage to the server but doesn't include a database. That would be the next step.
https://serene-tor-43441.herokuapp.com/
- Deckgrid wasn't used but would have made the layout look better.
- Adobe Colors used for the color pallete.