#2 First pass at basic functions page.

This still needs some work, and we'll probably want to add more gotcha type info or explanations about the various use cases.

app/_app-module.js

@@ -5,5 +5,6 @@ angular.module('jslab', [
   'jslab.templates',
   'jslab.components',
   'jslab.home',
-  'jslab.objects'
+  'jslab.objects',
+  'jslab.functions'
 ]);

app/functions/_functions-module.js

@@ -0,0 +1,3 @@
+'use strict';
+
+angular.module('jslab.functions', []);

app/functions/content.html

@@ -0,0 +1,107 @@
+<h1>Functions</h1>
+
+<p>
+	Understanding JavaScript functions, and the many ways they can be used, is one of the best ways to get your JS skills 
+	to the next level.
+</p>
+
+<p>
+	There are a few different ways that you can define functions. We'll start with the simplest to understand, the regular
+	function declaration:
+</p>
+
+<pre class="code-example">
+function add(x) {
+  return 4 + x;
+}
+</pre>
+
+<p>
+	We can call "add" elsewhere in our script with a single argument:
+</p>
+
+<pre>
+	add(3);
+</pre>
+
+<p>
+	This form of method declaration is usually best used in situations where you want to break up a larger function's
+	internals into separate private functions that won't be reused again:
+<p>
+
+<pre class="code-example">
+function doALotOfThings() {
+  doA();
+  doB();
+
+  function doA() {
+    // code for doing 'A'
+  }
+
+  function doB() {
+    // code for doing 'B'
+  }
+
+}
+</pre>
+
+<p class="bg-warning" style="padding: 1rem;">
+	<span class="fa fa-exclamation-circle"></span>&nbsp;
+	Defining functions like this at the top level of a file or script block (i.e. not in an object or within another 
+	function) will put the function under the global scope, which we generally want to avoid.
+</p>
+
+<p>
+	The second way of declaring a function is on an object. This type of function is typically called a "method":
+<p>
+
+<pre class="code-example">
+var math = {
+  add: function(x) {
+    return 4 + x;
+  }
+};
+</pre>
+
+<p>
+	You'll find yourself declaring functions in this fashion often, since you'll either want to call a method on an
+	object or namespace functions so that they don't sit direction under the global namespace. To call the method above,
+	we execute it like so:
+</p>
+
+<pre>
+	math.add(3);
+</pre>
+
+<p>
+	The third way of declaring functions involves creating contructor functions. These functions allow us to create
+	and initialize JavaScript objects:
+</p>
+
+<pre class="code-example">
+function Animal(name, type) {
+  this.name = name;
+  this.type = type;
+
+  this.sayHi = function() {
+    return "Hi, I'm " + this.name + " the " + this.type;
+  }
+}
+</pre>
+
+<p>
+	Using this function, we can create Animal objects and use their methods to act on them. Constructors are special in 
+	that you have to call it using the <code>new</code> keyword:
+</p>
+
+<pre class="code-example">
+var dumbo = new Animal("dumbo", "elephant");
+dumbo.sayHi();
+</pre>
+
+<p class="bg-warning" style="padding: 1rem;">
+	<span class="fa fa-exclamation-circle"></span>&nbsp;
+	Forgetting the <code>new</code> keyword can result in creating an object where the <code>this</code> is bound to the
+	global scope <code>window</code> instead of a new object's scope. Make sure to always use <code>new</code>!
+</p> 
+

app/functions/repl.html

@@ -0,0 +1,28 @@
+<jslab-editor code='code'
+  ng-init='code=
+"function add(x) {
+  return 4 + x;
+}
+
+add(3);
+
+var math = {
+  add: function(x) {
+    return 4 + x;
+  }
+};
+
+math.add(3);
+
+function Animal(name, type) {
+  this.name = name;
+  this.type = type;
+
+  this.sayHi = function() {
+    return \"Hi, I am \" + this.name + \" the \" + this.type;
+  }
+}
+var dumbo = new Animal(\"dumbo\", \"elephant\");
+dumbo.sayHi();"
+'>
+</jslab-editor>

app/index.html

@@ -23,6 +23,7 @@
     <a class="navmenu-brand" ui-sref="home" title="Home">JS Lab</a>
     <ul class="nav navmenu-nav">
       <li><a ui-sref="objects" title="Objects">Objects</a></li>
+      <li><a ui-sref="functions" title="Functions">Functions</a></li>
     </ul>
   </div>
   <div class="canvas">

app/router/_router-module.js

@@ -18,5 +18,12 @@ angular.module('jslab.router', ['ui.router'])
         'content': { templateUrl: 'objects/content.html' },
         'repl': { templateUrl: 'objects/repl.html' }
       }
+    })
+    .state('functions', {
+      url: '/functions',
+      views: {
+        'content': { templateUrl: 'functions/content.html' },
+        'repl': { templateUrl: 'functions/repl.html' }
+      }
     });
 }]);

app/router/router-module-test.js

@@ -16,5 +16,6 @@ describe('Router', function() {
   it('should respond to URLs', function() {
     expect($state.href('home')).toEqual('#/');
     expect($state.href('objects')).toEqual('#/objects');
+    expect($state.href('functions')).toEqual('#/functions');
   });
 });

bower.json

@@ -23,7 +23,8 @@
     "bootstrap": "~3.3.4",
     "modernizer": "~2.8.2",
     "jasny-bootstrap": "~3.1.3",
-    "angular-ui-ace": "bower"
+    "angular-ui-ace": "bower",
+    "components-font-awesome": "~4.3"
   },
   "devDependencies": {
     "angular-mocks": "~1.3.15"

style/app.scss

@@ -21,3 +21,7 @@ pre {
   white-space: initial;
   padding-left: 2em;
 }
+
+.code-example {
+	white-space: pre-wrap;
+}

tasks/style.js

@@ -5,15 +5,18 @@ var paths = gulp.paths;
 var plugins = gulp.plugins;
 
 function packageCssDependencies(min) {
-  gulp.src('bower_components/bootstrap/dist/fonts/**/*.*')
+  gulp.src(['bower_components/bootstrap/dist/fonts/**/*.*', 
+      'bower_components/components-font-awesome/fonts/**/*.*'])
     .pipe(gulp.dest(paths.dist + '/fonts'));
   gulp.src([
     (min) ? 'bower_components/bootstrap/dist/css/bootstrap.min.css' :
       'bower_components/bootstrap/dist/css/bootstrap.css',
     (min) ? 'bower_components/bootstrap/dist/css/bootstrap-theme.min.css' :
       'bower_components/bootstrap/dist/css/bootstrap-theme.css',
     (min) ? 'bower_components/jasny-bootstrap/dist/css/jasny-bootstrap.min.css' :
-      'bower_components/jasny-bootstrap/dist/css/jasny-bootstrap.css'
+      'bower_components/jasny-bootstrap/dist/css/jasny-bootstrap.css',
+    (min) ? 'bower_components/components-font-awesome/css/font-awesome-min.css' :
+      'bower_components/components-font-awesome/css/font-awesome.css'
   ])
   .pipe(plugins.sourcemaps.init())
   .pipe(plugins.concat('vendor.css'))