refact(app): use recommended controller as syntax

Updated site controllers and directives to use controller as syntax

Closes #84
Closes #135

public/_includes/_main-nav.jade

@@ -2,9 +2,9 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5")
   nav
     h1 <a href="/" md-button>Angular <sup>by Google</sup></a>
 
-    button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="toggleMainMenu($event)" md-button) Site Menu <span class="icon icon-arrow-drop-down"></span>
+    button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu <span class="icon icon-arrow-drop-down"></span>
 
-    ul(ng-class="showMainNav ? 'is-visible' : ''")
+    ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''")
       li.l-left <a class="main-nav-button" href="/features.html" md-button>Features</a>
       li.l-left <a class="main-nav-button" href="/docs/ts/latest/" md-button>Docs</a>
       li.l-left <a class="main-nav-button" href="/about/" md-button>About</a>

public/_includes/_version-dropdown.jade

@@ -48,11 +48,11 @@ if language == 'dart'
 
 <!-- DROPDOWN BUTTON -->
 nav.hero-subtitle.text-subhead.dropdown
-  button(aria-label="Select a version of Angular" md-button class="dropdown-button" ng-click="toggleVersionMenu($event)") #{title}  <span class="icon icon-arrow-drop-down"></span>
+  button(aria-label="Select a version of Angular" md-button class="dropdown-button" ng-click="appCtrl.toggleVersionMenu($event)") #{title}  <span class="icon icon-arrow-drop-down"></span>
-  div(class="overlay ng-hide" ng-click="toggleVersionMenu($event)" ng-show="showMenu")
+  div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu")
 
   <!-- DROPDOWN MENU -->
-  div(class="dropdown-menu" ng-class="showMenu ? 'is-visible' : ''")
+  div(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''")
     mixin tree(public.docs.ts, "/docs/ts", "Angular 2 for TypeScript")
     mixin tree(public.docs.js, "/docs/js", "Angular 2 for JavaScript")
     mixin tree(public.docs.dart, "/docs/dart", "Angular 2 for Dart")

public/_layout.jade

@@ -3,7 +3,7 @@ html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Frame
   head
     != partial("/_includes/_head-include")
 
-  body(class="l-offset-nav"  ng-controller="AppCtrl")
+  body(class="l-offset-nav"  ng-controller="AppCtrl as appCtrl")
     != partial("/_includes/_main-nav")
 
     <!-- HERO LOGO -->

public/docs/_includes/sidenav/_primary.jade

@@ -5,11 +5,11 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
     form.st-input-inner
       label(for="search-io" class="is-hidden") Search Docs
       input(type="search" id="search-io" placeholder="SEARCH DOCS...")
-    button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>
+    button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="appCtrl.toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>
 
 
   // PRIMARY NAVIGATION
-  ul(class="side-nav-primary" ng-class="showDocsNav ? 'is-visible' : ''")
+  ul(class="side-nav-primary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
     if current.path[2]
       for page, slug in public.docs[current.path[1]][current.path[2]]._data
 

public/docs/_layout.jade

@@ -3,7 +3,7 @@ html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Frame
   head
     != partial("../_includes/_head-include")
 
-  body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl")
+  body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl as appCtrl")
     != partial("../_includes/_main-nav")
     != partial("_includes/sidenav/_primary")
     != partial("../_includes/_hero")

public/docs/ts/latest/api/index.jade

@@ -1,18 +1,18 @@
 div(ng-cloak).banner
   dl.api-key
     dt Display:
-    dd.directive(ng-class='{ active: apiType === "directive" }' ng-click='setType("directive")') Directive
+    dd.directive(ng-class='{ active: appCtrl.apiType === "directive" }' ng-click='appCtrl.setType("directive")') Directive
-    dd.class(ng-class='{ active: apiType === "class" }' ng-click='setType("class")') Class
+    dd.class(ng-class='{ active: appCtrl.apiType === "class" }' ng-click='appCtrl.setType("class")') Class
-    dd.interface(ng-class='{ active: apiType === "interface" }' ng-click='setType("interface")') Interface
+    dd.interface(ng-class='{ active: appCtrl.apiType === "interface" }' ng-click='appCtrl.setType("interface")') Interface
-    dd.function(ng-class='{ active: apiType === "function" }' ng-click='setType("function")') Function
+    dd.function(ng-class='{ active: appCtrl.apiType === "function" }' ng-click='appCtrl.setType("function")') Function
-    dd.const(ng-class='{ active: apiType === "const" }' ng-click='setType("const")') Const or Enum
+    dd.const(ng-class='{ active: appCtrl.apiType === "const" }' ng-click='appCtrl.setType("const")') Const or Enum
-    dd.var(ng-class='{ active: apiType === "var" }' ng-click='setType("var")') Variable
+    dd.var(ng-class='{ active: appCtrl.apiType === "var" }' ng-click='appCtrl.setType("var")') Variable
-  input.api-filter(placeholder='Filter', ng-model='apiFilter')
+  input.api-filter(placeholder='Filter', ng-model='appCtrl.apiFilter')
 article(class="l-content-small grid-fluid docs-content")
-  div(ng-repeat='section in apiSections' ng-if="(apiList[section.name] | filter: { title: apiFilter, docType: apiType }).length" ng-cloak)
+  div(ng-repeat='section in appCtrl.apiSections' ng-if="(appCtrl.apiList[section.name] | filter: { title: appCtrl.apiFilter, docType: appCtrl.apiType }).length" ng-cloak)
     h3 {{ section.title }}
     ul.api-list
-      li.api-item(ng-repeat='item in apiList[section.name] | filter: { title: apiFilter, docType: apiType }')
+      li.api-item(ng-repeat='item in appCtrl.apiList[section.name] | filter: { title: appCtrl.apiFilter, docType: appCtrl.apiType }')
         a(ng-href='{{ item.path }}')
           span(class='symbol {{ item.docType }}')
           | {{ item.title }}

public/resources/js/controllers/app-controller.js

@@ -24,51 +24,52 @@ angularIO.directive('bold', function ($timeout) {
   }
 });
 
-angularIO.controller('AppCtrl', [ '$scope', '$mdDialog', '$timeout', '$http', '$sce', function ($scope, $mdDialog, $timeout, $http, $sce) {
+angularIO.controller('AppCtrl', ['$mdDialog', '$timeout', '$http', '$sce', function ($mdDialog, $timeout, $http, $sce) {
+  var vm = this;
 
   $http.get('/resources/js/app-data.json').then(function(response) {
-    $scope.apiList = response.data;
+    vm.apiList = response.data;
   });
 
   $http.get('/resources/js/cheatsheet.json').then(function(response) {
-    $scope.cheatsheet = response.data;
+    vm.cheatsheet = response.data;
   });
 
-  $scope.showDocsNav = false;
+  vm.showDocsNav = false;
-  $scope.showMainNav = false;
+  vm.showMainNav = false;
-  $scope.showMenu    = false;
+  vm.showMenu    = false;
 
   // TOGGLE MAIN NAV (TOP) ON MOBILE
-  $scope.toggleDocsMenu = function () {
+  vm.toggleDocsMenu = function () {
-    $scope.showDocsNav = !$scope.showDocsNav;
+    vm.showDocsNav = !vm.showDocsNav;
   };
 
   // TOGGLE DOCS NAV
-  $scope.toggleMainMenu = function () {
+  vm.toggleMainMenu = function () {
-    $scope.showMainNav = !$scope.showMainNav;
+    vm.showMainNav = !vm.showMainNav;
   };
 
   // TOGGLE DOCS VERSION & LANGUAGE
-  $scope.toggleVersionMenu = function () {
+  vm.toggleVersionMenu = function () {
-    $scope.showMenu = !$scope.showMenu;
+    vm.showMenu = !vm.showMenu;
   };
 
-  $scope.setType = function (type) {
+  vm.setType = function (type) {
-    if (type === $scope.apiType) $scope.apiType = '';
+    if (type === vm.apiType) vm.apiType = '';
-    else $scope.apiType = type;
+    else vm.apiType = type;
   };
 
-  $scope.apiSections = [
+  vm.apiSections = [
     { name: 'angular2/core', title: 'Core' },
     { name: 'angular2/http', title: 'HTTP' },
     { name: 'angular2/lifecycle_hooks', title: 'Lifecycle Hooks' },
     { name: 'angular2/router', title: 'Router' },
     { name: 'angular2/test', title: 'Test' }
   ];
-  $scope.apiType     = '';
+  vm.apiType     = '';
-  $scope.apiFilter   = '';
+  vm.apiFilter   = '';
 
-  $scope.getSafeHtml = function(html) {
+  vm.getSafeHtml = function(html) {
     return $sce.trustAsHtml(html);
   };
 

public/resources/js/directives/code-tabs.js

@@ -11,9 +11,11 @@ angularIO.directive('codeTabs', function($timeout) {
     scope: {},
     transclude: true,
     replace: true,
+    controllerAs: 'vm',
+    controller: function () {
+      var vm = this;
 
-    controller: function ($scope) {
+      vm.panes = [];
-      $scope.panes = [];
 
 
       /*
@@ -22,11 +24,11 @@ angularIO.directive('codeTabs', function($timeout) {
       */
 
       this.addPane = function(pane) {
-        if ($scope.panes.length === 0) {
+        if (vm.panes.length === 0) {
-          $scope.showPane(pane);
+          vm.showPane(pane);
         }
 
-        $scope.panes.push(pane);
+        vm.panes.push(pane);
       };
 
 
@@ -35,9 +37,9 @@ angularIO.directive('codeTabs', function($timeout) {
       *
       */
 
-      $scope.showPane = function(pane) {
+      vm.showPane = function(pane) {
         // RESET ALL EXAMPLES
-        angular.forEach($scope.panes, function(pane) {
+        angular.forEach(vm.panes, function(pane) {
           pane.selected = false;
         });
 
@@ -50,7 +52,7 @@ angularIO.directive('codeTabs', function($timeout) {
       '<div class="code-box">' +
       ' <header class="code-box-header">' +
       '   <nav class="code-box-nav">' +
-      '    <button ng-repeat="pane in panes" ng-click="showPane(pane)" class="button" ng-class="{selected:pane.selected}">' +
+      '    <button ng-repeat="pane in vm.panes" ng-click="vm.showPane(pane)" class="button" ng-class="{selected:pane.selected}">' +
       '      {{pane.name}}' +
       '    </button>' +
       '   </nav>' +