honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
Cory Bateman 2015-05-31 02:14:55 -05:00 committed by Peter Bacon Darwin
parent 40d528b9de
commit dbb065a7ed
8 changed files with 48 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/_includes/_main-nav.jade
View File

@ -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>

6
public/_includes/_version-dropdown.jade
View File

@ -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")

2
public/_layout.jade
View File

@ -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 -->

4
public/docs/_includes/sidenav/_primary.jade
View File

@ -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

2
public/docs/_layout.jade
View File

@ -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")

18
public/docs/ts/latest/api/index.jade
View File

@ -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 }}

39
public/resources/js/controllers/app-controller.js
View File

@ -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);
};

18
public/resources/js/directives/code-tabs.js
View File

@ -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>' +