From dbb065a7ed6f33d37d20c767ee1ac04abee0898f Mon Sep 17 00:00:00 2001 From: Cory Bateman Date: Sun, 31 May 2015 02:14:55 -0500 Subject: [PATCH] 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 | 4 +- public/_includes/_version-dropdown.jade | 6 +-- public/_layout.jade | 2 +- public/docs/_includes/sidenav/_primary.jade | 4 +- public/docs/_layout.jade | 2 +- public/docs/ts/latest/api/index.jade | 18 ++++----- .../js/controllers/app-controller.js | 39 ++++++++++--------- public/resources/js/directives/code-tabs.js | 18 +++++---- 8 files changed, 48 insertions(+), 45 deletions(-) diff --git a/public/_includes/_main-nav.jade b/public/_includes/_main-nav.jade index 7925ad6d48..30de6af9bf 100644 --- a/public/_includes/_main-nav.jade +++ b/public/_includes/_main-nav.jade @@ -2,9 +2,9 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5") nav h1 Angular by Google - button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="toggleMainMenu($event)" md-button) Site Menu + button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu - ul(ng-class="showMainNav ? 'is-visible' : ''") + ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''") li.l-left Features li.l-left Docs li.l-left About diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade index 907f009656..68c1f77320 100644 --- a/public/_includes/_version-dropdown.jade +++ b/public/_includes/_version-dropdown.jade @@ -48,11 +48,11 @@ if language == 'dart' nav.hero-subtitle.text-subhead.dropdown - button(aria-label="Select a version of Angular" md-button class="dropdown-button" ng-click="toggleVersionMenu($event)") #{title} - div(class="overlay ng-hide" ng-click="toggleVersionMenu($event)" ng-show="showMenu") + button(aria-label="Select a version of Angular" md-button class="dropdown-button" ng-click="appCtrl.toggleVersionMenu($event)") #{title} + div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu") - 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") diff --git a/public/_layout.jade b/public/_layout.jade index cfa3adc596..f71562f243 100644 --- a/public/_layout.jade +++ b/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") diff --git a/public/docs/_includes/sidenav/_primary.jade b/public/docs/_includes/sidenav/_primary.jade index b5d613a203..f1411e25e8 100644 --- a/public/docs/_includes/sidenav/_primary.jade +++ b/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 + button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="appCtrl.toggleDocsMenu($event)" md-button) Docs // 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 diff --git a/public/docs/_layout.jade b/public/docs/_layout.jade index 5b1f09e395..83c2ad3584 100644 --- a/public/docs/_layout.jade +++ b/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") diff --git a/public/docs/ts/latest/api/index.jade b/public/docs/ts/latest/api/index.jade index dd52c5cf65..3f2c8885b8 100644 --- a/public/docs/ts/latest/api/index.jade +++ b/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.class(ng-class='{ active: apiType === "class" }' ng-click='setType("class")') Class - dd.interface(ng-class='{ active: apiType === "interface" }' ng-click='setType("interface")') Interface - dd.function(ng-class='{ active: apiType === "function" }' ng-click='setType("function")') Function - dd.const(ng-class='{ active: apiType === "const" }' ng-click='setType("const")') Const or Enum - dd.var(ng-class='{ active: apiType === "var" }' ng-click='setType("var")') Variable - input.api-filter(placeholder='Filter', ng-model='apiFilter') + dd.directive(ng-class='{ active: appCtrl.apiType === "directive" }' ng-click='appCtrl.setType("directive")') Directive + dd.class(ng-class='{ active: appCtrl.apiType === "class" }' ng-click='appCtrl.setType("class")') Class + dd.interface(ng-class='{ active: appCtrl.apiType === "interface" }' ng-click='appCtrl.setType("interface")') Interface + dd.function(ng-class='{ active: appCtrl.apiType === "function" }' ng-click='appCtrl.setType("function")') Function + dd.const(ng-class='{ active: appCtrl.apiType === "const" }' ng-click='appCtrl.setType("const")') Const or Enum + dd.var(ng-class='{ active: appCtrl.apiType === "var" }' ng-click='appCtrl.setType("var")') Variable + 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 }} diff --git a/public/resources/js/controllers/app-controller.js b/public/resources/js/controllers/app-controller.js index 96a8eea085..a67376ea0e 100644 --- a/public/resources/js/controllers/app-controller.js +++ b/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; - $scope.showMainNav = false; - $scope.showMenu = false; + vm.showDocsNav = false; + vm.showMainNav = false; + vm.showMenu = false; // TOGGLE MAIN NAV (TOP) ON MOBILE - $scope.toggleDocsMenu = function () { - $scope.showDocsNav = !$scope.showDocsNav; + vm.toggleDocsMenu = function () { + vm.showDocsNav = !vm.showDocsNav; }; // TOGGLE DOCS NAV - $scope.toggleMainMenu = function () { - $scope.showMainNav = !$scope.showMainNav; + vm.toggleMainMenu = function () { + vm.showMainNav = !vm.showMainNav; }; // TOGGLE DOCS VERSION & LANGUAGE - $scope.toggleVersionMenu = function () { - $scope.showMenu = !$scope.showMenu; + vm.toggleVersionMenu = function () { + vm.showMenu = !vm.showMenu; }; - $scope.setType = function (type) { - if (type === $scope.apiType) $scope.apiType = ''; - else $scope.apiType = type; + vm.setType = function (type) { + if (type === vm.apiType) vm.apiType = ''; + 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 = ''; - $scope.apiFilter = ''; + vm.apiType = ''; + vm.apiFilter = ''; - $scope.getSafeHtml = function(html) { + vm.getSafeHtml = function(html) { return $sce.trustAsHtml(html); }; diff --git a/public/resources/js/directives/code-tabs.js b/public/resources/js/directives/code-tabs.js index 316470b015..e547615e99 100644 --- a/public/resources/js/directives/code-tabs.js +++ b/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) { - $scope.panes = []; + vm.panes = []; /* @@ -22,11 +24,11 @@ angularIO.directive('codeTabs', function($timeout) { */ this.addPane = function(pane) { - if ($scope.panes.length === 0) { - $scope.showPane(pane); + if (vm.panes.length === 0) { + 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) { '
' + '
' + ' ' +