Angular Art Gallery

Art Gallery application using dynamic API data built with AngularJS

See a Plunker

Features

• Masonry 3 for mason blocking images.
• Bootstrap 3 for responsive layout.
• ngCookies for stateful experience.
• Angular Imgur API for dynamic images.
• Angular-Masonry directive.

Getting Started

Clone the repository
git clone git@github.com:gigablox/angular-art-gallery.git

Compiled Examples

These are ready to go for development and production environments.

/examples/development
/examples/production

Build Your Own

This AngularJS project is wrapped in commonly used front end development tools to save you time. Development and production environments are configured to inject static assets managed by bower. Production build concats and compresses.

Install the dependencies

cd angular-art-gallery
npm install
bower install
npm install -g grunt-cli

Get an Imgur API key

Get an Imgur API key and add it to your app.config

$imgurGlobalProvider.options({
    apiKey:'1234567890abcdefgh',
    account:'YourAccountName'
});

Build with Grunt

grunt package:dev
grunt package:dev:watch
grunt package:prod

Nginx/Apache

Point your doc-root

/build/development
/build/production

pushState Support

Nginx pushState server{} rules

# Need this for $locationProvider.html5Mode(true);
location / {
    try_files $uri /index.html;
}

Apache pushState .htaccess rules

    #Need this for $locationProvider.html5Mode(true);
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]

Here are more complete rules for both Nginx and Apache

Node Server

Build your package and point the node server to /build/<environment>

node web-server.js
http://127.0.0.1:8000/index.html

License

Copyright (c) 2013 Daniel Kanze (@gigablox) Licensed under the MIT License.