ccarterc/lineman-angular-template

A Lineman Application Template using AngularJS

A Lineman JS Template using Angular

This is a project template for Angular JS applications using Lineman.

It includes the following features:

1. Template Precompilation into Angulars $templateCache using grunt-angular-templates
2. A basic login, logout service bound to sample routes inside config/server.js
3. A router, and 2 views home and login
4. A directive that shows a message on mouseover
5. 2 Controllers, for home and login, with $scope variables set and bound
6. A working, bound login form (username/password don't matter, but are required)
7. Configured grunt-ngmin so you don't have to fully qualify angular dependencies.
8. Auto generated sourcemaps with inlined sources via grunt-concat-sourcemap (you'll need to enable sourcemaps in Firefox/Chrome to see this)
9. Unit Tests and End-to-End Tests
10. Configuration to run Protractor for End-to-End Tests

Instructions

1. git clone https://github.com/linemanjs/lineman-angular-template.git my-lineman-app
2. cd my-lineman-app
3. sudo npm install -g lineman
4. npm install
5. lineman run
6. open your web browser to localhost:8000

Running Tests

This template was used as the basis of @davemo's Testing Strategies for Angular JS screencast, and contains all the tests we wrote in the screencast and a few more!

To run the unit tests:

1. lineman run from 1 terminal window
2. lineman spec from another terminal window, this will launch Testem and execute specs in Chrome

To run the end-to-end tests:

On Mac

1. npm install protractor
2. brew install selenium-server-standalone
3. Make sure you have chrome installed.
4. lineman run from 1 terminal window
5. lineman grunt spec-e2e from another terminal window

On Windows

1. npm install protractor
2. npm install -g selenium-standalone
3. Make sure you have chrome and the latest Java Development Kit (JDK) installed
4. lineman run from 1 terminal window
5. Edit config/spec-e2e.js to comment out the seleniumServerJar key and uncomment the seleniumAddress key; this will tell protractor to hit the already running selenium server from the next command
6. start-selenium from another terminal window
7. lineman grunt spec-e2e from another terminal window

Troubleshooting:

If you see this error: Warning: there's no selenium server jar at the specified location,
you may need to change the selenium-server-standalone jar version in config/spec-e2e.js
to the actual you see in /usr/local/opt/selenium-server-standalone (brew users may have a libexec directory).

If you see this error: Fatal error: The path to the driver executable must be set by the
webdriver.chrome.driver system property, you may need to download the chromedriver
(https://code.google.com/p/selenium/wiki/ChromeDriver) and place it in /usr/local/bin (mac).

For Windows, for selnium to work properly you will need to have the JDK bin folder available in your system path. 
The default 32 bit JDK install path will look like: "C:\Program Files (x86)\Java\jdk1.8.0_05\bin".

Defining your apps angular.module in CoffeeScript

If you are using Coffeescript to define the angular.module for your app, you will need to swap the concat order in config/application.js such that coffeescript files are included before javascript. (If you are using JavaScript for defining the angular.module the default concat order is fine).

Add the following concat_sourcemap block to config/application.js if you want to define your app module in coffeescript:

module.exports = function(lineman) {
  return {

    concat_sourcemap: {
      js: {
        src: [
          "<%= files.js.vendor %>",
          "<%= files.coffee.generated %>",
          "<%= files.js.app %>",
          "<%= files.ngtemplates.dest %>"
        ]
      }
    }

  };
};

Hopefully this helps you get up and running with AngularJS!