ng-Bootstrap-Express

Overview

This is just my boilerplate amalgamation for creating responsive single page apps. It's a beautiful way to start things out right!

What's Inside?

• Server backend: express
• Base template: Twitter Bootstrap with LESS
• MVC / Horsepower: AngularJS
• Some common useful AngularJS directives, and a wrapper for Amplify.store for an easy client-side persistence layer.
• Library Support:
  • jQuery
  • Lodash
  • Amplify.store
• Feature detects: A stripped down version of Modernizr
• Angular App structure for CoffeeScript
• Task runner: Grunt For building coffeescript, concatenating project files, linting, and minifying, etc.

Installation

1. Make sure you have Node installed and in the command line go to the project directory: $ npm install
2. Run Grunt to get things compiled $ grunt
3. Start the server: $ npm start
4. Open a new CLI and start the Grunt watch task to automatically build and run tests when files change: $ grunt watch
5. Write awesome apps!

See the links to the tools above for documentation if you run into problems.

Built-ins

There are a few built-in directives and components as mentioned above. This will give a brief overview.

Stor - A wrapper for amplify.store

Stor is a very simple coffeescript class that wraps the amplify API. I chose it because I like using storage instances with the get/set.

Usage:

Setup an optional expiration

day = 8640000000
expiration = day * 10

Create an instance of Stor. No args are required, if you'd like to use a single instance to manage multiple keys.

myStorage = new Stor 'storageKey', expiration

Create some value...

myValue =
  "name": "David Foster Wallace"
  "occupation": "author"

Cache the value. This will use the instance key storageKey and expiration we set.

myStorage.set myValue

Get the value. Note: No need to pass params, since we're using instance variables.

myStorage.get()
# => {
#   "name": "David Foster Wallace",
#   "occupation": "author"
# }

However, we can specify them if we want to use a single instance for all storage:

myStorage.set 'newKey', {"newObj": "newObjValue"}, 860000000

# No params, still gets the instance default
myStorage.get()
# => {
#   "name": "David Foster Wallace",
#   "occupation": "author"
# }

# Or specify the key
myStorage.get 'newKey'
# => {
#   "newObj": "newObjValue'"
# }

Other methods:

# Remove an object from storage
myStorage.remove 'newKey'

# Empty storage completely
myStorage.empty()

Note: amplify will automatically stringify objects when using Stor.set and will parse them when using Stor.get

Directives

This project has a few simple directives that make AngularJS a bit friendlier.

ngFocus & ngBlur - Adds focus and blur events:

<input type="text" ng-model="blurTest" ng-blur="blurFn()">

$scope.blurFn = ->
  console.log $scope.blurTest

# Outputs value of input to console on blur

ngFadeShow - Works exactly as ngShow but uses jQuery's fade in/out instead. You could just as easily write an alias on this for ngFadeHide using negation, but I haven't added it:

Show the article by default

$scope.articleHidden = false

Hides the article on click

<article ng-fade-show="articleHidden" ng-click="articleHidden = !articleHidden">Hide Me</article>

Filters

startFrom - Slice models for easy pagination:

Sample Controller:

$scope.items = [
  {name: John}
  # more data items...
]
# Set default start page
$scope.currentPage = 0

# Set number of items per page
$scope.perPage = 6

# Create fn to calculate

Sample Markup:

<ul>
  <li ng-repeat="item in items" ng-filter="startFrom: currentPage | limitTo: perPage"></li>
</ul>
<footer class="pagination">
  <button class="btn" ng-click="prev()" ng-disabled="currentPage == 0">&laquo;</button>
  <span class="pages">{{currentPage}} of {{items.length - 1}}</span>
  <button class="btn" ng-click="next()" ng-disabled="currentPage == items.length - 1">&raquo;</button>
</footer>

Current Versions

• Bootstrap 2.3.1
• AngularJS 1.0.5
• jQuery 1.9.1
• Lodash 1.1.1
• Amplify.store 1.1.0
• Modernizr 2.6.2 w/ Respond 1.1.0