diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 9365e4ab8a..028cd2a275 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -1,33 +1,34 @@ .statement h4 Live Examples p. - If you want to skip to the working examples you can check out these links on Plunker. TypeScript Example or TypeScript Example or ES5 Example. .l-main-section h2#section-displaying-controller-properties Displaying controller properties + p. - Let's walk through how we'd display a property, a list of properties, and then conditionally show content - based on state. - p. - We'll end up with a UI that looks like this: - div(align='center') - img(src='displaying-data-example1.png') + Let's walk through how we'd display a property, a list of properties, and then conditionally show content + based on state. We'll end up with a UI that looks like this: + + figure.image-display + img(src='displaying-data-example1.png') .l-main-section 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. - //ES5 - <display></display> + .code-box + pre.prettyprint.linenums.lang-html(data-name="es5") + code. + //ES5 + <display></display> - pre.prettyprint.linenums.lang-html - code. - //TypeScript - <display></display> + pre.prettyprint.linenums.lang-html(data-name="typescript") + code. + //TypeScript + <display></display> p | The <display> component here acts as the site where you'll insert your application. @@ -42,45 +43,46 @@ p To see this working, create another file, show-properties.js, and add the following: - pre.prettyprint.linenums.lang-javascript - 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] - }) - ]; - - pre.prettyprint.linenums.lang-typescript - code. - // 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>; - - constructor() { - this.myName = "Alice"; - } + .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] + }) + ]; + + pre.prettyprint.linenums.lang-typescript(data-name="typescript") + code. + // 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>; + + 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: @@ -129,61 +131,64 @@ .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. - pre.prettyprint.lang-javascript - code. - //ES5 - function DisplayComponent() { - this.myName = "Alice"; - this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; - } - pre.prettyprint.lang-typescript - code. - //Typescript - constructor() { - this.myName = "Alice"; - this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; - } + .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"]; + } 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. - pre.prettyprint.lang-javascript - code. - //ES5 - template: - '<p>My name: {{ myName }}</p>' + - '<p>Friends:</p>' + - '<ul>' + - '<li *for="#name of names">' + - '{{ name }}' + - '</li>' + - '</ul>', + .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 - code. - //Typescript - 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> + `, 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: - pre.prettyprint.lang-javascript - code. - //ES5 - directives: [angular.For] - pre.prettyprint.lang-typescript - code. - //Typescript - import {Component, View, bootstrap, For} from - ... - directives: [For] + .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] 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 @@ -241,36 +246,38 @@ p. The dependency injection syntax here is using the low-level API and is...well...not very nice. We're working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon. - pre.prettyprint.lang-javascript - code. - //ES5 - function FriendsService() { - this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; - } - function DisplayComponent(friends) { - this.myName = "Alice"; - this.names = friends.names; - } - DisplayComponent.annotations = [ - new angular.Component({ - selector: "display", - injectables: [FriendsService] - }), - new angular.View({ - template: '{{ myName }} <ul> <li *for="#name of names"<{{ name }}>/li< >/ul<', - directives: [angular.For, angular.If] - }) - ]; - DisplayComponent.parameters = [[FriendsService]]; - document.addEventListener("DOMContentLoaded", function() { - angular.bootstrap(DisplayComponent); - }); - pre.prettyprint.lang-typescript - code. - //TypeScript - import {Component, View, bootstrap, For} from - ... - directives: [For] + + .code-box + pre.prettyprint.lang-javascript(data-name="es5") + code. + //ES5 + function FriendsService() { + this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } + function DisplayComponent(friends) { + this.myName = "Alice"; + this.names = friends.names; + } + DisplayComponent.annotations = [ + new angular.Component({ + selector: "display", + injectables: [FriendsService] + }), + new angular.View({ + template: '{{ myName }} <ul> <li *for="#name of names"<{{ name }}>/li< >/ul<', + directives: [angular.For, angular.If] + }) + ]; + DisplayComponent.parameters = [[FriendsService]]; + document.addEventListener("DOMContentLoaded", function() { + angular.bootstrap(DisplayComponent); + }); + pre.prettyprint.lang-typescript(data-name="typescript") + code. + //TypeScript + import {Component, View, bootstrap, For} from + ... + directives: [For] .l-main-section h2#Conditionally-displaying-data-with-If Conditionally displaying data with If p. @@ -281,69 +288,71 @@ code. <p *if="names.length > 3">You have many friends!</p> p You'll also need to add the If directive so Angular knows to include it. - - pre.prettyprint.lang-javascript - code. - //ES5 - directives: [angular.For, angular.If] - pre.prettyprint.lang-typescript - code. - //Typescript - import {Component, View, bootstrap, For, If} from - ... - directives: [For, If] + + .code-box + pre.prettyprint.lang-javascript(data-name="es5") + code. + //ES5 + directives: [angular.For, angular.If] + pre.prettyprint.lang-typescript(data-name="typescript") + code. + //Typescript + import {Component, View, bootstrap, For, If} from + ... + directives: [For, If] p. As there are currently 5 items it the list, you'll see the message congratulating you on your many friends. Remove two items from the list, reload your browser, and see that the message no longer displays. - pre.prettyprint.lang-javascript - code. - //ES5 - function DisplayComponent() { - this.myName = "Alice"; - this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; - } - DisplayComponent.annotations = [ - new angular.Component({ - selector: "display" - }), - new angular.View({ - template: - '<p>My name: {{ myName }}</p>' + - '<p>Friends:</p>' + - '<ul>' + - '<li *for="#name of names">' + - '{{ name }}' + - '</li>' + - '</ul>' + - '<p *if="names.length > 3">You have many friends!</p>', - directives: [angular.For, angular.If] - }) - ]; - pre.prettyprint.lang-typescript - code. - //TypeScript - import {Component, View, bootstrap, For, If} from 'angular2/angular2'; - @Component({ - selector: 'display' - }) - @View({ - template: ` - <p>My name: {{ myName }}</p> - <p>Friends:</p> - <ul> - <li *for="#name of names"> - {{ name }} - </li> - </ul> - <p *if="names.length > 3">You have many friends!</p> - `, - directives: [For, If] - }) - class DisplayComponent { - myName: string; - todos: Array; - constructor() { + .code-box + pre.prettyprint.lang-javascript(data-name="es5") + code. + //ES5 + function DisplayComponent() { this.myName = "Alice"; this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; } - } + DisplayComponent.annotations = [ + new angular.Component({ + selector: "display" + }), + new angular.View({ + template: + '<p>My name: {{ myName }}</p>' + + '<p>Friends:</p>' + + '<ul>' + + '<li *for="#name of names">' + + '{{ name }}' + + '</li>' + + '</ul>' + + '<p *if="names.length > 3">You have many friends!</p>', + directives: [angular.For, angular.If] + }) + ]; + pre.prettyprint.lang-typescript(data-name="typescript") + code. + //TypeScript + import {Component, View, bootstrap, For, If} from 'angular2/angular2'; + @Component({ + selector: 'display' + }) + @View({ + template: ` + <p>My name: {{ myName }}</p> + <p>Friends:</p> + <ul> + <li *for="#name of names"> + {{ name }} + </li> + </ul> + <p *if="names.length > 3">You have many friends!</p> + `, + directives: [For, If] + }) + class DisplayComponent { + myName: string; + todos: Array; + constructor() { + this.myName = "Alice"; + this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; + } + } diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss index 5b11417a1a..611c4bc8a9 100644 --- a/public/resources/css/main.scss +++ b/public/resources/css/main.scss @@ -33,6 +33,7 @@ @import 'module/overlay'; @import 'module/alert'; @import 'module/callout'; +@import 'module/images'; @import 'module/card'; @import 'module/hover-card'; @import 'module/modal'; diff --git a/public/resources/css/module/_code-box.scss b/public/resources/css/module/_code-box.scss index 4cccc96279..f27fc93ea5 100644 --- a/public/resources/css/module/_code-box.scss +++ b/public/resources/css/module/_code-box.scss @@ -3,7 +3,7 @@ background: $steel; box-shadow: 0px 2px 5px rgba($coal, .3); display: none; - margin-bottom: $unit * 3; + margin-bottom: $unit * 2; header { background: darken($steel, 5%); diff --git a/public/resources/css/module/_images.scss b/public/resources/css/module/_images.scss new file mode 100644 index 0000000000..e91fb6f740 --- /dev/null +++ b/public/resources/css/module/_images.scss @@ -0,0 +1,13 @@ +.image-display { + border-radius: 4px; + background: $mist; + padding: $unit * 2; + display: inline-block; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + margin: 0px 0px ($unit * 2) 0px; + + img { + border-radius: 4px; + display: inline-block; + } +} \ No newline at end of file