Production ready, but use with caution. When stuck, ask Pieter.

Trying out Yeoman to do our project setup in a breeze with some simple questions and conditional downloading.

Installation

One command to rule them all: $ npm install -g yo generator-mrhenry.

Let's get ready to rumble.

Documentation

Main generator

$ yo mrhenry

Runs a basic, one time setup of the front-end approach on top of your existing back-end files. You'll have to answer a few questions to get you started.

Note - when asked if you want to override certain files, answer yes

Note - verify that everything is working correctly by trying to run $ gulp watch

Included

Running this setup gives you a basic view for ApplicationPage (living in /pages/application/application) as an example, the base class for all resources, basic setup & configuration and the following NPM modules:

• mr-haraway for easy assets.sh image embedding (with size optimizing & retina support, woop!)
• mr-nav-state for all your .is-active CSS goodness
• fd-html-content for robust HTML rendering (still to be ported to NPM)

Other just-add-water NPM modules maintained by us include:

• mr-timeago for when 20 minutes ago works better than an UNIX timestamp

Subgenerators (Angular.js)

This is where the cool becomes awesome. Using subgenerators we can generate all neccessary views & files in a breeze.

ng-page

yo mrhenry:ng-page name [--resource resource] [--path path]

Creates an @Page instance. This name should be a Lalala page type for it to work out of the box.

Options

• --path - specify a path where the page folder should be created.
• --resource - create an overview & detail state for a certain resource. More on resources below.

Examples

Basic usage

Let's say you want to have a custom view for your Lalala HomePage.

$ yo mrhenry:ng-page home

Add import './pages/home/home'; to your application.js, build & you're good to start styling!

Resource overview

You have a page of type NewsPage and you want that to be an overview of Post model instances. Post will be a resource (see below) in the front-end app.

$ yo mrhenry:ng-page news --resource post

Import ./pages/news/news, build, et voila. With routes etc!

It is very easy to render the childs inside an overlay. Check with Pieter until the README is updated.

ng-resource

yo mrhenry:ng-resource name [--endpoint endpoint] [--controller]

A resource is an easy way to handle custom models in the back-end if we stick to some basic conventions concerning HTTP endpoints.

A resource has certain methods that return promises with the JSON response. Benefits are:

1. In-memory caching: two same calls won't be made twice in one browsing session. Instead, the promise will resolve instantly.
2. Consistent formatting: all responses will go through the resources format() method, so you can rest assured all properties will be available, making undefined is not a function a thing of the past.

Options

• --endpoint - override default pluralization of resource name; to avoid sheeps and keep with sheep ;)
• --controller - generate a Rails controller with index and show methods

Examples

As in the above page overview example, let's create a Post resource.

$ yo mrhenry:ng-resource post

You now have a Post service that you can @Inject everywhere. Possible calls:

Post.all.then(posts => { doSomething(posts); });
Post.find(2).then(post => { renderDetail(post); });

ng-component

$ yo mrhenry:ng-component name [--template]

Just a quick way to create a directive because hell yeah, we're lazy.

Options

• --template - Use this flag if you want your directive to have an HTML template

ng-service

$ yo mrhenry:ng-service name

As above, a quick way to create a service because, …, still lazy.