kentbong / angular-art-gallery Goto Github PK

View Code? Open in Web Editor NEW

Art Gallery application using dynamic API data built with AngularJS

ApacheConf 0.41% JavaScript 95.58% CSS 0.12% HTML 3.89%

angular-art-gallery's Introduction

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 [email protected]: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