From a85af9e15e4e70d9fc73812e2f833064ab71e3e4 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Tue, 5 May 2015 09:56:18 -0700 Subject: [PATCH] Update bio card directive, code cleanup --- public/about/index.jade | 2 +- .../docs/js/latest/guide/displaying-data.jade | 196 +++++++++--------- .../js/controllers/app-controller.js | 9 +- public/resources/js/directives/bio.js | 45 ++-- 4 files changed, 122 insertions(+), 130 deletions(-) diff --git a/public/about/index.jade b/public/about/index.jade index 35a4c015ac..a32b23b5ae 100644 --- a/public/about/index.jade +++ b/public/about/index.jade @@ -19,7 +19,7 @@ for person, name in bios .c3 - md-card(biocard class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}" data-name="#{person.name}") + md-card(biocard class="bio-card" website="#{person.website}" twitter="#{person.twitter}" pic="#{person.picture}" bio="#{person.bio}" name="#{person.name}") header image(src="#{person.picture}" alt="#person.name") diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index f5f96ad765..fb0f702764 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -19,9 +19,10 @@ h2#section-create-an-entry-point Create an entry point p Open your favorite editor and create a show-properties.html file with the content: - pre.prettyprint.linenums.lang-html - code. - <display></display> + + code-example(language="html" escape="html"). + + p | The <display> component here acts as the site where you'll insert your application. | We'll assume a structure like this for the rest of the examples here and just focus on the parts that @@ -35,52 +36,48 @@ p To see this working, create another file, show-properties.js, and add the following: - .code-box - pre.prettyprint.linenums.lang-javascript(data-name="es5") - code. - // ES5 - function DisplayComponent() { - this.myName = "Alice"; - } - DisplayComponent.annotations = [ - new angular.Component({ - selector: "display" - }), - new angular.View({ - template: - '<p>My name: {{ myName }}</p>', - directives: [angular.For, angular.If] - }) - ]; + code-tabs + code-pane(language="javascript" name="ES5" format="linenums" escape="html"). + // ES5 + function DisplayComponent() { + this.myName = "Alice"; + } + DisplayComponent.annotations = [ + new angular.Component({ + selector: "display" + }), + new angular.View({ + template: +

My name: {{ myName }}

, + directives: [angular.For, angular.If] + }) + ]; - pre.prettyprint.linenums.lang-typescript(data-name="typescript") - code. - // TypeScript - import {Component, View, bootstrap, For} from 'angular2/angular2'; + code-pane(language="javascript" name="TypeScript" format="linenums" escape="html"). + // TypeScript + import {Component, View, bootstrap, For} from 'angular2/angular2'; - @Component({ - selector: 'display' - }) - @View({ - template: ` - <p>My name: {{ myName }}</p> - `, - directives: [For] - }) - class DisplayComponent { - myName: string; - todos: Array<string>; + @Component({ + selector: 'display' + }) + @View({ + template: `<p>My name: {{ myName }}</p>`, + directives: [For] + }) + class DisplayComponent { + myName: string; + todos: Array<string> - constructor() { - this.myName = "Alice"; - } - } + constructor() { + this.myName = "Alice"; + } + } p. You've just defined a component that encompases a view and controller for the app. The view defines a template: - pre.prettyprint.lang-html - code. - <p>My name: {{ myName }}</p> + + code-example(language="html" escape="html"). +

My name: {{ myName }}

p. Angular will automatically pull the value of myName and insert it into the browser and @@ -98,16 +95,16 @@ just one property, myName. .callout.is-helpful - header Note - p. - While you've used template: to specify an inline view, for larger templates you'd - want to move them to a separate file and load them with templateUrl: instead. + header Note + p. + While you've used template: to specify an inline view, for larger templates you'd + want to move them to a separate file and load them with templateUrl: instead. p So you can see Angular dynamically update content, add a line after - pre.prettyprint.lang-html - code. - <p>My name: {{ myName }}</p> + code-example(language="html" escape="html"). +

My name: {{ myName }}

+ p to this: pre.prettyprint.lang-html code. @@ -120,67 +117,66 @@ code. setInterval(function () { this.time = (new Date()).toString(); }.bind(this), 1000); p Reload the page in your browser and you'll now see the seconds updating automatically. + .l-main-section h2#Create-an-array Create an array property and use For on the view p Moving up from a single property, create an array to display as a list. - .code-box - pre.prettyprint.lang-javascript(data-name="es5") - code. - //ES5 - function DisplayComponent() { - this.myName = "Alice"; - this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; - } - pre.prettyprint.lang-typescript(data-name="typescript") - code. - //Typescript - constructor() { - this.myName = "Alice"; - this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; - } + + code-tabs + code-pane(language="javascript" name="ES5" format="linenums" escape="html"). + //ES5 + function DisplayComponent() { + this.myName = "Alice"; + this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } + code-pane(language="javascript" name="TypeScript" format="linenums" escape="html"). + //Typescript + constructor() { + this.myName = "Alice"; + this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } + p. You can then use this array in your template with the for directive to create copies of DOM elements with one for each item in the array. - .code-box - pre.prettyprint.lang-javascript(data-name="es5") - code. - //ES5 - template: - '<p>My name: {{ myName }}</p>' + - '<p>Friends:</p>' + - '<ul>' + - '<li *for="#name of names">' + - '{{ name }}' + - '</li>' + - '</ul>', - pre.prettyprint.lang-typescript(data-name="typescript") - code. - //Typescript - template: ` - <p>My name: {{ myName }}</p> - <p>Friends:</p> - <ul> - <li *for="#name of names"> - {{ name }} - </li> - </ul> - `, + code-tabs + code-pane(language="javascript" name="ES5" format="linenums"). + //ES5 + template: + '<p>My name: {{ myName }}</p>' + + '<p>Friends:</p>' + + '<ul>' + + '<li *for="#name of names">' + + '{{ name }}' + + '</li>' + + '</ul>', + code-pane(language="javascript" name="TypeScript" format="linenums"). + //Typescript + template: ` + <p>My name: {{ myName }}</p> + <p>Friends:</p> + <ul> + <li *for="#name of names"> + {{ name }} + </li> + </ul> + `, + p. To make this work, you'll also need to add the angular.For directive used by the template so that Angular knows to include it: - .code-box - pre.prettyprint.lang-javascript(data-name="es5") - code. - //ES5 - directives: [angular.For] - pre.prettyprint.lang-typescript(data-name="typescript") - code. - //Typescript - import {Component, View, bootstrap, For} from - ... - directives: [For] + code-tabs + code-pane(language="javascript" name="ES5" format="linenums"). + //ES5 + directives: [angular.For] + code-pane(language="javascript" name="TypeScript" format="linenums"). + //Typescript + import {Component, View, bootstrap, For} from + ... + directives: [For] + p Reload and you've got your list of friends! p. Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your diff --git a/public/resources/js/controllers/app-controller.js b/public/resources/js/controllers/app-controller.js index 484f9a4716..1a94ffb121 100644 --- a/public/resources/js/controllers/app-controller.js +++ b/public/resources/js/controllers/app-controller.js @@ -9,20 +9,17 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', '$timeout', function($sc $scope.showMenu = false; // TOGGLE MAIN NAV (TOP) ON MOBILE - $scope.toggleDocsMenu = function(event) { - event.preventDefault(); + $scope.toggleDocsMenu = function() { $scope.showDocsNav = !$scope.showDocsNav; }; // TOGGLE DOCS NAV - $scope.toggleMainMenu = function(event) { - event.preventDefault(); + $scope.toggleMainMenu = function() { $scope.showMainNav = !$scope.showMainNav; }; // TOGGLE DOCS VERSION & LANGUAGE - $scope.toggleVersionMenu = function(event) { - event.preventDefault(); + $scope.toggleVersionMenu = function() { $scope.showMenu = !$scope.showMenu; }; diff --git a/public/resources/js/directives/bio.js b/public/resources/js/directives/bio.js index 5ab54a1d2a..28f5daef19 100644 --- a/public/resources/js/directives/bio.js +++ b/public/resources/js/directives/bio.js @@ -3,45 +3,44 @@ angularIO.directive('biocard', function($rootScope, $timeout, $mdDialog) { restrict: 'A', scope: {}, link: function (scope, element, attrs) { - scope.name = element.attr('data-name'); - scope.bio = element.attr('data-bio'); - scope.pic = element.attr('data-pic'); - scope.twitter = element.attr('data-twitter'); - scope.website = element.attr('data-website'); - scope.$twitter = scope.twitter !== 'undefined' ? 'Twitter' : ''; - scope.$website = scope.website !== 'undefined' ? 'Website' : ''; + // SET SCOPE VALUES + scope.name = attrs.name; + scope.pic = attrs.pic; + scope.bio = attrs.bio; + scope.twitter = attrs.twitter; + scope.website = attrs.website; + // CLOSE MODAL METHOD + scope.closeDialog = function() { + $mdDialog.hide(); + }; + + // OPEN BIO WHEN CLICKING ON CARD element.on('click', function($event) { $mdDialog.show({ parent: angular.element(document.body), targetEvent: $event, + scope: scope, // use parent scope in template + preserveScope: true, template: '' + ' ' + - ' ' + - '

' + scope.name + '

' + - ' ' + - '

' + scope.bio + '

' + + ' ' + + '

{{name}}

' + + ' ' + + '

{{bio}}

' + ' ' + '
' + ' ' + ' Close Bio' + ' ' + '
' + - '', - locals: { - items: scope.items - }, - controller: DialogController + '' }); }); - - function DialogController(scope, $mdDialog, items) { - scope.items = items; - scope.closeDialog = function() { - $mdDialog.hide(); - }; - } } }; }); \ No newline at end of file