Address issue #7

README.md

@@ -2,6 +2,7 @@
 
 ## Table of Contents
 1. [High-level Goals](#high-level-goals)
+2. [GoCardless Tooling](#gocardless-tooling)
 2. [Directory and File Structure](#directory-and-file-structure)
 3. [Parts of Angular](#parts-of-angular)
 4. [General Patterns and Anti-patterns](#general-patterns-and-anti-patterns)
@@ -16,6 +17,44 @@ The principles we use to guide low-level decision making are:
 4. Think forward – ES6 and Web Components (Angular 2.0).
 5. Know [when to deviate](http://legacy.python.org/dev/peps/pep-0008/#a-foolish-consistency-is-the-hobgoblin-of-little-minds) from the style guide.
 
+## GoCardless Tooling
+
+We use multiple front-end tools alongside AngularJS. Here is a list of them and how they affect the style guide:
+
+1. [SystemJS](https://github.com/systemjs/systemjs)
+  - _Effect_: ES6 module system is used. For example:
+  ```javascript
+   import {DialogControllerModule} from './dialog.controller'; 
+   import template from './dialog.template.html!text';
+  ```
+2. [Traceur](https://github.com/google/traceur-compiler)
+  - _Effect_: No visible impact. Traceur is required to run SystemJS.
+3. [lodash](https://github.com/lodash/lodash)
+  - _Effect_: `_.extend` replaces `angular.extend`. For example:
+  ```javascript
+  // using lodash we extend our ctrl object like this
+  _.extend(ctrl, {
+    foo: foo,
+    bar: bar
+  });
+  // but using Angular’s built in extend method we’d write
+  angular.extend(ctrl, {
+    foo: foo,
+    bar: bar
+  });
+  ```
+4. [ui-router](https://github.com/angular-ui/ui-router/wiki)
+  - _Effect_: `$stateProvider` replaces `$routeProvider`. For example:
+  ```javascript
+    $stateProvider.state(
+      …
+    );
+    // instead of
+    $routeProvider.when(
+      …
+    )
+  ```
+
 ## Directory and File Structure
 
 We organise our code as follows:
@@ -97,7 +136,7 @@ Rules for using each of the core parts of AngularJS (routes, directives, control
 
 #### Use resolvers to inject data.
 
-_Why_: The page is rendered only when all data is available, which means you don't get any views being rendered without data.
+_Why_: The page is rendered only when all data is available, which means you don’t get any views being rendered without data.
 
 ```js
 // Recommended
@@ -815,10 +854,10 @@ _Why_: You should `$scope.$apply()` as close to the asynchronous event binding a
 
 We referred to lots of resources during the creation of this styleguide, including:
 
-- [Todd Motto's styleguide](https://github.com/toddmotto/angularjs-styleguide)
-- [John Papa's styleguide](https://github.com/johnpapa/angularjs-styleguide)
-- [Minko Gechev's styleguide](https://github.com/mgechev/angularjs-style-guide)
+- [Todd Motto’s styleguide](https://github.com/toddmotto/angularjs-styleguide)
+- [John Papa’s styleguide](https://github.com/johnpapa/angularjs-styleguide)
+- [Minko Gechev’s styleguide](https://github.com/mgechev/angularjs-style-guide)
 - [Google AngularJS and Closure styleguide](http://google-styleguide.googlecode.com/svn/trunk/angularjs-google-style.html)
 - [The Angular.js GitHub wiki](https://github.com/angular/angular.js/wiki)
-- [Digging into Angular's "Controller as" syntax, by Todd Motto](http://toddmotto.com/digging-into-angulars-controller-as-syntax/)
+- [Digging into Angular’s “Controller as” syntax, by Todd Motto](http://toddmotto.com/digging-into-angulars-controller-as-syntax/)
 - [Python PEP 8 Styleguide](http://legacy.python.org/dev/peps/pep-0008/)