refact(app): use recommended controller as syntax
				
					
				
			Updated site controllers and directives to use controller as syntax Closes #84 Closes #135
This commit is contained in:
		
							parent
							
								
									40d528b9de
								
							
						
					
					
						commit
						dbb065a7ed
					
				| @ -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> | ||||
|  | ||||
| @ -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> | ||||
|   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}  <span class="icon icon-arrow-drop-down"></span> | ||||
|   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") | ||||
|  | ||||
| @ -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 --> | ||||
|  | ||||
| @ -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 | ||||
| 
 | ||||
|  | ||||
| @ -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") | ||||
|  | ||||
| @ -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 }} | ||||
|  | ||||
| @ -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); | ||||
|   }; | ||||
| 
 | ||||
|  | ||||
| @ -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) { | ||||
|       '<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>' + | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user