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

Update bio card directive, code cleanup

This commit is contained in:
Alex Wolfe 2015-05-05 09:56:18 -07:00
parent 0d27464c7a
commit a85af9e15e
4 changed files with 122 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/about/index.jade
View File

@ -19,7 +19,7 @@
<!-- BIO CARDS -->
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")

196
public/docs/js/latest/guide/displaying-data.jade
View File

@ -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.
&lt;display&gt;&lt;/display&gt;
code-example(language="html" escape="html").
<display></display>
p
| The <code>&lt;display&gt;</code> 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, <code>show-properties.js</code>, 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:
'&lt;p&gt;My name: {{ myName }}&lt;/p&gt;',
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:
<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';
code-pane(language="javascript" name="TypeScript" format="linenums" escape="html").
// TypeScript
import {Component, View, bootstrap, For} from 'angular2/angular2';
@Component({
selector: 'display'
})
@View({
template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt
`,
directives: [For]
})
class DisplayComponent {
myName: string;
todos: Array&lt;string&gt;;
@Component({
selector: 'display'
})
@View({
template: `&lt;p&gt;My name: {{ myName }}&lt;/p&gt;`,
directives: [For]
})
class DisplayComponent {
myName: string;
todos: Array&lt;string&gt;
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.
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
code-example(language="html" escape="html").
<p>My name: {{ myName }}</p>
p.
Angular will automatically pull the value of <code>myName</code> 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 <code>template:</code> to specify an inline view, for larger templates you'd
want to move them to a separate file and load them with <code>templateUrl:</code> instead.
header Note
p.
While you've used <code>template:</code> to specify an inline view, for larger templates you'd
want to move them to a separate file and load them with <code>templateUrl:</code> instead.
p So you can see Angular dynamically update content, add a line after
pre.prettyprint.lang-html
code.
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
code-example(language="html" escape="html").
<p>My name: {{ myName }}</p>
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 <code>for</code> 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:
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
&#39;&lt;ul&gt;&#39; +
&#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
&#39;{{ name }}&#39; +
&#39;&lt;/li&gt;&#39; +
&#39;&lt;/ul&gt;&#39;,
pre.prettyprint.lang-typescript(data-name="typescript")
code.
//Typescript
template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;Friends:&lt;/p&gt;
&lt;ul&gt;
&lt;li *for=&quot;#name of names&quot;&gt;
{{ name }}
&lt;/li&gt;
&lt;/ul&gt;
`,
code-tabs
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
template:
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
&#39;&lt;ul&gt;&#39; +
&#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
&#39;{{ name }}&#39; +
&#39;&lt;/li&gt;&#39; +
&#39;&lt;/ul&gt;&#39;,
code-pane(language="javascript" name="TypeScript" format="linenums").
//Typescript
template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;Friends:&lt;/p&gt;
&lt;ul&gt;
&lt;li *for=&quot;#name of names&quot;&gt;
{{ name }}
&lt;/li&gt;
&lt;/ul&gt;
`,
p.
To make this work, you'll also need to add the <code>angular.For</code> 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

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

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

45
public/resources/js/directives/bio.js
View File

@ -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' ? '<a class="button button-subtle button-small" href="https://twitter.com/' + element.attr('data-twitter') + '" md-button>Twitter</a>' : '';
scope.$website = scope.website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + element.attr('data-website') + '" md-button>Website</a>' : '';
// 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:
'<md-dialog class="modal" aria-label="List dialog">' +
' <md-content>' +
' <img class="left" src="' + scope.pic + '" />' +
' <h3 class="text-headline">' + scope.name + '</h3>' +
' <div class="modal-social">' + scope.$twitter + scope.$website + '</div>' +
' <p class="text-body">' + scope.bio + '</p>' +
' <img class="left" src="{{pic}}" />' +
' <h3 class="text-headline">{{name}}</h3>' +
' <div class="modal-social">' +
' <a ng-show="twitter" class="button button-subtle button-small" href="https://twitter.com/{{twitter}}" md-button>Twitter</a>' +
' <a ng-show="website" class="button button-subtle button-small" href="{{website}}" md-button>Website</a>' +
' </div>' +
' <p class="text-body">{{bio}}</p>' +
' </md-content>' +
' <div class="md-actions">' +
' <md-button ng-click="closeDialog()">' +
' Close Bio' +
' </md-button>' +
' </div>' +
'</md-dialog>',
locals: {
items: scope.items
},
controller: DialogController
'</md-dialog>'
});
});
function DialogController(scope, $mdDialog, items) {
scope.items = items;
scope.closeDialog = function() {
$mdDialog.hide();
};
}
}
};
});