Merge pull request #124 from angular/code-cleanup

Code cleanup
This commit is contained in:
Alex Wolfe 2015-05-19 09:26:27 -07:00
commit 6ef6448449
27 changed files with 1356 additions and 1228 deletions

View File

@ -18,5 +18,3 @@ for page, slug in data
// SET CURRENT PAGE FLAG WHEN YOU PASS IT // SET CURRENT PAGE FLAG WHEN YOU PASS IT
if current.path[4] == slug if current.path[4] == slug
currentPage = true currentPage = true

View File

@ -2,19 +2,25 @@
script(src="/resources/js/vendor/prettify.js") script(src="/resources/js/vendor/prettify.js")
script(src="/resources/js/vendor/lang-basic.js") script(src="/resources/js/vendor/lang-basic.js")
script(src="/resources/js/vendor/lang-dart.js") script(src="/resources/js/vendor/lang-dart.js")
script(src="/resources/js/vendor/jquery.js") script(src="/resources/js/vendor/lodash.js")
<!-- Angular Material Dependencies --> <!-- Angular Material Dependencies -->
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js") script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-touch.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js") script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js") script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js")
script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js") script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js")
<!-- Angular.io Site JS -->
script(src="/resources/js/site.js") script(src="/resources/js/site.js")
script(src="/resources/js/controllers/app-controller.js")
script(src="/resources/js/directives/bio.js")
script(src="/resources/js/directives/code-tabs.js")
script(src="/resources/js/directives/code-pane.js")
script(src="/resources/js/directives/code-example.js")
<!-- GA --> <!-- GA -->
script. script.

View File

@ -19,7 +19,7 @@
<!-- BIO CARDS --> <!-- BIO CARDS -->
for person, name in bios for person, name in bios
.c3 .c3
md-card(class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}" data-name="#{person.name}" ng-click="showBio($event)") md-card(biocard class="bio-card" website="#{person.website}" twitter="#{person.twitter}" pic="#{person.picture}" bio="#{person.bio}" name="#{person.name}")
header header
image(src="#{person.picture}" alt="#person.name") image(src="#{person.picture}" alt="#person.name")

View File

@ -3,26 +3,42 @@
h2 Code Examples h2 Code Examples
p Below are some examples of how you can add/customize code examples in a page. p Below are some examples of how you can add/customize code examples in a page.
strong.l-space-top-3.l-space-bottom-1 ATTRIBUTES:
ul
li <strong>name</strong> Name displayed in Tab (required for tabs)
li <strong>language</strong> javascript, html, etc.
li <strong>escape</strong> html (escapes html, woot!)
li <strong>format</strong> linenums (or linenums:4 specify starting line)
.showcase-content .showcase-content
.l-sub-section
h3 Inline Code Examples
p.
Inline code example <code ng-non-bindable>{{username}}</code>
code-example(format="linenums" language="html" escape="html").
Inline code example <code ng-non-bindable>{{username}}</code>
p.
Notice the <strong>ng-non-bindable</strong> attribute. This is only
needed when using code examples inline <strong>code-tabs and code-example directives
automatically do this</strong>.
.l-sub-section .l-sub-section
h3 Adding a code example h3 Adding a code example
pre.prettyprint.linenums code-example(format="linenums" language="html").
code. code-example(format="linenums" language="javascript").
pre.prettyprint.linenums //SOME CODE
code.
//SOME CODE
var name = "Alex Wolfe";
alert(name);
.l-sub-section .l-sub-section
h3 Specify starting line number h3 Specify starting line number
pre(class="prettyprint linenums:4") code-example(language="javascript" format="linenums:4").
code. code-example(language="html" format="linenums:4").
pre.prettyprint.linenums:4 var title = "This starts on line four";
var title = "This starts on line four";
.l-sub-section .l-sub-section
h3 Specify a language h3 Specify a language
@ -34,11 +50,9 @@
chosen based on language hints. Add a class that matches chosen based on language hints. Add a class that matches
your desired language (example below uses <strong>.lang-html</strong>) your desired language (example below uses <strong>.lang-html</strong>)
pre(class="prettyprint lang-html") code-example(language="html" format="linenums").
code. h1 Title
pre.prettyprint.lang-html p This is some copy...
h1 Title
p This is some copy...
.l-sub-section .l-sub-section
h3 Code Highlighting h3 Code Highlighting
@ -48,16 +62,39 @@
<strong>Black</strong>. You can see examples below and <strong>Black</strong>. You can see examples below and
the class names needed for each type. the class names needed for each type.
pre.prettyprint.linenums code-example(format="linenums").
code. // Pink Background Version
// Pink Background Version // class="pnk"
// class="pnk" var elephants = "The <span class='pnk'>pink</span> elephants were marching...";
var elephants = "The <span class="pnk">pink</span> elephants were marching...";
// Black Background Version // Black Background Version
// class="blk" // class="blk"
var night = "The night was pitch <span class="blk">black</span>."; var night = "The night was pitch <span class='blk'>black</span>.";
// Outlined Version // Outlined Version
// class="otl" // class="otl"
var match = "The <span class="otl">bird</span> ate <span class="otl">bird</span> seed near the <span class="otl">bird</span> bath "; var match = "The <span class='otl'>bird</span> ate <span class='otl'>bird</span> seed near the <span class='otl'>bird</span> bath ";
.l-sub-section
h3 Code Tabs
p.
Code Tabs are a great way to show different languages and versions
of a particular piece of code. When using these tabs make sure the
<stron>content is always related</strong>.
code-tabs
code-pane(language="javascript" format="linenums" name="ES5").
// ES5
var hello = 'blah';
code-pane(language="javascript" format="linenums" name="TypeScript").
// TypeScript
var hello = 'blah';
p To create code tabs simply use the directives below
code-example(format="linenums").
code-tabs
code-pane(format="linenums" name="Tab 1").
// TAB 1 CONTENT
code-pane(format="linenums" name="Tab 2").
// TAB 2 CONTENT

View File

@ -10,20 +10,17 @@
h2 Main Section Title h2 Main Section Title
p Main section content... p Main section content...
pre.prettyprint.linenums.lang-html code-example(language="html" format="linenums").
code. .l-main-section
.l-main-section h2 Section Title
h2 Section Title p section content...
p section content...
.l-sub-section .l-sub-section
h3 Sub Section Title h3 Sub Section Title
p. p.
sub section content... This content is related to the main section sub section content... This content is related to the main section
content and <strong>falls within</strong> the main section. content and <strong>falls within</strong> the main section.
pre.prettyprint.linenums.lang-html code-example(language="html" format="linenums").
code. .l-sub-section
.l-sub-section h3 Sub Section Title
h3 Sub Section Title p sub section content...
p sub section content...

View File

@ -9,8 +9,17 @@ html(lang="en" ng-app="angularIOApp")
!= partial("../_includes/_hero") != partial("../_includes/_hero")
!= partial("../_includes/_banner") != partial("../_includes/_banner")
article.l-content-small.grid-fluid.docs-content
!= yield if current.path[3] == 'api'
article(class="l-content-small grid-fluid docs-content" ng-non-bindable)
!= yield
else
article(class="l-content-small grid-fluid docs-content")
!= yield
if current.path[3] == 'guide' && current.path[4]
!= partial("../_includes/_next-item")
!= partial("../_includes/_footer") != partial("../_includes/_footer")
!= partial("../_includes/_scripts-include") != partial("../_includes/_scripts-include")

View File

@ -1,17 +0,0 @@
doctype
html(lang="en" ng-app="angularIOApp")
head
!= partial("../../../../_includes/_head-include")
body(class="l-offset-nav l-offset-side-nav" ng-controller="AppCtrl")
!= partial("../../../../_includes/_main-nav")
!= partial("../../../_includes/sidenav/_primary")
!= partial("../../../../_includes/_hero")
!= partial("../../../../_includes/_banner")
article.l-content-small.grid-fluid.docs-content(ng-non-bindable)
!= yield
!= partial("../../../../_includes/_next-item")
!= partial("../../../../_includes/_footer")
!= partial("../../../../_includes/_scripts-include")

View File

@ -16,48 +16,44 @@
a <code>web/index.html</code> file, and a <code>web/index.html</code> file, and
a <code>pubspec.yaml</code> file: a <code>pubspec.yaml</code> file:
.code-box code-tabs
pre.prettyprint.lang-dart(data-name="dart") code-pane(language="dart" name="main.dart" format="linenums").
code. // web/main.dart
// web/main.dart library displaying_data;
library displaying_data;
import 'package:angular2/angular2.dart'; import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector; import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
part 'show_properties.dart'; part 'show_properties.dart';
main() { main() {
reflector.reflectionCapabilities = new ReflectionCapabilities(); reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent); bootstrap(DisplayComponent);
} }
pre.prettyprint.lang-html(data-name="html") code-pane(language="html" name="index.html" format="linenums").
code. &lt;!-- web/index.html --&gt;
&lt;!-- web/index.html --&gt; &lt;!DOCTYPE html&gt;
&lt;!DOCTYPE html&gt; &lt;html&gt;
&lt;html&gt; &lt;head&gt;
&lt;head&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;/head&gt;
&lt;/head&gt; &lt;body&gt;
&lt;body&gt;
&lt;display&gt;&lt;/display&gt; &lt;display&gt;&lt;/display&gt;
&lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
pre.prettyprint.lang-yaml(data-name="yaml")
code.
# pubspec.yaml
name: displaying_data
description: Dart version of Angular 2 example, Displaying Data
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.22
browser: any
&lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
code-pane(language="yaml" name="pubspec.yaml" format="linenums").
# pubspec.yaml
name: displaying_data
description: Dart version of Angular 2 example, Displaying Data
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.22
browser: any
p. p.
All of this code should look familiar from the previous page, All of this code should look familiar from the previous page,
except for the <code>library</code> and <code>part</code> statements except for the <code>library</code> and <code>part</code> statements
@ -78,30 +74,28 @@
named <code>show_properties.dart</code>, named <code>show_properties.dart</code>,
and add the following: and add the following:
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. // web/show_properties.dart
// web/show_properties.dart part of displaying_data;
part of displaying_data;
@Component( @Component(
selector: 'display' selector: 'display'
) )
@View( @View(
template: ''' template: '''
&lt;p>My name: {{ myName }}&lt/p> &lt;p>My name: {{ myName }}&lt/p>
''' '''
) )
class DisplayComponent { class DisplayComponent {
String myName = 'Alice'; String myName = 'Alice';
} }
p. p.
You've just defined a component that encompasses a view and controller for the app. The view You've just defined a component that encompasses a view and controller for the app. The view
defines a template: defines a template:
pre.prettyprint.lang-html code-example(language="html").
code. &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
p. p.
Angular will automatically pull the value of <code>myName</code> and Angular will automatically pull the value of <code>myName</code> and
@ -134,17 +128,15 @@
Add a second line to the template, Add a second line to the template,
so you can see Angular dynamically update content: so you can see Angular dynamically update content:
pre.prettyprint.lang-html code-example(language="html").
code. &lt;p&gt;Current time: {{ time }}&lt;/p&gt;
&lt;p&gt;Current time: {{ time }}&lt;/p&gt;
p. p.
Then give the <code>DisplayComponent</code> a starting value for time and Then give the <code>DisplayComponent</code> a starting value for time and
a call to update time a call to update time
via <code>setInterval</code>: via <code>setInterval</code>:
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code.
class DisplayComponent { class DisplayComponent {
String myName = 'Alice'; String myName = 'Alice';
String time; String time;
@ -166,44 +158,41 @@
h2#Create-an-array Display an iterable using *for h2#Create-an-array Display an iterable using *for
p Moving up from a single value, create a property that's a list of values. p Moving up from a single value, create a property that's a list of values.
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. class DisplayComponent {
class DisplayComponent { String myName = 'Alice';
String myName = 'Alice'; List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; }
}
p. p.
You can then use this list in your template with the <code>for</code> directive to create copies of DOM elements You can then use this list in your template with the <code>for</code> directive to create copies of DOM elements
with one for each item in the list. with one for each item in the list.
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. @View(
@View( template: '''
template: ''' &lt;p>My name: {{ myName }}&lt;/p>
&lt;p>My name: {{ myName }}&lt;/p> &lt;p>Friends:&lt;/p>
&lt;p>Friends:&lt;/p> &lt;ul>
&lt;ul> &lt;li *for="#name of friendNames">
&lt;li *for="#name of friendNames"> {{ name }}
{{ name }} &lt;/li>
&lt;/li> &lt;/ul>
&lt;/ul> '''
''' )
)
p. p.
To make this work, you'll also need to add the Angular <code>For</code> directive used by To make this work, you'll also need to add the Angular <code>For</code> directive used by
the template to <code>show_properties.dart</code>, so that Angular knows to include it. the template to <code>show_properties.dart</code>, so that Angular knows to include it.
Add <code>For</code> using the optional <code>directives</code> parameter, Add <code>For</code> using the optional <code>directives</code> parameter,
which contains a list of directives: which contains a list of directives:
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. @View(
@View( template: '''
template: ''' // ...HTML...
// ...HTML... ''',
''', directives: const[For]
directives: const[For] )
)
p Reload and you've got your list of friends! p Reload and you've got your list of friends!
p. p.
@ -213,11 +202,10 @@
p Let's look at the few lines that do the work again: p Let's look at the few lines that do the work again:
pre.prettyprint.lang-html code-example(language="html" format="linenums").
code. &lt;li *for=&quot;#name of friendNames&quot;&gt;
&lt;li *for=&quot;#name of friendNames&quot;&gt; {{ name }}
{{ name }} &lt;/li&gt;
&lt;/li&gt;
p The way to read this is: p The way to read this is:
ul ul
@ -241,14 +229,13 @@
Make a <code>FriendsService</code> class to implement a model containing a list of friends. We'll put this in a new Make a <code>FriendsService</code> class to implement a model containing a list of friends. We'll put this in a new
<code>friends_service.dart</code> under <code>web/</code>. Here's what the class looks like: <code>friends_service.dart</code> under <code>web/</code>. Here's what the class looks like:
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. // web/friends_service.dart
// web/friends_service.dart part of displaying_data;
part of displaying_data;
class FriendsService { class FriendsService {
List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
} }
.callout.is-helpful .callout.is-helpful
header Note header Note
@ -260,29 +247,27 @@
First add a FriendsService parameter to the constructor. First add a FriendsService parameter to the constructor.
Then set <code>friendNames</code> to the names provided by the service. Then set <code>friendNames</code> to the names provided by the service.
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. // In web/show_properties.dart
// In web/show_properties.dart class DisplayComponent {
class DisplayComponent { String myName = 'Alice';
String myName = 'Alice'; List<String> friendNames;
List<String> friendNames;
DisplayComponent(FriendsService friendsService) { DisplayComponent(FriendsService friendsService) {
friendNames = friendsService.names; friendNames = friendsService.names;
}
} }
}
p. p.
Next, make FriendsService available to dependency injection Next, make FriendsService available to dependency injection
by adding an <code>injectables</code> parameter to DisplayComponent's by adding an <code>injectables</code> parameter to DisplayComponent's
<code>@Component</code> annotation: <code>@Component</code> annotation:
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. @Component(
@Component( selector: 'display',
selector: 'display', injectables: const[FriendsService]
injectables: const[FriendsService] )
)
.l-main-section .l-main-section
h2#Conditionally-displaying-data-with-If Conditionally display data using *if h2#Conditionally-displaying-data-with-If Conditionally display data using *if
@ -292,17 +277,15 @@
p See it in action by adding a paragraph at the end of your template: p See it in action by adding a paragraph at the end of your template:
pre.prettyprint.lang-html code-example(language="html").
code. &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
p. p.
Also add <code>If</code> to the list of directives, Also add <code>If</code> to the list of directives,
so Angular knows to include it: so Angular knows to include it:
pre.prettyprint.lang-dart code-example(language="dart").
code. directives: const[For, If]
directives: const[For, If]
p. p.
The list current has 5 items, so if you run the app you'll see the message The list current has 5 items, so if you run the app you'll see the message
congratulating you on your many friends. congratulating you on your many friends.
@ -313,131 +296,124 @@
p Here's the final code. p Here's the final code.
.code-box code-tabs
pre.prettyprint.lang-dart(data-name="show_properties.dart") code-pane(language="dart" name="show_properties.dart" format="linenums").
code. // web/show_properties.dart
// web/show_properties.dart part of displaying_data;
part of displaying_data;
@Component( @Component(
selector: 'display', selector: 'display',
injectables: const[FriendsService] injectables: const[FriendsService]
) )
@View( @View(
template: ''' template: '''
&lt;p>My name: {{ myName }}&lt;/p> &lt;p>My name: {{ myName }}&lt;/p>
&lt;p>Friends:&lt;/p> &lt;p>Friends:&lt;/p>
&lt;ul> &lt;ul>
&lt;li *for="#name of friendNames"> &lt;li *for="#name of friendNames">
{{ name }} {{ name }}
&lt;/li> &lt;/li>
&lt;/ul> &lt;/ul>
''', ''',
directives: const[For] directives: const[For]
) )
class DisplayComponent { class DisplayComponent {
String myName = 'Alice'; String myName = 'Alice';
List&lt;String> friendNames; List&lt;String> friendNames;
DisplayComponent(FriendsService friendsService) { DisplayComponent(FriendsService friendsService) {
friendNames = friendsService.names; friendNames = friendsService.names;
}
} }
pre.prettyprint.lang-dart(data-name="friends_service.dart") }
code. code-pane(language="dart" name="friends_service.dart" format="linenums").
// web/friends_service.dart // web/friends_service.dart
part of displaying_data; part of displaying_data;
class FriendsService { class FriendsService {
List&lt;String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; List&lt;String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
} }
pre.prettyprint.lang-dart(data-name="main.dart") code-pane(language="dart" name="main.dart" format="linenums").
code. // web/main.dart
// web/main.dart library displaying_data;
library displaying_data;
import 'dart:async'; import 'dart:async';
import 'package:angular2/angular2.dart'; import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector; import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
part 'show_properties.dart'; part 'show_properties.dart';
part 'friends_service.dart'; part 'friends_service.dart';
main() { main() {
reflector.reflectionCapabilities = new ReflectionCapabilities(); reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent); bootstrap(DisplayComponent);
} }
pre.prettyprint.lang-html(data-name="html") code-pane(language="html" name="index.html" format="linenums").
code. &lt;!-- web/index.html --&gt;
&lt;!-- web/index.html --&gt; &lt;!DOCTYPE html&gt;
&lt;!DOCTYPE html&gt; &lt;html&gt;
&lt;html&gt; &lt;head&gt;
&lt;head&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;/head&gt;
&lt;/head&gt; &lt;body&gt;
&lt;body&gt;
&lt;display&gt;&lt;/display&gt; &lt;display&gt;&lt;/display&gt;
&lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt; &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt; &lt;/html&gt;
pre.prettyprint.lang-yaml(data-name="yaml") code-pane(language="yaml" name="pubspec.yaml" format="linenums").
code. # pubspec.yaml
# pubspec.yaml name: displaying_data
name: displaying_data description: Dart version of Angular 2 example, Displaying Data
description: Dart version of Angular 2 example, Displaying Data version: 0.0.1
version: 0.0.1 dependencies:
dependencies: angular2: 2.0.0-alpha.22
angular2: 2.0.0-alpha.22 browser: any
browser: any
.l-main-section .l-main-section
h2#section-explanations Explanations h2#section-explanations Explanations
.l-sub-section .l-sub-section
h3 Using multiple Dart files in an Angular app h3 Using multiple Dart files in an Angular app
p. p.
Dart offers a few ways to implement an app in multiple files. Dart offers a few ways to implement an app in multiple files.
In this guide, all the code for each example is in a single library; In this guide, all the code for each example is in a single library;
each Dart file under <code>web</code> is part of that library. each Dart file under <code>web</code> is part of that library.
p. p.
To let the code in <code>main.dart</code> To let the code in <code>main.dart</code>
use the code in <code>show_properties.dart</code>, use the code in <code>show_properties.dart</code>,
declare a library in <code>main.dart</code>. declare a library in <code>main.dart</code>.
Then make <code>show_properties.dart</code> part of that library. Then make <code>show_properties.dart</code> part of that library.
.code-box code-tabs
pre.prettyprint.lang-dart(data-name="main library file") code-pane(language="dart" name="main.dart" format="linenums").
code. // web/main.dart
// web/main.dart library displaying_data;
library displaying_data; // imports...
// imports... part 'show_properties.dart';
part 'show_properties.dart'; // Code goes here...
// Code goes here... code-pane(language="dart" name="show_properties.dar" format="linenums").
pre.prettyprint.lang-dart(data-name="additional library file") // web/show_properties.dart
code. part of displaying_data;
// web/show_properties.dart // Code goes here...
part of displaying_data;
// Code goes here...
p. p.
Another way to split Dart code is to Another way to split Dart code is to
define multiple libraries in a single package. define multiple libraries in a single package.
The additional libraries go under a <code>lib</code> directory The additional libraries go under a <code>lib</code> directory
parallel to <code>web</code>. parallel to <code>web</code>.
<!-- PENDING: show or point to an example --> <!-- PENDING: show or point to an example -->
p. p.
Yet another approach, often used when some of the code is highly reusable, Yet another approach, often used when some of the code is highly reusable,
is to split the code into libraries in two or more packages. is to split the code into libraries in two or more packages.
p. p.
For more information on implementing Dart libraries, see For more information on implementing Dart libraries, see
<a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html#libraries-and-visibility">Libraries and visibility</a> <a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html#libraries-and-visibility">Libraries and visibility</a>
in the in the
<a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html">Dart language tour</a>. <a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html">Dart language tour</a>.

View File

@ -10,41 +10,39 @@
you can create a parent you can create a parent
component that uses a <code>&lt;child&gt;</code> component like so: component that uses a <code>&lt;child&gt;</code> component like so:
pre.prettyprint.linenums.lang-dart code-example(language="dart" format="linenums").
code. part of making_components;
part of making_components;
@Component( @Component(
selector: 'parent' selector: 'parent'
) )
@View( @View(
template: ''' template: '''
&lt;h1&gt;{{ message }}&lt;/h1&gt; &lt;h1&gt;{{ message }}&lt;/h1&gt;
<span class="pnk">&lt;child&gt;&lt;/child&gt;</span> <span class="pnk">&lt;child&gt;&lt;/child&gt;</span>
''', ''',
directives: const[<span class="pnk">ChildComponent</span>] directives: const[<span class="pnk">ChildComponent</span>]
) )
class ParentComponent { class ParentComponent {
String message = "I'm the parent"; String message = "I'm the parent";
} }
p You then just need to write the <code>ChildComponent</code> class to make it work: p You then just need to write the <code>ChildComponent</code> class to make it work:
pre.prettyprint.linenums.lang-dart code-example(language="dart" format="linenums").
code. part of making_components;
part of making_components;
@Component( @Component(
selector: 'child' selector: 'child'
) )
@View( @View(
template: ''' template: '''
&lt;p&gt; {{ message }} &lt;/p&gt; &lt;p&gt; {{ message }} &lt;/p&gt;
''' '''
) )
class ChildComponent { class ChildComponent {
String message = "I'm the child"; String message = "I'm the child";
} }
//p. //p.
[TODO: Motivate communication between components with iterator example that passes index to the child] [TODO: Motivate communication between components with iterator example that passes index to the child]

View File

@ -24,15 +24,14 @@
To use Angular2 in your app, include angular2 as a dependency in To use Angular2 in your app, include angular2 as a dependency in
your app's <b>pubspec.yaml</b> file. For example: your app's <b>pubspec.yaml</b> file. For example:
pre.prettyprint.lang-yaml code-example(language="yaml").
code. # pubspec.yaml
# pubspec.yaml name: getting_started
name: getting_started description: Dart version of Angular 2 example, Getting Started
description: Dart version of Angular 2 example, Getting Started version: 0.0.1
version: 0.0.1 dependencies:
dependencies: angular2: 2.0.0-alpha.22
angular2: 2.0.0-alpha.22 browser: any
browser: any
p. p.
Run <b>pub get</b> to download the packages your app depends on. Run <b>pub get</b> to download the packages your app depends on.
(<a href="https://www.dartlang.org/tools/">Dart-savvy editors and IDEs</a> (<a href="https://www.dartlang.org/tools/">Dart-savvy editors and IDEs</a>
@ -51,26 +50,25 @@
and creating a top-level <code>main()</code> function that calls and creating a top-level <code>main()</code> function that calls
Angular's <code>bootstrap()</code> function. Angular's <code>bootstrap()</code> function.
pre.prettyprint.lang-dart code-example(language="javascript").
code. // web/main.dart
// web/main.dart import 'package:angular2/angular2.dart';
import 'package:angular2/angular2.dart'; import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection.dart' show reflector; import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
@Component( @Component(
selector: 'my-app' selector: 'my-app'
) )
@View( @View(
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;' template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
) )
class AppComponent { class AppComponent {
} }
main() { main() {
reflector.reflectionCapabilities = new ReflectionCapabilities(); reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(AppComponent); bootstrap(AppComponent);
} }
.l-main-section .l-main-section
h2#section-create-an-entry-point Create an HTML file h2#section-create-an-entry-point Create an HTML file
@ -79,20 +77,19 @@
Edit <code>index.html</code> to add a <code>&lt;my-app&gt;</code> element Edit <code>index.html</code> to add a <code>&lt;my-app&gt;</code> element
and call <code>main.dart</code>. and call <code>main.dart</code>.
pre.prettyprint.lang-html code-example(language="html").
code. &lt;!-- web/index.html -->
&lt;!-- web/index.html --> &lt;!DOCTYPE html&gt;
&lt;!DOCTYPE html&gt; &lt;html&gt;
&lt;html&gt; &lt;head&gt;
&lt;head&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;/head&gt;
&lt;/head&gt; &lt;body&gt;
&lt;body&gt; &lt;my-app&gt;&lt;/my-app&gt;
&lt;my-app&gt;&lt;/my-app&gt; &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt; &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt; &lt;/body&gt;
&lt;/body&gt; &lt;/html&gt
&lt;/html&gt
.l-main-section .l-main-section
h2#section-run-it Run the app! h2#section-run-it Run the app!

View File

@ -5,9 +5,8 @@
p. p.
You can specify the event handler—a method in the component controller—like this: You can specify the event handler—a method in the component controller—like this:
pre.prettyprint.lang-html code-example(language="html").
code. &lt;input (keyup)="myControllerMethod()"&gt;
&lt;input (keyup)="myControllerMethod()"&gt;
p. p.
As in previous examples, you can make element references available to As in previous examples, you can make element references available to
other parts of the template as a local other parts of the template as a local
@ -17,10 +16,9 @@
<!-- PENDING: make sure we use recommended word separation scheme. <!-- PENDING: make sure we use recommended word separation scheme.
my-name doesn't work, but my_name does. Would myName work? --> my-name doesn't work, but my_name does. Would myName work? -->
pre.prettyprint.lang-html code-example(language="html").
code. &lt;input #myname (keyup)&gt;
&lt;input #myname (keyup)&gt; &lt;p&gt;{{myname.value}}&lt;/p&gt;
&lt;p&gt;{{myname.value}}&lt;/p&gt;
p.text-body(ng-non-bindable). p.text-body(ng-non-bindable).
In that example, <code>#myname</code> creates a local variable in the template that In that example, <code>#myname</code> creates a local variable in the template that
@ -46,16 +44,15 @@
Then add a method that adds new items Then add a method that adds new items
to the list. to the list.
pre.prettyprint.lang-dart code-example(language="dart" format="linenums").
code. class TodoList {
class TodoList { List&lt;String&gt; todos =
List&lt;String&gt; todos = ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
addTodo(String todo) { addTodo(String todo) {
todos.add(todo); todos.add(todo);
}
} }
}
.callout.is-helpful .callout.is-helpful
header Production Best Practice header Production Best Practice
@ -73,13 +70,12 @@
Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos list and set Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos list and set
its text to the value. its text to the value.
pre.prettyprint.lang-html code-example(language="html" format="linenums").
code. &lt;ul&gt;
&lt;ul&gt; &lt;li *for=&quot;#todo of todos&quot;&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt; {{ todo }}
{{ todo }} &lt;/li&gt;
&lt;/li&gt; &lt;/ul&gt;
&lt;/ul&gt;
.l-main-section .l-main-section
h2#section-add-todos-to-the-list Add todos to the list via button click h2#section-add-todos-to-the-list Add todos to the list via button click
@ -87,18 +83,16 @@
Now, add a text input and a button for users to add items to the list. As you saw above, you can create a local Now, add a text input and a button for users to add items to the list. As you saw above, you can create a local
variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here. variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here.
pre.prettyprint.lang-html code-example(language="html").
code. &lt;input #todotext&gt;
&lt;input #todotext&gt;
p. p.
Specify the target of the click event binding as your controller's Specify the target of the click event binding as your controller's
<code>addTodo()</code> method and pass <code>addTodo()</code> method and pass
it the value. Since you created a reference called <code>todotext</code>, it the value. Since you created a reference called <code>todotext</code>,
you can get the value with <code>todotext.value.</code> you can get the value with <code>todotext.value.</code>
pre.prettyprint.lang-html code-example(language="html").
code. &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
p. p.
To make pressing Enter do something useful, To make pressing Enter do something useful,
@ -107,13 +101,59 @@
<a href="https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html">dart:html</a>, <a href="https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html">dart:html</a>,
so be sure to import that library. so be sure to import that library.
.code-box code-tabs
pre.prettyprint.lang-dart(data-name="todo_list.dart") code-pane(language="dart" name="todo_list.dart" format="linenums").
code. // In the template:
// In the template: &lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
&lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
// In the component controller class:
doneTyping(KeyboardEvent event) {
if (event.keyCode == KeyCode.ENTER) {
InputElement e = event.target;
addTodo(e.value);
e.value = null;
}
}
code-pane(language="dart" name="main.dart" format="linenums").
library user_input;
import 'dart:html';
...
.l-main-section
h2#section-final-code Final code
code-tabs
code-pane(language="dart" name="todo_list.dart" format="linenums").
// web/todo_list.dart
part of user_input;
@Component(
selector: 'todo-list'
)
@View(
// Without r before ''' (a raw string), $event breaks Angular.
// An alternative to a raw string is to use \$event instead.
template: r'''
&lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
''',
directives: const[For]
)
class TodoList {
List&lt;String&gt; todos =
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
addTodo(String todo) {
todos.add(todo);
}
// In the component controller class:
doneTyping(KeyboardEvent event) { doneTyping(KeyboardEvent event) {
if (event.keyCode == KeyCode.ENTER) { if (event.keyCode == KeyCode.ENTER) {
InputElement e = event.target; InputElement e = event.target;
@ -121,96 +161,43 @@
e.value = null; e.value = null;
} }
} }
pre.prettyprint.lang-dart(data-name="main.dart") }
code. code-pane(language="dart" name="main.dart" format="linenums").
library user_input; // web/main.dart
library user_input;
import 'dart:html'; import 'dart:html';
...
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
.l-main-section part 'todo_list.dart';
h2#section-final-code Final code
.code-box main() {
pre.prettyprint.lang-dart(data-name="todo_list.dart") reflector.reflectionCapabilities = new ReflectionCapabilities();
code. bootstrap(TodoList);
// web/todo_list.dart }
part of user_input; code-pane(language="html" name="index.html" format="linenums").
&lt;!-- web/index.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
@Component( &lt;todo-list&gt;&lt;/todo-list&gt;
selector: 'todo-list'
)
@View(
// Without r before ''' (a raw string), $event breaks Angular.
// An alternative to a raw string is to use \$event instead.
template: r'''
&lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt; &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt; &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
''', &lt;/body&gt;
directives: const[For] &lt;/html&gt;
) code-pane(language="yaml" name="pubspec.yaml" format="linenums").
class TodoList { # pubspec.yaml
List&lt;String&gt; todos = name: user_input
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular']; description: Dart version of Angular 2 example, Responding to User Input
version: 0.0.1
addTodo(String todo) { dependencies:
todos.add(todo); angular2: 2.0.0-alpha.22
} browser: any
doneTyping(KeyboardEvent event) {
if (event.keyCode == KeyCode.ENTER) {
InputElement e = event.target;
addTodo(e.value);
e.value = null;
}
}
}
pre.prettyprint.lang-dart(data-name="main.dart")
code.
// web/main.dart
library user_input;
import 'dart:html';
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
part 'todo_list.dart';
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(TodoList);
}
pre.prettyprint.lang-html(data-name="html")
code.
&lt;!-- web/index.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;todo-list&gt;&lt;/todo-list&gt;
&lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
pre.prettyprint.lang-yaml(data-name="yaml")
code.
# pubspec.yaml
name: user_input
description: Dart version of Angular 2 example, Responding to User Input
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.22
browser: any

View File

@ -1,17 +0,0 @@
doctype
html(lang="en" ng-app="angularIOApp")
head
!= partial("../../../../_includes/_head-include")
body(class="l-offset-nav l-offset-side-nav" ng-controller="AppCtrl")
!= partial("../../../../_includes/_main-nav")
!= partial("../../../_includes/sidenav/_primary")
!= partial("../../../../_includes/_hero")
!= partial("../../../../_includes/_banner")
article.l-content-small.grid-fluid.docs-content(ng-non-bindable)
!= yield
!= partial("../../../../_includes/_next-item")
!= partial("../../../../_includes/_footer")
!= partial("../../../../_includes/_scripts-include")

View File

@ -22,9 +22,10 @@
h2#section-create-an-entry-point Create an entry point 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: p Open your favorite editor and create a show-properties.html file with the content:
pre.prettyprint.linenums.lang-html
code. code-example(language="html" escape="html").
&lt;display&gt;&lt;/display&gt; <display></display>
p p
| The <code>&lt;display&gt;</code> component here acts as the site where you'll insert your application. | 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 | We'll assume a structure like this for the rest of the examples here and just focus on the parts that
@ -38,51 +39,51 @@
p To see this working, create another file, <code>show-properties.ts</code>, and add the following: p To see this working, create another file, <code>show-properties.ts</code>, and add the following:
.code-box code-tabs
pre.prettyprint.linenums.lang-typescript(data-name="typescript") code-pane(language="javascript" name="TypeScript" format="linenums" escape="html").
code. // TypeScript
// TypeScript import {Component, View, bootstrap, For} from 'angular2/angular2';
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;
names: Array&lt;string&gt;;
constructor() {
this.myName = "Alice";
}
}
code-pane(language="javascript" name="ES5" format="linenums" escape="html").
// ES5
function DisplayComponent() {
this.myName = "Alice";
}
DisplayComponent.annotations = [
new angular.ComponentAnnotation({
selector: "display"
}),
new angular.ViewAnnotation({
template:
'&lt;p&gt;My name: {{ myName }}&lt;/p&gt;',
directives: [angular.For, angular.If]
})
];
@Component({
selector: 'display'
})
@View({
template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt
`,
directives: [For]
})
class DisplayComponent {
myName: string;
names: Array&lt;string&gt;;
constructor() {
this.myName = "Alice";
}
}
pre.prettyprint.linenums.lang-javascript(data-name="es5")
code.
// ES5
function DisplayComponent() {
this.myName = "Alice";
}
DisplayComponent.annotations = [
new angular.ComponentAnnotation({
selector: "display"
}),
new angular.ViewAnnotation({
template:
'&lt;p&gt;My name: {{ myName }}&lt;/p&gt;',
directives: [angular.For, angular.If]
})
];
p. p.
You've just defined a component that encompasses a view and controller for the app. The view You've just defined a component that encompasses a view and controller for the app. The view
defines a template: defines a template:
pre.prettyprint.lang-html
code. code-example(language="html" escape="html").
&lt;p&gt;My name: {{ myName }}&lt;/p&gt; <p>My name: {{ myName }}</p>
p. p.
Angular will automatically pull the value of <code>myName</code> and insert it into the browser and Angular will automatically pull the value of <code>myName</code> and insert it into the browser and
@ -100,16 +101,16 @@
just one property, myName. just one property, myName.
.callout.is-helpful .callout.is-helpful
header Note header Note
p. p.
While you've used <code>template:</code> to specify an inline view, for larger templates you'd 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. 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 p So you can see Angular dynamically update content, add a line after
pre.prettyprint.lang-html code-example(language="html" escape="html").
code. <p>My name: {{ myName }}</p>
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
p to this: p to this:
pre.prettyprint.lang-html pre.prettyprint.lang-html
code. code.
@ -122,79 +123,77 @@
code. code.
setInterval(function () { this.time = (new Date()).toString(); }.bind(this), 1000); 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. p Reload the page in your browser and you'll now see the seconds updating automatically.
.l-main-section .l-main-section
h2#Create-an-array Create an array property and use For on the view 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. p Moving up from a single property, create an array to display as a list.
.code-box
pre.prettyprint.lang-typescript(data-name="typescript") code-tabs
code. code-pane(language="javascript" name="TypeScript" format="linenums" escape="html").
//Typescript //Typescript
constructor() { constructor() {
this.myName = "Alice"; this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
} }
pre.prettyprint.lang-javascript(data-name="es5") code-pane(language="javascript" name="Javascript (ES5)" format="linenums" escape="html").
code. //ES5
//ES5 function DisplayComponent() {
function DisplayComponent() { this.myName = "Alice";
this.myName = "Alice"; this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; }
}
p. p.
You can then use this array in your template with the <code>for</code> directive to create copies of DOM elements 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. 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-tabs
code. code-pane(language="javascript" name="TypeScript" format="linenums").
//Typescript //Typescript
template: ` template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt; &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;Friends:&lt;/p&gt; &lt;p&gt;Friends:&lt;/p&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li *for=&quot;#name of names&quot;&gt; &lt;li *for=&quot;#name of names&quot;&gt;
{{ name }} {{ name }}
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
`, `,
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;,
p. p.
To make this work, you'll also need to add the <code>For</code> directive used by the template so To make this work, you'll also need to add the <code>For</code> directive used by the template so
that Angular knows to include it: that Angular knows to include it:
.code-box code-tabs
pre.prettyprint.lang-typescript(data-name="typescript") code-pane(language="javascript" name="TypeScript" format="linenums").
code. //Typescript
//Typescript import {Component, View, bootstrap, For} from
import {Component, View, bootstrap, For} from ...
... directives: [For]
directives: [For]
pre.prettyprint.lang-javascript(data-name="es5") code-pane(language="javascript" name="ES5" format="linenums").
code. //ES5
//ES5 directives: [angular.For]
directives: [angular.For]
p Reload and you've got your list of friends! p Reload and you've got your list of friends!
p. p.
Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your
list. Delete one and Angular deletes the &lt;li&gt;. Reorder items and Angular makes the corresponding reorder of list. Delete one and Angular deletes the &lt;li&gt;. Reorder items and Angular makes the corresponding reorder of
the DOM list. the DOM list.
p Let's look at the few lines that do the work again: p Let's look at the few lines that do the work again:
pre.prettyprint.lang-html code-example(language="html" format="linenums").
code. //HTML
//HTML &lt;li *for=&quot;#name of names&quot;&gt;
&lt;li *for=&quot;#name of names&quot;&gt; {{ name }}
{{ name }} &lt;/li&gt;
&lt;/li&gt;
p The way to read this is: p The way to read this is:
ul ul
li. li.
@ -211,83 +210,80 @@
proper form. We should separate the concerns by having another class serve the role of model and inject it into proper form. We should separate the concerns by having another class serve the role of model and inject it into
the controller. the controller.
p Make a <code>FriendsService</code> class to provide the model with the list of friends. p Make a <code>FriendsService</code> class to provide the model with the list of friends.
pre.prettyprint.lang-javascript
code. code-example(language="javascript" format="linenums").
class FriendsService { class FriendsService {
names: Array&lt;string&gt;; names: Array&lt;string&gt;;
constructor() { constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
} }
} }
p. p.
Replace the current list of friends in DisplayComponent by passing in the FriendsService and setting the list of Replace the current list of friends in DisplayComponent by passing in the FriendsService and setting the list of
names in DisplayComponent to the names provided by the service you passed in. names in DisplayComponent to the names provided by the service you passed in.
pre.prettyprint.lang-javascript
code. code-example(language="javascript" format="linenums").
class DisplayComponent { class DisplayComponent {
names: Array&lt;string&gt;; names: Array&lt;string&gt;;
constructor(friendsService: FriendsService) { constructor(friendsService: FriendsService) {
this.names = friendsService.names; this.names = friendsService.names;
} }
} }
p And then make FriendsService available to dependency injection p And then make FriendsService available to dependency injection
pre.prettyprint.lang-javascript code-example(language="javascript" format="linenums").
code. @Component({
@Component({ ...
... injectables: [FriendsService]
injectables: [FriendsService] })
}) ...
... class DisplayComponent {...
class DisplayComponent {...
.callout.is-helpful .callout.is-helpful
header ES5 Note header ES5 Note
p. p.
The dependency injection syntax here is using the low-level API and is...well...not very nice. We're 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. working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon.
.code-box code-tabs
pre.prettyprint.lang-typescript(data-name="typescript") code-pane(language="javascript" name="TypeScript" format="linenums").
code. //TypeScript
//TypeScript class FriendsService {
class FriendsService { names: Array&lt;string&gt;;
names: Array&lt;string&gt;; constructor() {
constructor() { this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; }
} }
} ...
... class DisplayComponent {
class DisplayComponent { names: Array&lt;string&gt;;
names: Array&lt;string&gt;;
constructor(friendsService: FriendsService) { constructor(friendsService: FriendsService) {
this.names = friendsService.names; this.names = friendsService.names;
} }
} }
code-pane(language="javascript" name="ES5" format="linenums").
pre.prettyprint.lang-javascript(data-name="es5") //ES5
code. function FriendsService() {
//ES5 this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
function FriendsService() { }
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; function DisplayComponent(friends) {
} this.myName = "Alice";
function DisplayComponent(friends) { this.names = friends.names;
this.myName = "Alice"; }
this.names = friends.names; DisplayComponent.annotations = [
} new angular.ComponentAnnotation({
DisplayComponent.annotations = [ selector: "display",
new angular.ComponentAnnotation({ injectables: [FriendsService]
selector: "display", }),
injectables: [FriendsService] new angular.ViewAnnotation({
}), template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&gt;{{ name }}&lt;/li&gt; &lt;/ul&gt;',
new angular.ViewAnnotation({ directives: [angular.For, angular.If]
template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&gt;{{ name }}&lt;/li&gt; &lt;/ul&gt;', })
directives: [angular.For, angular.If] ];
}) DisplayComponent.parameters = [[FriendsService]];
]; document.addEventListener("DOMContentLoaded", function() {
DisplayComponent.parameters = [[FriendsService]]; angular.bootstrap(DisplayComponent);
document.addEventListener("DOMContentLoaded", function() { });
angular.bootstrap(DisplayComponent);
});
.l-main-section .l-main-section
h2#Conditionally-displaying-data-with-If Conditionally displaying data with If h2#Conditionally-displaying-data-with-If Conditionally displaying data with If
p. p.
@ -299,70 +295,67 @@
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt; &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
p You'll also need to add the <code>If</code> directive so Angular knows to include it. p You'll also need to add the <code>If</code> directive so Angular knows to include it.
.code-box code-tabs
pre.prettyprint.lang-typescript(data-name="typescript") code-pane(language="javascript" name="TypeScript" format="linenums").
code. //Typescript
//Typescript import {Component, View, bootstrap, For, If} from
import {Component, View, bootstrap, For, If} from ...
... directives: [For, If]
directives: [For, If] code-pane(language="javascript" name="ES5" format="linenums").
pre.prettyprint.lang-javascript(data-name="es5") //ES5
code. directives: [angular.For, angular.If]
//ES5
directives: [angular.For, angular.If]
p. p.
As there are currently 5 items it the list, you'll see the message congratulating you on your many friends. 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. Remove two items from the list, reload your browser, and see that the message no longer displays.
.code-box
pre.prettyprint.lang-typescript(data-name="typescript") code-tabs
code. code-pane(language="javascript" name="TypeScript" format="linenums").
//TypeScript //TypeScript
import {Component, View, bootstrap, For, If} from 'angular2/angular2'; import {Component, View, bootstrap, For, If} from 'angular2/angular2';
@Component({ @Component({
selector: 'display' selector: 'display'
}) })
@View({ @View({
template: ` template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt; &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;Friends:&lt;/p&gt; &lt;p&gt;Friends:&lt;/p&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li *for=&quot;#name of names&quot;&gt; &lt;li *for=&quot;#name of names&quot;&gt;
{{ name }} {{ name }}
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt; &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
`, `,
directives: [For, If] directives: [For, If]
}) })
class DisplayComponent { class DisplayComponent {
myName: string; myName: string;
todos: Array&lt;string&gt; todos: Array&lt;string&gt;
constructor() { constructor() {
this.myName = "Alice"; this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
} }
} }
pre.prettyprint.lang-javascript(data-name="es5") code-pane(language="javascript" name="ES5" format="linenums").
code. //ES5
//ES5 function DisplayComponent() {
function DisplayComponent() { this.myName = "Alice";
this.myName = "Alice"; this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; }
} DisplayComponent.annotations = [
DisplayComponent.annotations = [ new angular.ComponentAnnotation({
new angular.ComponentAnnotation({ selector: "display"
selector: "display" }),
}), new angular.ViewAnnotation({
new angular.ViewAnnotation({ template:
template: &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; + &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; + &#39;&lt;ul&gt;&#39; +
&#39;&lt;ul&gt;&#39; + &#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
&#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; + &#39;{{ name }}&#39; +
&#39;{{ name }}&#39; + &#39;&lt;/li&gt;&#39; +
&#39;&lt;/li&gt;&#39; + &#39;&lt;/ul&gt;&#39; +
&#39;&lt;/ul&gt;&#39; + &#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;,
&#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;, directives: [angular.For, angular.If]
directives: [angular.For, angular.If] })
}) ];
];

View File

@ -10,80 +10,76 @@
Given a bootstrapping template with a <code>&lt;parent&gt;</code> tag in the body, you can create a parent Given a bootstrapping template with a <code>&lt;parent&gt;</code> tag in the body, you can create a parent
component that uses a <code>&lt;child&gt;</code> component like so: component that uses a <code>&lt;child&gt;</code> component like so:
.code-box code-tabs
pre.prettyprint.linenums.lang-typescript(data-name="typescript") code-pane(language="javascript" name="TypeScript" format="linenums").
code. //TypeScript
//TypeScript @Component({
@Component({ selector: 'parent'
selector: 'parent' })
}) @View({
@View({ template: `
template: ` &lt;h1&gt;{{ message }}&lt;/h1&gt;
&lt;h1&gt;{{ message }}&lt;/h1&gt; &lt;child&gt;&lt;/child&gt;
&lt;child&gt;&lt;/child&gt; `,
`, directives: [ChildComponent]
directives: [ChildComponent] })
}) class ParentComponent {
class ParentComponent { message: string;
message: string;
constructor() { constructor() {
this.message = "I'm the parent";
}
}
pre.prettyprint.linenums.lang-javascript(data-name="es5")
code.
//ES5
function ParentComponent() {
this.message = "I'm the parent"; this.message = "I'm the parent";
} }
ParentComponent.annotations = [ }
new angular.ComponentAnnotation({ code-pane(language="javascript" name="ES5" format="linenums").
selector: "parent" //ES5
}), function ParentComponent() {
new angular.ViewAnnotation({ this.message = "I'm the parent";
template: }
'&lt;h1&gt;{{ message }}&lt;/h1&gt;' + ParentComponent.annotations = [
'&lt;child&gt;&lt;/child&gt;', new angular.ComponentAnnotation({
directives: [ChildComponent] selector: "parent"
}) }),
]; new angular.ViewAnnotation({
template:
'&lt;h1&gt;{{ message }}&lt;/h1&gt;' +
'&lt;child&gt;&lt;/child&gt;',
directives: [ChildComponent]
})
];
p You then just need to write the <code>ChildComponent</code> class to make it work: p You then just need to write the <code>ChildComponent</code> class to make it work:
.code-box code-tabs
pre.prettyprint.linenums.lang-typescript(data-name="typescript") code-pane(language="javascript" name="TypeScript" format="linenums").
code. //TypeScript
//TypeScript @Component({
@Component({ selector: 'child'
selector: 'child' })
}) @View({
@View({ template: `
template: ` &lt;p&gt; {{ message }} &lt;/p&gt;
&lt;p&gt; {{ message }} &lt;/p&gt; `
` })
}) class ChildComponent {
class ChildComponent { message: string;
message: string; constructor() {
constructor() {
this.message = "I'm the child";
}
}
pre.prettyprint.linenums.lang-javascript(data-name="es5")
code.
//ES5
function ChildComponent() {
this.message = "I'm the child"; this.message = "I'm the child";
} }
ChildComponent.annotations = [ }
new angular.ComponentAnnotation({ code-pane(language="javascript" name="ES5" format="linenums").
selector: "child" //ES5
}), function ChildComponent() {
new angular.ViewAnnotation({ this.message = "I'm the child";
template: '&lt;p&gt; {{ message }} &lt;/p&gt;' }
}) ChildComponent.annotations = [
]; new angular.ComponentAnnotation({
selector: "child"
}),
new angular.ViewAnnotation({
template: '&lt;p&gt; {{ message }} &lt;/p&gt;'
})
];
p. p.

View File

@ -39,36 +39,34 @@
p. p.
The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version. The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version.
.code-box code-tabs
pre.prettyprint.lang-html(data-name="typescript") code-pane(language="html" name="TypeScript" format="linenums").
code. &lt;!DOCTYPE html&gt;
&lt;!DOCTYPE html&gt; &lt;html&gt;
&lt;html&gt; &lt;head&gt;
&lt;head&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;script src=&quot;https://jspm.io/system@0.16.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://jspm.io/system@0.16.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js&quot;&gt;&lt;/script&gt; &lt;/head&gt;
&lt;/head&gt; &lt;body&gt;
&lt;body&gt; &lt;my-app&gt;&lt;/my-app&gt;
&lt;my-app&gt;&lt;/my-app&gt; &lt;script&gt;
&lt;script&gt; System.import(&#39;main&#39;);
System.import(&#39;main&#39;); &lt;/script&gt;
&lt;/script&gt; &lt;/body&gt;
&lt;/body&gt; &lt;/html&gt;
&lt;/html&gt;
pre.prettyprint.lang-html(data-name="es5") code-pane(language="html" name="ES5" format="linenums").
code. &lt;!DOCTYPE html&gt;
&lt;!DOCTYPE html&gt; &lt;html&gt;
&lt;html&gt; &lt;head&gt;
&lt;head&gt; &lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.22/angular2.sfx.dev.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.22/angular2.sfx.dev.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt; &lt;/head&gt;
&lt;/head&gt; &lt;body&gt;
&lt;body&gt; &lt;my-app&gt;&lt;/my-app&gt;
&lt;my-app&gt;&lt;/my-app&gt; &lt;/body&gt;
&lt;/body&gt; &lt;/html&gt;
&lt;/html&gt;
.callout.is-helpful .callout.is-helpful
header Don't use code.angularjs.org in a live app header Don't use code.angularjs.org in a live app
@ -84,24 +82,21 @@
<code>&lt;my-app&gt;</code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick <code>&lt;my-app&gt;</code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick
it all off like this: it all off like this:
.code-box code-tabs
pre.prettyprint.lang-typescript(data-name="typescript") code-pane(language="javascript" name="TypeScript" format="linenums").
code. import {Component, View, bootstrap} from 'angular2/angular2';
import {Component, View, bootstrap} from 'angular2/angular2';
@Component({ @Component({
selector: 'my-app' selector: 'my-app'
}) })
@View({ @View({
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;' template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
}) })
class AppComponent { class AppComponent {
} }
bootstrap(AppComponent); bootstrap(AppComponent);
code-pane(language="javascript" name="ES5" format="linenums").
pre.prettyprint.lang-javascript(data-name="es5")
code.
function AppComponent() {} function AppComponent() {}
AppComponent.annotations = [ AppComponent.annotations = [
@ -179,16 +174,14 @@
p. p.
In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not. In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
.code-box code-tabs
pre.prettyprint.lang-typescript(data-name="typescript") code-pane(language="javascript" name="TypeScript" format="linenums" ).
code. import {Component, View, bootstrap} from 'angular2/angular2';
import {Component, View, bootstrap} from 'angular2/angular2'; ...
... // bootstrap is available for use because it was imported from angular core
// bootstrap is available for use because it was imported from angular core bootstrap(AppComponent);
bootstrap(AppComponent); code-pane(language="javascript" name="ES5" format="linenums").
pre.prettyprint.lang-typescript(data-name="es5") // window.angular is available because the script file attaches the angular property to the window
code. document.addEventListener('DOMContentLoaded', function() {
// window.angular is available because the script file attaches the angular property to the window angular.bootstrap(AppComponent);
document.addEventListener('DOMContentLoaded', function() { });
angular.bootstrap(AppComponent);
});

View File

@ -6,19 +6,17 @@
p. p.
For a particular control like an input you can have it call methods on your controller on keyup event like so: For a particular control like an input you can have it call methods on your controller on keyup event like so:
pre.prettyprint.lang-html code-example(language="html").
code. &lt;input (keyup)="myControllerMethod()"&gt;
&lt;input (keyup)="myControllerMethod()"&gt;
h3#local-variables Local variables h3#local-variables Local variables
p. p.
As in previous examples, you can make element references available to other parts of the template as a local As in previous examples, you can make element references available to other parts of the template as a local
variable using the <code>#var</code> syntax. With this and events, we can do the old "update text as you type" example: variable using the <code>#var</code> syntax. With this and events, we can do the old "update text as you type" example:
pre.prettyprint.lang-html code-example(language="html").
code. &lt;input #myname (keyup)&gt;
&lt;input #myname (keyup)&gt; &lt;p&gt;{{myname.value}}&lt;/p&gt;
&lt;p&gt;{{myname.value}}&lt;/p&gt;
p.text-body(ng-non-bindable). p.text-body(ng-non-bindable).
The <code>#myname</code> creates a local variable in the template that we'll refer to below in the The <code>#myname</code> creates a local variable in the template that we'll refer to below in the
@ -37,28 +35,26 @@
list. Inside the controller, add an array with an initial list of items. Then add a method that pushes new items list. Inside the controller, add an array with an initial list of items. Then add a method that pushes new items
on the array when called. on the array when called.
.code-box code-tabs
pre.prettyprint.linenums.lang-typescript(data-name="typescript") code-pane(language="javascript" name="TypeScript" format="linenums").
code. //TypeScript
//TypeScript class TodoList {
class TodoList { todos: Array&lt;string&gt;;
todos: Array&lt;string&gt;; constructor() {
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
}
pre.prettyprint.linenums.lang-javascript(data-name="es5")
code.
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"]; this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
} }
addTodo(todo: string) {
this.todos.push(todo);
}
}
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
}
.callout.is-helpful .callout.is-helpful
header Production Best Practice header Production Best Practice
@ -72,13 +68,12 @@
Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos array and set Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos array and set
its text to the value. its text to the value.
pre.prettyprint.linenums.lang-html code-example(language="html" format="linenums").
code. &lt;ul&gt;
&lt;ul&gt; &lt;li *for=&quot;#todo of todos&quot;&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt; {{ todo }}
{{ todo }} &lt;/li&gt;
&lt;/li&gt; &lt;/ul&gt;
&lt;/ul&gt;
.l-main-section .l-main-section
h2#section-add-todos-to-the-list Add todos to the list via button click h2#section-add-todos-to-the-list Add todos to the list via button click
@ -86,109 +81,104 @@
Now, add a text input and a button for users to add items to the list. As you saw above, you can create a local Now, add a text input and a button for users to add items to the list. As you saw above, you can create a local
variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here. variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here.
pre.prettyprint.lang-html code-example(language="html" format="linenums").
code. &lt;input #todotext&gt;
&lt;input #todotext&gt;
p. p.
Lastly, specify the target of the click event binding as your controller's <code>addTodo()</code> method and pass Lastly, specify the target of the click event binding as your controller's <code>addTodo()</code> method and pass
it the value. Since you created a reference called <code>todotext</code>, you can get the value with it the value. Since you created a reference called <code>todotext</code>, you can get the value with
<code>todotext.value.</code> <code>todotext.value.</code>
pre.prettyprint.lang-html code-example(language="html" format="linenums").
code. &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
p And then create the <code>doneTyping()</code> method on TodoList and handle adding the todo text. p And then create the <code>doneTyping()</code> method on TodoList and handle adding the todo text.
pre.prettyprint.lang-javascript code-example(language="javascript" format="linenums").
code. doneTyping($event) {
doneTyping($event) { if($event.which === 13) {
if($event.which === 13) { this.addTodo($event.target.value);
this.addTodo($event.target.value); $event.target.value = null;
$event.target.value = null;
}
} }
}
.l-main-section .l-main-section
h2#section-final-code Final Code h2#section-final-code Final Code
.code-box code-tabs
pre.prettyprint.lang-typescript(data-name="typescript") code-pane(language="javascript" name="TypeScript" format="linenums").
code. //TypeScript
//TypeScript import {Component, View, bootstrap, For, If} from 'angular2/angular2';
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
@Component({ @Component({
selector: 'todo-list' selector: 'todo-list'
}) })
@View({ @View({
template: ` template: `
&lt;ul&gt; &lt;ul&gt;
&lt;li *for="#todo of todos"&gt; &lt;li *for="#todo of todos"&gt;
{{ todo }} {{ todo }}
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt; &lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt; &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
`, `,
directives: [For, If] directives: [For, If]
}) })
class TodoList { class TodoList {
todos: Array&lt;string&gt;; todos: Array&lt;string&gt;;
constructor() { constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
doneTyping($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
bootstrap(TodoList);
pre.prettyprint.lang-javascript(data-name="es5")
code.
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"]; this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
this.doneTyping = function($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
} }
TodoList.annotations = [ addTodo(todo: string) {
new angular.ComponentAnnotation({ this.todos.push(todo);
selector: "todo-list" }
}),
new angular.ViewAnnotation({
template:
'&lt;ul&gt;' +
'&lt;li *for="#todo of todos">' +
'{{ todo }}' +
'&lt;/li&gt;' +
'&lt;/ul&gt;' +
'&lt;input #textbox (keyup)="doneTyping($event)">' +
'&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
directives: [angular.For, angular.If]
})
];
document.addEventListener("DOMContentLoaded", function() { doneTyping($event) {
angular.bootstrap(TodoList); if($event.which === 13) {
}); this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
bootstrap(TodoList);
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
this.doneTyping = function($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
TodoList.annotations = [
new angular.ComponentAnnotation({
selector: "todo-list"
}),
new angular.ViewAnnotation({
template:
'&lt;ul&gt;' +
'&lt;li *for="#todo of todos">' +
'{{ todo }}' +
'&lt;/li&gt;' +
'&lt;/ul&gt;' +
'&lt;input #textbox (keyup)="doneTyping($event)">' +
'&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
directives: [angular.For, angular.If]
})
];
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(TodoList);
});

View File

@ -25,14 +25,14 @@
TypeScript type definitions are typically published in a repo called <a href="http://definitelytyped.org/">DefinitelyTyped</a>. TypeScript type definitions are typically published in a repo called <a href="http://definitelytyped.org/">DefinitelyTyped</a>.
To fetch one of the type definitions to the local directory, we use the <a href="https://www.npmjs.com/package/tsd">tsd package manager</a>. To fetch one of the type definitions to the local directory, we use the <a href="https://www.npmjs.com/package/tsd">tsd package manager</a>.
pre.prettyprint code-example.
$ npm install -g tsd $ npm install -g tsd
$ tsd query angular2 --action install $ tsd query angular2 --action install
p. p.
Next, create two empty files, <code>index.html</code> and <code>app.ts</code>, both at the root of the project: Next, create two empty files, <code>index.html</code> and <code>app.ts</code>, both at the root of the project:
pre.prettyprint code-example.
$ touch app.ts index.html $ touch app.ts index.html
// STEP 2 - Start the TypeScript compiler ########################## // STEP 2 - Start the TypeScript compiler ##########################
@ -45,7 +45,7 @@
compiler in <code>--watch</code> mode, but it is also possible to do the translation in the browser as files compiler in <code>--watch</code> mode, but it is also possible to do the translation in the browser as files
are loaded, or configure your editor or IDE to do it. are loaded, or configure your editor or IDE to do it.
pre.prettyprint code-example.
$ npm install -g typescript@^1.5.0-beta $ npm install -g typescript@^1.5.0-beta
$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts $ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
@ -54,12 +54,12 @@
h2#section-transpile 3. Import Angular h2#section-transpile 3. Import Angular
p Inside of <code>app.ts</code>, import the type definitions from Angular: p Inside of <code>app.ts</code>, import the type definitions from Angular:
pre.prettyprint code-example.
code /&#47;/ &lt;reference path="typings/angular2/angular2.d.ts" /&gt; &lt;reference path="typings/angular2/angular2.d.ts" &gt;
p Now your editor should be able to complete the available imports: p Now your editor should be able to complete the available imports:
pre.prettyprint code-example.
code import {Component, View, bootstrap} from 'angular2/angular2'; import {Component, View, bootstrap} from 'angular2/angular2';
p. p.
The above import statement uses ES6 module syntax to import three symbols from the Angular module. The above import statement uses ES6 module syntax to import three symbols from the Angular module.
@ -80,23 +80,22 @@
which is an ES6 class, and the <strong>decorators</strong> which tell Angular which is an ES6 class, and the <strong>decorators</strong> which tell Angular
how to place the component into the page. how to place the component into the page.
pre.prettyprint.linenums code-example(language="javascript" format="linenums").
code. // Annotation section
// Annotation section @Component({
@Component({ selector: 'my-app'
selector: 'my-app' })
}) @View({
@View({ template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' })
}) // Component controller
// Component controller class MyAppComponent {
class MyAppComponent { name: string;
name: string;
constructor() { constructor() {
this.name = 'Alice'; this.name = 'Alice';
}
} }
}
.l-sub-section .l-sub-section
h3 @Component and @View annotations h3 @Component and @View annotations
@ -108,14 +107,13 @@
p. p.
The <code>@View</code> annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> property and give it the path to the HTML file. The <code>@View</code> annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> property and give it the path to the HTML file.
pre.prettyprint.linenums code-example(language="javascript" format="linenums").
code. @Component({
@Component({ selector: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
selector: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag })
}) @View({
@View({ template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component })
})
p. p.
The annotations above specify an HTML tag of <code>&lt;my-app&gt;</code> The annotations above specify an HTML tag of <code>&lt;my-app&gt;</code>
@ -128,14 +126,13 @@
The component controller is the backing of the component's template. This component The component controller is the backing of the component's template. This component
controller uses TypeScript <code>class</code> syntax. controller uses TypeScript <code>class</code> syntax.
pre.prettyprint.linenums code-example(language="javascript" format="linenums").
code. class MyAppComponent {
class MyAppComponent { name: string;
name: string; constructor() {
constructor() { this.name = 'Alice';
this.name = 'Alice';
}
} }
}
p. p.
Templates read from their component controllers. Templates have access to any properties Templates read from their component controllers. Templates have access to any properties
@ -158,8 +155,8 @@
At the bottom of <code>app.ts</code>, call the <code>bootstrap()</code> function At the bottom of <code>app.ts</code>, call the <code>bootstrap()</code> function
to load your new component into its page: to load your new component into its page:
pre.prettyprint.linenums code-example(language="javaScript").
code bootstrap(MyAppComponent); bootstrap(MyAppComponent);
p. p.
@ -178,22 +175,21 @@
include the traceur-runtime and the Angular bundle. include the traceur-runtime and the Angular bundle.
Instantiate the <code>my-app</code> component in the <code>body</code>. Instantiate the <code>my-app</code> component in the <code>body</code>.
pre.prettyprint.linenums code-example(language="html" format="linenums").
code. &lt;!-- index.html --&gt;
&lt;!-- index.html --&gt; &lt;html&gt;
&lt;html&gt; &lt;head&gt;
&lt;head&gt; &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt; &lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
&lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt; &lt;script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt; &lt;/head&gt;
&lt;/head&gt; &lt;body&gt;
&lt;body&gt;
&lt;!-- The app component created in app.ts --&gt; &lt;!-- The app component created in app.ts --&gt;
&lt;my-app&gt;&lt;/my-app&gt; &lt;my-app&gt;&lt;/my-app&gt;
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt; &lt;/html&gt;
// STEP 7 - Declare the HTML ########################## // STEP 7 - Declare the HTML ##########################
.l-main-section .l-main-section
@ -215,22 +211,20 @@
Add the System.js dependency in the <code>&lt;head&gt;</code> tag, so that Add the System.js dependency in the <code>&lt;head&gt;</code> tag, so that
it looks like: it looks like:
pre.prettyprint.linenums code-example(language="html" format="linenums").
code. &lt;head&gt;
&lt;head&gt; &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt; &lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
&lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt; &lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;
&lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt; &lt;script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"&gt;&lt;/script&gt; &lt;/head&gt;
&lt;/head&gt;
p. p.
Add the following module-loading code: Add the following module-loading code:
pre.prettyprint.linenums code-example(language="html" format="linenums").
code. &lt;my-app&gt;&lt;/my-app&gt;
&lt;my-app&gt;&lt;/my-app&gt; &lt;script&gt;System.import('app');&lt;/script&gt;
&lt;script&gt;System.import('app');&lt;/script&gt;
// STEP 8 - Run a local server ########################## // STEP 8 - Run a local server ##########################
@ -247,11 +241,11 @@
<code><b>sudo</b> npm ...</code>) <code><b>sudo</b> npm ...</code>)
For example: For example:
pre.prettyprint.code. code-example.
# From the directory that contains index.html: # From the directory that contains index.html:
npm install -g http-server # Or sudo npm install -g http-server npm install -g http-server # Or sudo npm install -g http-server
http-server # Creates a server at localhost:8080 http-server # Creates a server at localhost:8080
# In a browser, visit localhost:8080/index.html # In a browser, visit localhost:8080/index.html
// WHAT'S NEXT... ########################## // WHAT'S NEXT... ##########################

View File

@ -118,6 +118,11 @@
padding: ($unit * 3) ($unit * 1); padding: ($unit * 3) ($unit * 1);
} }
code {
background: $fog;
color: $steel;
}
&:last-child { &:last-child {
margin: 0; margin: 0;
} }

View File

@ -2,7 +2,6 @@
border-radius: 4px; border-radius: 4px;
background: $steel; background: $steel;
box-shadow: 0px 2px 5px rgba($coal, .3); box-shadow: 0px 2px 5px rgba($coal, .3);
display: none;
margin-bottom: $unit * 2; margin-bottom: $unit * 2;
header { header {
@ -24,7 +23,9 @@
font-weight: 500; font-weight: 500;
text-transform: none; text-transform: none;
&.is-selected { &.is-selected,
&.selected
{
background: $blueberry; background: $blueberry;
color: $snow; color: $snow;
} }

View File

@ -50,6 +50,7 @@
code { code {
background: none; background: none;
font-size: 15px; font-size: 15px;
padding: 0px;
} }
ol { ol {

View File

@ -0,0 +1,48 @@
/*
* Apllication Controller
*
*/
angularIO.controller('AppCtrl', ['$scope', '$mdDialog', '$timeout', function($scope, $mdDialog, $timeout) {
$scope.showDocsNav = false;
$scope.showMainNav = false;
$scope.showMenu = false;
// TOGGLE MAIN NAV (TOP) ON MOBILE
$scope.toggleDocsMenu = function() {
$scope.showDocsNav = !$scope.showDocsNav;
};
// TOGGLE DOCS NAV
$scope.toggleMainMenu = function() {
$scope.showMainNav = !$scope.showMainNav;
};
// TOGGLE DOCS VERSION & LANGUAGE
$scope.toggleVersionMenu = function() {
$scope.showMenu = !$scope.showMenu;
};
/*
* Prettify Code
*
* Finish Rendereding code directives then prettify code
*/
// GRAB ALL TAGS NOT USING DIRECTIVES
var preTags = angular.element(document.body).find('pre');
// LOOP THROUGH AND ADD PRETTIFY CLASS
_.each(preTags, function(element) {
var preTag = angular.element(element);
// IF NOT FORMATTED, ADD PRETTY PRINT
if(!preTag.hasClass('prettyprint')) {
preTag.addClass('prettyprint linenums');
}
});
// TRIGGER PRETTYPRINT AFTER DIGEST LOOP COMPLETE
$timeout(prettyPrint, 1);
}]);

View File

@ -0,0 +1,46 @@
angularIO.directive('biocard', function($rootScope, $timeout, $mdDialog) {
return {
restrict: 'A',
scope: {},
link: function (scope, element, attrs) {
// 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="{{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>'
});
});
}
};
});

View File

@ -0,0 +1,25 @@
/*
* Code Example Directive
*
* Formats codes examples and prevents
* Angular code from being processed.
*/
angularIO.directive('codeExample', function() {
return {
restrict: 'E',
compile: function(tElement, attrs) {
var html = (attrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
var template = '<pre class="prettyprint ' + attrs.format + ' lang-' + attrs.language + '">' +
'<code ng-non-bindable>' + html + '</code>' +
'</pre>';
// UPDATE ELEMENT WITH NEW TEMPLATE
tElement.html(template);
// RETURN ELEMENT
return function(scope, element, attrs) {};
}
};
});

View File

@ -0,0 +1,36 @@
/*
* Code Pane Directive
*
* @requires codeTab Directive
*
* Invidiual panes displayed in the the
* codeTab elements
*/
angularIO.directive('codePane', function() {
return {
require: '^codeTabs',
restrict: 'E',
scope: true,
compile: function(tElement, tAttrs) {
var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
var template = '<pre class="prettyprint ' + tAttrs.format + ' lang-' + tAttrs.language + '" ng-show="selected" >' +
'<code class="animated fadeIn" ng-non-bindable>' + html + '</code>' +
'</pre>';
// UPDATE ELEMENT WITH NEW TEMPLATE
tElement.html(template);
// RETURN LINK METHOD
return function(scope, element, attrs, controller) {
scope.name = attrs.name;
//ADD PANE TO CONTROLLER
controller.addPane(scope);
};
}
};
});

View File

@ -0,0 +1,61 @@
/*
* Code Tabs Directive
*
* Creates a tabs code examples that
* displayed in the same container
*/
angularIO.directive('codeTabs', function($timeout) {
return {
restrict: 'E',
scope: {},
transclude: true,
replace: true,
controller: function ($scope) {
$scope.panes = [];
/*
* Add Code Pane List of Panes
*
*/
this.addPane = function(pane) {
if ($scope.panes.length === 0) {
$scope.showPane(pane);
}
$scope.panes.push(pane);
};
/*
* Show selected Code Examples
*
*/
$scope.showPane = function(pane) {
// RESET ALL EXAMPLES
angular.forEach($scope.panes, function(pane) {
pane.selected = false;
});
// SELECT CURRENT EXAMPLE
pane.selected = true;
};
},
template:
'<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}">' +
' {{pane.name}}' +
' </button>' +
' </nav>' +
' </header>' +
' <div class="code-box-examples" ng-transclude></div>' +
'</div>'
};
});

View File

@ -3,8 +3,10 @@
* *
*/ */
var angularIO = angular.module('angularIOApp', ['ngMaterial', 'ngTouch']) var angularIO = angular.module('angularIOApp', ['ngMaterial'])
.config(function($mdThemingProvider) { .config(function($mdThemingProvider) {
// THEMEING FOR ANGULAR MATERIAL
$mdThemingProvider.theme('default') $mdThemingProvider.theme('default')
.primaryPalette('blue', { .primaryPalette('blue', {
'default': '700', // by default use shade 400 from the pink palette for primary intentions 'default': '700', // by default use shade 400 from the pink palette for primary intentions
@ -18,179 +20,3 @@ var angularIO = angular.module('angularIOApp', ['ngMaterial', 'ngTouch'])
'default': '200' // use shade 200 for default, and keep all other shades the same 'default': '200' // use shade 200 for default, and keep all other shades the same
}); });
}); });
/*
* Apllication Controller
*
*/
angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){
$scope.showDocsNav = false;
$scope.showMainNav = false;
$scope.showMenu = false;
// TOGGLE MAIN NAV (TOP) ON MOBILE
$scope.toggleDocsMenu = function(event) {
event.preventDefault();
$scope.showDocsNav = !$scope.showDocsNav;
};
// TOGGLE DOCS NAV
$scope.toggleMainMenu = function(event) {
event.preventDefault();
$scope.showMainNav = !$scope.showMainNav;
};
// TOGGLE DOCS VERSION & LANGUAGE
$scope.toggleVersionMenu = function(event) {
event.preventDefault();
$scope.showMenu = !$scope.showMenu;
};
/*
* Code Switcher
*
*/
$scope.language = 'es5';
var $codeBoxes = $('.code-box');
var getTabName = function(name) {
var prettyName = name;
switch(name) {
case 'es5': prettyName = 'ES5'; break;
case 'typescript': prettyName = 'TypeScript'; break;
default: prettyName = name;
}
return prettyName;
};
if($codeBoxes.length) {
//UPDATE ALL CODE BOXES
$codeBoxes.each(function(index, codeBox) {
//REGISTER ELEMENTS
var $codeBox = $(codeBox);
var $examples = $codeBox.find('.prettyprint');
var $firstItem = $($examples[0]);
var $header = $("<header class='code-box-header'></header>");
var $nav = $("<nav class='code-box-nav'></nav>");
var selectedName = '';
//HIDE/SHOW CONTENT
$examples.addClass('is-hidden');
$firstItem.removeClass('is-hidden');
//UPDATE NAV FOR EACH CODE BOX
$examples.each(function(index, example) {
var $example = $(example);
var name = $example.data('name');
var tabName = getTabName(name);
var selected = (index === 0) ? 'is-selected' : '';
var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + tabName + "</button>");
// ADD EVENTS FOR CODE SNIPPETS
$button.on('click', function(e) {
e.preventDefault();
var $currentButton = $(e.currentTarget);
var $buttons = $nav.find('.button');
var selectedName = $currentButton.data('name');
$buttons.removeClass('is-selected');
$currentButton.addClass('is-selected');
//UPDAT VIEW ON SELECTTION
$examples.addClass('is-hidden');
var $currentExample = $codeBox.find(".prettyprint[data-name='" + selectedName + "']");
$currentExample.removeClass('is-hidden').addClass('animated fadeIn');
});
$nav.append($button);
});
//ADD HEADER TO DOM
$header.append($nav);
$codeBox.prepend($header);
});
//FADEIN EXAMPLES
$codeBoxes.addClass('is-visible');
}
// TOGGLE CODE LANGUAGE
$scope.toggleCodeExample = function(event, name) {
event.preventDefault();
$scope.language = language;
};
/*
* Code Formatting
*
*/
var $codeBlocks = $('pre');
if($codeBlocks.length) {
$codeBlocks.each(function(index, codeEl) {
var $codeEl = $(codeEl);
if(!$codeEl.hasClass('prettyprint')) {
$codeEl.addClass('prettyprint linenums');
}
});
}
// BIO MODAL
$scope.showBio = function($event) {
var parentEl = angular.element(document.body);
var person = angular.element($event.currentTarget);
var name = person.attr('data-name');
var bio = person.attr('data-bio');
var pic = person.attr('data-pic');
var twitter = person.attr('data-twitter');
var website = person.attr('data-website');
var $twitter = twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' + person.attr('data-twitter') + '" md-button>Twitter</a>' : '';
var $website = website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + person.attr('data-website') + '" md-button>Website</a>' : '';
$mdDialog.show({
parent: parentEl,
targetEvent: $event,
template:
'<md-dialog class="modal" aria-label="List dialog">' +
' <md-content>' +
' <img class="left" src="' + pic + '" />' +
' <h3 class="text-headline">' + name + '</h3>' +
' <div class="modal-social">' + $twitter + $website + '</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
});
function DialogController(scope, $mdDialog, items) {
scope.items = items;
scope.closeDialog = function() {
$mdDialog.hide();
};
}
};
// INITIALIZE PRETTY PRINT
prettyPrint();
}]);

142
public/resources/js/vendor/lodash.js vendored Normal file
View File

@ -0,0 +1,142 @@
/**
* @license
* lodash 3.8.0 (Custom Build) lodash.com/license | Underscore.js 1.8.3 underscorejs.org/LICENSE
* Build: `lodash compat -o ./lodash.js`
*/
;(function(){function n(n,t){if(n!==t){var r=n===n,e=t===t;if(n>t||!r||n===w&&e)return 1;if(n<t||!e||t===w&&r)return-1}return 0}function t(n,t,r){for(var e=n.length,u=r?e:-1;r?u--:++u<e;)if(t(n[u],u,n))return u;return-1}function r(n,t,r){if(t!==t)return p(n,r);r-=1;for(var e=n.length;++r<e;)if(n[r]===t)return r;return-1}function e(n){return typeof n=="function"||false}function u(n){return typeof n=="string"?n:null==n?"":n+""}function o(n){return n.charCodeAt(0)}function i(n,t){for(var r=-1,e=n.length;++r<e&&-1<t.indexOf(n.charAt(r)););
return r}function a(n,t){for(var r=n.length;r--&&-1<t.indexOf(n.charAt(r)););return r}function f(t,r){return n(t.a,r.a)||t.b-r.b}function c(n){return Ln[n]}function l(n){return Pn[n]}function s(n){return"\\"+Mn[n]}function p(n,t,r){var e=n.length;for(t+=r?0:-1;r?t--:++t<e;){var u=n[t];if(u!==u)return t}return-1}function h(n){return!!n&&typeof n=="object"}function _(n){return 160>=n&&9<=n&&13>=n||32==n||160==n||5760==n||6158==n||8192<=n&&(8202>=n||8232==n||8233==n||8239==n||8287==n||12288==n||65279==n);
}function v(n,t){for(var r=-1,e=n.length,u=-1,o=[];++r<e;)n[r]===t&&(n[r]=P,o[++u]=r);return o}function g(n){for(var t=-1,r=n.length;++t<r&&_(n.charCodeAt(t)););return t}function y(n){for(var t=n.length;t--&&_(n.charCodeAt(t)););return t}function d(n){return zn[n]}function m(_){function Ln(n){if(h(n)&&!(Lo(n)||n instanceof Bn)){if(n instanceof zn)return n;if(He.call(n,"__chain__")&&He.call(n,"__wrapped__"))return zr(n)}return new zn(n)}function Pn(){}function zn(n,t,r){this.__wrapped__=n,this.__actions__=r||[],
this.__chain__=!!t}function Bn(n){this.__wrapped__=n,this.__actions__=null,this.__dir__=1,this.__filtered__=false,this.__iteratees__=null,this.__takeCount__=Cu,this.__views__=null}function Mn(){this.__data__={}}function Dn(n){var t=n?n.length:0;for(this.data={hash:bu(null),set:new hu};t--;)this.push(n[t])}function qn(n,t){var r=n.data;return(typeof t=="string"||he(t)?r.set.has(t):r.hash[t])?0:-1}function Kn(n,t){var r=-1,e=n.length;for(t||(t=Ne(e));++r<e;)t[r]=n[r];return t}function Vn(n,t){for(var r=-1,e=n.length;++r<e&&false!==t(n[r],r,n););
return n}function Yn(n,t){for(var r=-1,e=n.length;++r<e;)if(!t(n[r],r,n))return false;return true}function Xn(n,t){for(var r=-1,e=n.length,u=-1,o=[];++r<e;){var i=n[r];t(i,r,n)&&(o[++u]=i)}return o}function Hn(n,t){for(var r=-1,e=n.length,u=Ne(e);++r<e;)u[r]=t(n[r],r,n);return u}function Qn(n,t,r,e){var u=-1,o=n.length;for(e&&o&&(r=n[++u]);++u<o;)r=t(r,n[u],u,n);return r}function nt(n,t){for(var r=-1,e=n.length;++r<e;)if(t(n[r],r,n))return true;return false}function tt(n,t){return n===w?t:n}function rt(n,t,r,e){
return n!==w&&He.call(e,r)?n:t}function et(n,t,r){var e=Jo(t);lu.apply(e,Qu(t));for(var u=-1,o=e.length;++u<o;){var i=e[u],a=n[i],f=r(a,t[i],i,n,t);(f===f?f===a:a!==a)&&(a!==w||i in n)||(n[i]=f)}return n}function ut(n,t){for(var r=-1,e=null==n,u=!e&&Er(n),o=u&&n.length,i=t.length,a=Ne(i);++r<i;){var f=t[r];a[r]=u?kr(f,o)?n[f]:w:e?w:n[f]}return a}function ot(n,t,r){r||(r={});for(var e=-1,u=t.length;++e<u;){var o=t[e];r[o]=n[o]}return r}function it(n,t,r){var e=typeof n;return"function"==e?t===w?n:Bt(n,t,r):null==n?Ce:"object"==e?xt(n):t===w?Fe(n):At(n,t);
}function at(n,t,r,e,u,o,i){var a;if(r&&(a=u?r(n,e,u):r(n)),a!==w)return a;if(!he(n))return n;if(e=Lo(n)){if(a=xr(n),!t)return Kn(n,a)}else{var f=nu.call(n),c=f==K;if(f!=Y&&f!=z&&(!c||u))return Nn[f]?jr(n,f,t):u?n:{};if(Gn(n))return u?n:{};if(a=Ar(c?{}:n),!t)return Mu(a,n)}for(o||(o=[]),i||(i=[]),u=o.length;u--;)if(o[u]==n)return i[u];return o.push(n),i.push(a),(e?Vn:vt)(n,function(e,u){a[u]=at(e,t,r,u,n,o,i)}),a}function ft(n,t,r){if(typeof n!="function")throw new Ke(L);return _u(function(){n.apply(w,r);
},t)}function ct(n,t){var e=n?n.length:0,u=[];if(!e)return u;var o=-1,i=br(),a=i==r,f=a&&200<=t.length?Gu(t):null,c=t.length;f&&(i=qn,a=false,t=f);n:for(;++o<e;)if(f=n[o],a&&f===f){for(var l=c;l--;)if(t[l]===f)continue n;u.push(f)}else 0>i(t,f,0)&&u.push(f);return u}function lt(n,t){var r=true;return qu(n,function(n,e,u){return r=!!t(n,e,u)}),r}function st(n,t){var r=[];return qu(n,function(n,e,u){t(n,e,u)&&r.push(n)}),r}function pt(n,t,r,e){var u;return r(n,function(n,r,o){return t(n,r,o)?(u=e?r:n,false):void 0;
}),u}function ht(n,t,r){for(var e=-1,u=n.length,o=-1,i=[];++e<u;){var a=n[e];if(h(a)&&Er(a)&&(r||Lo(a)||le(a))){t&&(a=ht(a,t,r));for(var f=-1,c=a.length;++f<c;)i[++o]=a[f]}else r||(i[++o]=a)}return i}function _t(n,t){Vu(n,t,be)}function vt(n,t){return Vu(n,t,Jo)}function gt(n,t){return Yu(n,t,Jo)}function yt(n,t){for(var r=-1,e=t.length,u=-1,o=[];++r<e;){var i=t[r];zo(n[i])&&(o[++u]=i)}return o}function dt(n,t,r){if(null!=n){n=Lr(n),r!==w&&r in n&&(t=[r]),r=-1;for(var e=t.length;null!=n&&++r<e;)n=Lr(n)[t[r]];
return r&&r==e?n:w}}function mt(n,t,r,e,u,o){if(n===t)return true;var i=typeof n,a=typeof t;if("function"!=i&&"object"!=i&&"function"!=a&&"object"!=a||null==n||null==t)n=n!==n&&t!==t;else n:{var i=mt,a=Lo(n),f=Lo(t),c=B,l=B;a||(c=nu.call(n),c==z?c=Y:c!=Y&&(a=de(n))),f||(l=nu.call(t),l==z?l=Y:l!=Y&&de(t));var s=c==Y&&!Gn(n),f=l==Y&&!Gn(t),l=c==l;if(!l||a||s){if(!e&&(c=s&&He.call(n,"__wrapped__"),f=f&&He.call(t,"__wrapped__"),c||f)){n=i(c?n.value():n,f?t.value():t,r,e,u,o);break n}if(l){for(u||(u=[]),
o||(o=[]),c=u.length;c--;)if(u[c]==n){n=o[c]==t;break n}u.push(n),o.push(t),n=(a?gr:dr)(n,t,i,r,e,u,o),u.pop(),o.pop()}else n=false}else n=yr(n,t,c)}return n}function wt(n,t,r,e,u){for(var o=-1,i=t.length,a=!u;++o<i;)if(a&&e[o]?r[o]!==n[t[o]]:!(t[o]in n))return false;for(o=-1;++o<i;){var f=t[o],c=n[f],l=r[o];if(a&&e[o]?f=c!==w||f in n:(f=u?u(c,l,f):w,f===w&&(f=mt(l,c,u,true))),!f)return false}return true}function bt(n,t){var r=-1,e=Er(n)?Ne(n.length):[];return qu(n,function(n,u,o){e[++r]=t(n,u,o)}),e}function xt(n){
var t=Jo(n),r=t.length;if(!r)return Se(true);if(1==r){var e=t[0],u=n[e];if(Tr(u))return function(n){return null==n?false:(n=Lr(n),n[e]===u&&(u!==w||e in n))}}for(var o=Ne(r),i=Ne(r);r--;)u=n[t[r]],o[r]=u,i[r]=Tr(u);return function(n){return null!=n&&wt(Lr(n),t,o,i)}}function At(n,t){var r=Lo(n),e=Rr(n)&&Tr(t),u=n+"";return n=Pr(n),function(o){if(null==o)return false;var i=u;if(o=Lr(o),!(!r&&e||i in o)){if(o=1==n.length?o:dt(o,St(n,0,-1)),null==o)return false;i=Kr(n),o=Lr(o)}return o[i]===t?t!==w||i in o:mt(t,o[i],null,true);
}}function jt(n,t,r,e,u){if(!he(n))return n;var o=Er(t)&&(Lo(t)||de(t));if(!o){var i=Jo(t);lu.apply(i,Qu(t))}return Vn(i||t,function(a,f){if(i&&(f=a,a=t[f]),h(a)){e||(e=[]),u||(u=[]);n:{for(var c=f,l=e,s=u,p=l.length,_=t[c];p--;)if(l[p]==_){n[c]=s[p];break n}var p=n[c],v=r?r(p,_,c,n,t):w,g=v===w;g&&(v=_,Er(_)&&(Lo(_)||de(_))?v=Lo(p)?p:Er(p)?Kn(p):[]:Bo(_)||le(_)?v=le(p)?me(p):Bo(p)?p:{}:g=false),l.push(_),s.push(v),g?n[c]=jt(v,_,r,l,s):(v===v?v!==p:p===p)&&(n[c]=v)}}else c=n[f],l=r?r(c,a,f,n,t):w,(s=l===w)&&(l=a),
!o&&l===w||!s&&(l===l?l===c:c!==c)||(n[f]=l)}),n}function Ot(n){return function(t){return null==t?w:Lr(t)[n]}}function Et(n){var t=n+"";return n=Pr(n),function(r){return dt(r,n,t)}}function kt(n,t){for(var r=n?t.length:0;r--;){var e=parseFloat(t[r]);if(e!=u&&kr(e)){var u=e;vu.call(n,e,1)}}}function It(n,t){return n+au(Ru()*(t-n+1))}function Rt(n,t,r,e,u){return u(n,function(n,u,o){r=e?(e=false,n):t(r,n,u,o)}),r}function St(n,t,r){var e=-1,u=n.length;for(t=null==t?0:+t||0,0>t&&(t=-t>u?0:u+t),r=r===w||r>u?u:+r||0,
0>r&&(r+=u),u=t>r?0:r-t>>>0,t>>>=0,r=Ne(u);++e<u;)r[e]=n[e+t];return r}function Ct(n,t){var r;return qu(n,function(n,e,u){return r=t(n,e,u),!r}),!!r}function Tt(n,t){var r=n.length;for(n.sort(t);r--;)n[r]=n[r].c;return n}function Ut(t,r,e){var u=wr(),o=-1;return r=Hn(r,function(n){return u(n)}),t=bt(t,function(n){return{a:Hn(r,function(t){return t(n)}),b:++o,c:n}}),Tt(t,function(t,r){var u;n:{u=-1;for(var o=t.a,i=r.a,a=o.length,f=e.length;++u<a;){var c=n(o[u],i[u]);if(c){u=u<f?c*(e[u]?1:-1):c;break n;
}}u=t.b-r.b}return u})}function Wt(n,t){var r=0;return qu(n,function(n,e,u){r+=+t(n,e,u)||0}),r}function Ft(n,t){var e=-1,u=br(),o=n.length,i=u==r,a=i&&200<=o,f=a?Gu():null,c=[];f?(u=qn,i=false):(a=false,f=t?[]:c);n:for(;++e<o;){var l=n[e],s=t?t(l,e,n):l;if(i&&l===l){for(var p=f.length;p--;)if(f[p]===s)continue n;t&&f.push(s),c.push(l)}else 0>u(f,s,0)&&((t||a)&&f.push(s),c.push(l))}return c}function Nt(n,t){for(var r=-1,e=t.length,u=Ne(e);++r<e;)u[r]=n[t[r]];return u}function $t(n,t,r,e){for(var u=n.length,o=e?u:-1;(e?o--:++o<u)&&t(n[o],o,n););
return r?St(n,e?0:o,e?o+1:u):St(n,e?o+1:0,e?u:o)}function Lt(n,t){var r=n;r instanceof Bn&&(r=r.value());for(var e=-1,u=t.length;++e<u;){var r=[r],o=t[e];lu.apply(r,o.args),r=o.func.apply(o.thisArg,r)}return r}function Pt(n,t,r){var e=0,u=n?n.length:e;if(typeof t=="number"&&t===t&&u<=Wu){for(;e<u;){var o=e+u>>>1,i=n[o];(r?i<=t:i<t)?e=o+1:u=o}return u}return zt(n,t,Ce,r)}function zt(n,t,r,e){t=r(t);for(var u=0,o=n?n.length:0,i=t!==t,a=t===w;u<o;){var f=au((u+o)/2),c=r(n[f]),l=c===c;(i?l||e:a?l&&(e||c!==w):e?c<=t:c<t)?u=f+1:o=f;
}return Ou(o,Uu)}function Bt(n,t,r){if(typeof n!="function")return Ce;if(t===w)return n;switch(r){case 1:return function(r){return n.call(t,r)};case 3:return function(r,e,u){return n.call(t,r,e,u)};case 4:return function(r,e,u,o){return n.call(t,r,e,u,o)};case 5:return function(r,e,u,o,i){return n.call(t,r,e,u,o,i)}}return function(){return n.apply(t,arguments)}}function Mt(n){return uu.call(n,0)}function Dt(n,t,r){for(var e=r.length,u=-1,o=ju(n.length-e,0),i=-1,a=t.length,f=Ne(o+a);++i<a;)f[i]=t[i];
for(;++u<e;)f[r[u]]=n[u];for(;o--;)f[i++]=n[u++];return f}function qt(n,t,r){for(var e=-1,u=r.length,o=-1,i=ju(n.length-u,0),a=-1,f=t.length,c=Ne(i+f);++o<i;)c[o]=n[o];for(i=o;++a<f;)c[i+a]=t[a];for(;++e<u;)c[i+r[e]]=n[o++];return c}function Kt(n,t){return function(r,e,u){var o=t?t():{};if(e=wr(e,u,3),Lo(r)){u=-1;for(var i=r.length;++u<i;){var a=r[u];n(o,a,e(a,u,r),r)}}else qu(r,function(t,r,u){n(o,t,e(t,r,u),u)});return o}}function Vt(n){return ce(function(t,r){var e=-1,u=null==t?0:r.length,o=2<u&&r[u-2],i=2<u&&r[2],a=1<u&&r[u-1];
for(typeof o=="function"?(o=Bt(o,a,5),u-=2):(o=typeof a=="function"?a:null,u-=o?1:0),i&&Ir(r[0],r[1],i)&&(o=3>u?null:o,u=1);++e<u;)(i=r[e])&&n(t,i,o);return t})}function Yt(n,t){return function(r,e){var u=r?Hu(r):0;if(!Cr(u))return n(r,e);for(var o=t?u:-1,i=Lr(r);(t?o--:++o<u)&&false!==e(i[o],o,i););return r}}function Zt(n){return function(t,r,e){var u=Lr(t);e=e(t);for(var o=e.length,i=n?o:-1;n?i--:++i<o;){var a=e[i];if(false===r(u[a],a,u))break}return t}}function Gt(n,t){function r(){return(this&&this!==Zn&&this instanceof r?e:n).apply(t,arguments);
}var e=Xt(n);return r}function Jt(n){return function(t){var r=-1;t=Ie(Ae(t));for(var e=t.length,u="";++r<e;)u=n(u,t[r],r);return u}}function Xt(n){return function(){var t=Du(n.prototype),r=n.apply(t,arguments);return he(r)?r:t}}function Ht(n){function t(r,e,u){return u&&Ir(r,e,u)&&(e=null),r=vr(r,n,null,null,null,null,null,e),r.placeholder=t.placeholder,r}return t}function Qt(n,t){return function(r,e,u){u&&Ir(r,e,u)&&(e=null);var i=wr(),a=null==e;if(i===it&&a||(a=false,e=i(e,u,3)),a){if(e=Lo(r),e||!ye(r))return n(e?r:$r(r));
e=o}return mr(r,e,t)}}function nr(n,r){return function(e,u,o){return u=wr(u,o,3),Lo(e)?(u=t(e,u,r),-1<u?e[u]:w):pt(e,u,n)}}function tr(n){return function(r,e,u){return r&&r.length?(e=wr(e,u,3),t(r,e,n)):-1}}function rr(n){return function(t,r,e){return r=wr(r,e,3),pt(t,r,n,true)}}function er(n){return function(){var t=arguments.length;if(!t)return function(){return arguments[0]};for(var r,e=n?t:-1,u=0,o=Ne(t);n?e--:++e<t;){var i=o[u++]=arguments[e];if(typeof i!="function")throw new Ke(L);var a=r?"":Xu(i);
r="wrapper"==a?new zn([]):r}for(e=r?-1:t;++e<t;)i=o[e],a=Xu(i),r=(u="wrapper"==a?Ju(i):null)&&Sr(u[0])&&u[1]==(R|O|k|S)&&!u[4].length&&1==u[9]?r[Xu(u[0])].apply(r,u[3]):1==i.length&&Sr(i)?r[a]():r.thru(i);return function(){var n=arguments;if(r&&1==n.length&&Lo(n[0]))return r.plant(n[0]).value();for(var e=0,n=o[e].apply(this,n);++e<t;)n=o[e].call(this,n);return n}}}function ur(n,t){return function(r,e,u){return typeof e=="function"&&u===w&&Lo(r)?n(r,e):t(r,Bt(e,u,3))}}function or(n){return function(t,r,e){
return(typeof r!="function"||e!==w)&&(r=Bt(r,e,3)),n(t,r,be)}}function ir(n){return function(t,r,e){return(typeof r!="function"||e!==w)&&(r=Bt(r,e,3)),n(t,r)}}function ar(n){return function(t,r,e){var u={};return r=wr(r,e,3),vt(t,function(t,e,o){o=r(t,e,o),e=n?o:e,t=n?t:o,u[e]=t}),u}}function fr(n){return function(t,r,e){return t=u(t),(n?t:"")+pr(t,r,e)+(n?"":t)}}function cr(n){var t=ce(function(r,e){var u=v(e,t.placeholder);return vr(r,n,null,e,u)});return t}function lr(n,t){return function(r,e,u,o){
var i=3>arguments.length;return typeof e=="function"&&o===w&&Lo(r)?n(r,e,u,i):Rt(r,wr(e,o,4),u,i,t)}}function sr(n,t,r,e,u,o,i,a,f,c){function l(){for(var b=arguments.length,j=b,O=Ne(b);j--;)O[j]=arguments[j];if(e&&(O=Dt(O,e,u)),o&&(O=qt(O,o,i)),_||y){var j=l.placeholder,E=v(O,j),b=b-E.length;if(b<c){var R=a?Kn(a):null,b=ju(c-b,0),S=_?E:null,E=_?null:E,C=_?O:null,O=_?null:O;return t|=_?k:I,t&=~(_?I:k),g||(t&=~(x|A)),O=[n,t,r,C,S,O,E,R,f,b],R=sr.apply(w,O),Sr(n)&&no(R,O),R.placeholder=j,R}}if(j=p?r:this,
h&&(n=j[m]),a)for(R=O.length,b=Ou(a.length,R),S=Kn(O);b--;)E=a[b],O[b]=kr(E,R)?S[E]:w;return s&&f<O.length&&(O.length=f),(this&&this!==Zn&&this instanceof l?d||Xt(n):n).apply(j,O)}var s=t&R,p=t&x,h=t&A,_=t&O,g=t&j,y=t&E,d=!h&&Xt(n),m=n;return l}function pr(n,t,r){return n=n.length,t=+t,n<t&&xu(t)?(t-=n,r=null==r?" ":r+"",Ee(r,ou(t/r.length)).slice(0,t)):""}function hr(n,t,r,e){function u(){for(var t=-1,a=arguments.length,f=-1,c=e.length,l=Ne(a+c);++f<c;)l[f]=e[f];for(;a--;)l[f++]=arguments[++t];return(this&&this!==Zn&&this instanceof u?i:n).apply(o?r:this,l);
}var o=t&x,i=Xt(n);return u}function _r(n){return function(t,r,e,u){var o=wr(e);return o===it&&null==e?Pt(t,r,n):zt(t,r,o(e,u,1),n)}}function vr(n,t,r,e,u,o,i,a){var f=t&A;if(!f&&typeof n!="function")throw new Ke(L);var c=e?e.length:0;if(c||(t&=~(k|I),e=u=null),c-=u?u.length:0,t&I){var l=e,s=u;e=u=null}var p=f?null:Ju(n);return r=[n,t,r,e,u,l,s,o,i,a],p&&(e=r[1],t=p[1],a=e|t,u=t==R&&e==O||t==R&&e==S&&r[7].length<=p[8]||t==(R|S)&&e==O,(a<R||u)&&(t&x&&(r[2]=p[2],a|=e&x?0:j),(e=p[3])&&(u=r[3],r[3]=u?Dt(u,e,p[4]):Kn(e),
r[4]=u?v(r[3],P):Kn(p[4])),(e=p[5])&&(u=r[5],r[5]=u?qt(u,e,p[6]):Kn(e),r[6]=u?v(r[5],P):Kn(p[6])),(e=p[7])&&(r[7]=Kn(e)),t&R&&(r[8]=null==r[8]?p[8]:Ou(r[8],p[8])),null==r[9]&&(r[9]=p[9]),r[0]=p[0],r[1]=a),t=r[1],a=r[9]),r[9]=null==a?f?0:n.length:ju(a-c,0)||0,(p?Zu:no)(t==x?Gt(r[0],r[2]):t!=k&&t!=(x|k)||r[4].length?sr.apply(w,r):hr.apply(w,r),r)}function gr(n,t,r,e,u,o,i){var a=-1,f=n.length,c=t.length,l=true;if(f!=c&&(!u||c<=f))return false;for(;l&&++a<f;){var s=n[a],p=t[a],l=w;if(e&&(l=u?e(p,s,a):e(s,p,a)),
l===w)if(u)for(var h=c;h--&&(p=t[h],!(l=s&&s===p||r(s,p,e,u,o,i))););else l=s&&s===p||r(s,p,e,u,o,i)}return!!l}function yr(n,t,r){switch(r){case M:case D:return+n==+t;case q:return n.name==t.name&&n.message==t.message;case V:return n!=+n?t!=+t:n==+t;case Z:case G:return n==t+""}return false}function dr(n,t,r,e,u,o,i){var a=Jo(n),f=a.length,c=Jo(t).length;if(f!=c&&!u)return false;for(var c=u,l=-1;++l<f;){var s=a[l],p=u?s in t:He.call(t,s);if(p){var h=n[s],_=t[s],p=w;e&&(p=u?e(_,h,s):e(h,_,s)),p===w&&(p=h&&h===_||r(h,_,e,u,o,i));
}if(!p)return false;c||(c="constructor"==s)}return c||(r=n.constructor,e=t.constructor,!(r!=e&&"constructor"in n&&"constructor"in t)||typeof r=="function"&&r instanceof r&&typeof e=="function"&&e instanceof e)?true:false}function mr(n,t,r){var e=r?Cu:Su,u=e,o=u;return qu(n,function(n,i,a){i=t(n,i,a),((r?i<u:i>u)||i===e&&i===o)&&(u=i,o=n)}),o}function wr(n,t,r){var e=Ln.callback||Re,e=e===Re?it:e;return r?e(n,t,r):e}function br(n,t,e){var u=Ln.indexOf||qr,u=u===qr?r:u;return n?u(n,t,e):u}function xr(n){var t=n.length,r=new n.constructor(t);
return t&&"string"==typeof n[0]&&He.call(n,"index")&&(r.index=n.index,r.input=n.input),r}function Ar(n){return n=n.constructor,typeof n=="function"&&n instanceof n||(n=Me),new n}function jr(n,t,r){var e=n.constructor;switch(t){case J:return Mt(n);case M:case D:return new e(+n);case X:case H:case Q:case nn:case tn:case rn:case en:case un:case on:return e instanceof e&&(e=Pu[t]),t=n.buffer,new e(r?Mt(t):t,n.byteOffset,n.length);case V:case G:return new e(n);case Z:var u=new e(n.source,On.exec(n));u.lastIndex=n.lastIndex;
}return u}function Or(n,t,r){return null==n||Rr(t,n)||(t=Pr(t),n=1==t.length?n:dt(n,St(t,0,-1)),t=Kr(t)),t=null==n?n:n[t],null==t?w:t.apply(n,r)}function Er(n){return null!=n&&Cr(Hu(n))}function kr(n,t){return n=+n,t=null==t?Nu:t,-1<n&&0==n%1&&n<t}function Ir(n,t,r){if(!he(r))return false;var e=typeof t;return("number"==e?Er(r)&&kr(t,r.length):"string"==e&&t in r)?(t=r[t],n===n?n===t:t!==t):false}function Rr(n,t){var r=typeof n;return"string"==r&&dn.test(n)||"number"==r?true:Lo(n)?false:!yn.test(n)||null!=t&&n in Lr(t);
}function Sr(n){var t=Xu(n);return!!t&&n===Ln[t]&&t in Bn.prototype}function Cr(n){return typeof n=="number"&&-1<n&&0==n%1&&n<=Nu}function Tr(n){return n===n&&!he(n)}function Ur(n,t){n=Lr(n);for(var r=-1,e=t.length,u={};++r<e;){var o=t[r];o in n&&(u[o]=n[o])}return u}function Wr(n,t){var r={};return _t(n,function(n,e,u){t(n,e,u)&&(r[e]=n)}),r}function Fr(n){var t,r=Ln.support;if(!h(n)||nu.call(n)!=Y||Gn(n)||!(He.call(n,"constructor")||(t=n.constructor,typeof t!="function"||t instanceof t))||!r.argsTag&&le(n))return false;
var e;return r.ownLast?(_t(n,function(n,t,r){return e=He.call(r,t),false}),false!==e):(_t(n,function(n,t){e=t}),e===w||He.call(n,e))}function Nr(n){for(var t=be(n),r=t.length,e=r&&n.length,u=Ln.support,u=e&&Cr(e)&&(Lo(n)||u.nonEnumStrings&&ye(n)||u.nonEnumArgs&&le(n)),o=-1,i=[];++o<r;){var a=t[o];(u&&kr(a,e)||He.call(n,a))&&i.push(a)}return i}function $r(n){return null==n?[]:Er(n)?Ln.support.unindexedChars&&ye(n)?n.split(""):he(n)?n:Me(n):xe(n)}function Lr(n){if(Ln.support.unindexedChars&&ye(n)){for(var t=-1,r=n.length,e=Me(n);++t<r;)e[t]=n.charAt(t);
return e}return he(n)?n:Me(n)}function Pr(n){if(Lo(n))return n;var t=[];return u(n).replace(mn,function(n,r,e,u){t.push(e?u.replace(An,"$1"):r||n)}),t}function zr(n){return n instanceof Bn?n.clone():new zn(n.__wrapped__,n.__chain__,Kn(n.__actions__))}function Br(n,t,r){return n&&n.length?((r?Ir(n,t,r):null==t)&&(t=1),St(n,0>t?0:t)):[]}function Mr(n,t,r){var e=n?n.length:0;return e?((r?Ir(n,t,r):null==t)&&(t=1),t=e-(+t||0),St(n,0,0>t?0:t)):[]}function Dr(n){return n?n[0]:w}function qr(n,t,e){var u=n?n.length:0;
if(!u)return-1;if(typeof e=="number")e=0>e?ju(u+e,0):e;else if(e)return e=Pt(n,t),n=n[e],(t===t?t===n:n!==n)?e:-1;return r(n,t,e||0)}function Kr(n){var t=n?n.length:0;return t?n[t-1]:w}function Vr(n){return Br(n,1)}function Yr(n,t,e,u){if(!n||!n.length)return[];null!=t&&typeof t!="boolean"&&(u=e,e=Ir(n,t,u)?null:t,t=false);var o=wr();if((o!==it||null!=e)&&(e=o(e,u,3)),t&&br()==r){t=e;var i;e=-1,u=n.length;for(var o=-1,a=[];++e<u;){var f=n[e],c=t?t(f,e,n):f;e&&i===c||(i=c,a[++o]=f)}n=a}else n=Ft(n,e);
return n}function Zr(n){if(!n||!n.length)return[];var t=-1,r=0;n=Xn(n,function(n){return Er(n)?(r=ju(n.length,r),true):void 0});for(var e=Ne(r);++t<r;)e[t]=Hn(n,Ot(t));return e}function Gr(n,t,r){return n&&n.length?(n=Zr(n),null==t?n:(t=Bt(t,r,4),Hn(n,function(n){return Qn(n,t,w,true)}))):[]}function Jr(n,t){var r=-1,e=n?n.length:0,u={};for(!e||t||Lo(n[0])||(t=[]);++r<e;){var o=n[r];t?u[o]=t[r]:o&&(u[o[0]]=o[1])}return u}function Xr(n){return n=Ln(n),n.__chain__=true,n}function Hr(n,t,r){return t.call(r,n);
}function Qr(n,t,r){var e=Lo(n)?Yn:lt;return r&&Ir(n,t,r)&&(t=null),(typeof t!="function"||r!==w)&&(t=wr(t,r,3)),e(n,t)}function ne(n,t,r){var e=Lo(n)?Xn:st;return t=wr(t,r,3),e(n,t)}function te(n,t,r,e){var u=n?Hu(n):0;return Cr(u)||(n=xe(n),u=n.length),u?(r=typeof r!="number"||e&&Ir(t,r,e)?0:0>r?ju(u+r,0):r||0,typeof n=="string"||!Lo(n)&&ye(n)?r<u&&-1<n.indexOf(t,r):-1<br(n,t,r)):false}function re(n,t,r){var e=Lo(n)?Hn:bt;return t=wr(t,r,3),e(n,t)}function ee(n,t,r){return(r?Ir(n,t,r):null==t)?(n=$r(n),
t=n.length,0<t?n[It(0,t-1)]:w):(n=ue(n),n.length=Ou(0>t?0:+t||0,n.length),n)}function ue(n){n=$r(n);for(var t=-1,r=n.length,e=Ne(r);++t<r;){var u=It(0,t);t!=u&&(e[t]=e[u]),e[u]=n[t]}return e}function oe(n,t,r){var e=Lo(n)?nt:Ct;return r&&Ir(n,t,r)&&(t=null),(typeof t!="function"||r!==w)&&(t=wr(t,r,3)),e(n,t)}function ie(n,t){var r;if(typeof t!="function"){if(typeof n!="function")throw new Ke(L);var e=n;n=t,t=e}return function(){return 0<--n&&(r=t.apply(this,arguments)),1>=n&&(t=null),r}}function ae(n,t,r){
function e(){var r=t-(Oo()-c);0>=r||r>t?(a&&iu(a),r=p,a=s=p=w,r&&(h=Oo(),f=n.apply(l,i),s||a||(i=l=null))):s=_u(e,r)}function u(){s&&iu(s),a=s=p=w,(v||_!==t)&&(h=Oo(),f=n.apply(l,i),s||a||(i=l=null))}function o(){if(i=arguments,c=Oo(),l=this,p=v&&(s||!g),false===_)var r=g&&!s;else{a||g||(h=c);var o=_-(c-h),y=0>=o||o>_;y?(a&&(a=iu(a)),h=c,f=n.apply(l,i)):a||(a=_u(u,o))}return y&&s?s=iu(s):s||t===_||(s=_u(e,t)),r&&(y=true,f=n.apply(l,i)),!y||s||a||(i=l=null),f}var i,a,f,c,l,s,p,h=0,_=false,v=true;if(typeof n!="function")throw new Ke(L);
if(t=0>t?0:+t||0,true===r)var g=true,v=false;else he(r)&&(g=r.leading,_="maxWait"in r&&ju(+r.maxWait||0,t),v="trailing"in r?r.trailing:v);return o.cancel=function(){s&&iu(s),a&&iu(a),a=s=p=w},o}function fe(n,t){function r(){var e=arguments,u=r.cache,o=t?t.apply(this,e):e[0];return u.has(o)?u.get(o):(e=n.apply(this,e),u.set(o,e),e)}if(typeof n!="function"||t&&typeof t!="function")throw new Ke(L);return r.cache=new fe.Cache,r}function ce(n,t){if(typeof n!="function")throw new Ke(L);return t=ju(t===w?n.length-1:+t||0,0),
function(){for(var r=arguments,e=-1,u=ju(r.length-t,0),o=Ne(u);++e<u;)o[e]=r[t+e];switch(t){case 0:return n.call(this,o);case 1:return n.call(this,r[0],o);case 2:return n.call(this,r[0],r[1],o)}for(u=Ne(t+1),e=-1;++e<t;)u[e]=r[e];return u[t]=o,n.apply(this,u)}}function le(n){return h(n)&&Er(n)&&nu.call(n)==z}function se(n){return!!n&&1===n.nodeType&&h(n)&&(Ln.support.nodeTag?-1<nu.call(n).indexOf("Element"):Gn(n))}function pe(n){return h(n)&&typeof n.message=="string"&&nu.call(n)==q}function he(n){
var t=typeof n;return"function"==t||!!n&&"object"==t}function _e(n){return null==n?false:nu.call(n)==K?ru.test(Xe.call(n)):h(n)&&(Gn(n)?ru:kn).test(n)}function ve(n){return typeof n=="number"||h(n)&&nu.call(n)==V}function ge(n){return he(n)&&nu.call(n)==Z}function ye(n){return typeof n=="string"||h(n)&&nu.call(n)==G}function de(n){return h(n)&&Cr(n.length)&&!!Fn[nu.call(n)]}function me(n){return ot(n,be(n))}function we(n){return yt(n,be(n))}function be(n){if(null==n)return[];he(n)||(n=Me(n));for(var t=n.length,r=Ln.support,t=t&&Cr(t)&&(Lo(n)||r.nonEnumStrings&&ye(n)||r.nonEnumArgs&&le(n))&&t||0,e=n.constructor,u=-1,e=zo(e)&&e.prototype||Ze,o=e===n,i=Ne(t),a=0<t,f=r.enumErrorProps&&(n===Ye||n instanceof Le),c=r.enumPrototypes&&zo(n);++u<t;)i[u]=u+"";
for(var l in n)c&&"prototype"==l||f&&("message"==l||"name"==l)||a&&kr(l,t)||"constructor"==l&&(o||!He.call(n,l))||i.push(l);if(r.nonEnumShadows&&n!==Ze)for(t=n===Ge?G:n===Ye?q:nu.call(n),r=zu[t]||zu[Y],t==Y&&(e=Ze),t=Wn.length;t--;)l=Wn[t],u=r[l],o&&u||(u?!He.call(n,l):n[l]===e[l])||i.push(l);return i}function xe(n){return Nt(n,Jo(n))}function Ae(n){return(n=u(n))&&n.replace(In,c).replace(xn,"")}function je(n){return(n=u(n))&&bn.test(n)?n.replace(wn,"\\$&"):n}function Oe(n,t,r){return r&&Ir(n,t,r)&&(t=0),
Iu(n,t)}function Ee(n,t){var r="";if(n=u(n),t=+t,1>t||!n||!xu(t))return r;do t%2&&(r+=n),t=au(t/2),n+=n;while(t);return r}function ke(n,t,r){var e=n;return(n=u(n))?(r?Ir(e,t,r):null==t)?n.slice(g(n),y(n)+1):(t+="",n.slice(i(n,t),a(n,t)+1)):n}function Ie(n,t,r){return r&&Ir(n,t,r)&&(t=null),n=u(n),n.match(t||Cn)||[]}function Re(n,t,r){return r&&Ir(n,t,r)&&(t=null),h(n)?Te(n):it(n,t)}function Se(n){return function(){return n}}function Ce(n){return n}function Te(n){return xt(at(n,true))}function Ue(n,t,r){
if(null==r){var e=he(t),u=e&&Jo(t);((u=u&&u.length&&yt(t,u))?u.length:e)||(u=false,r=t,t=n,n=this)}u||(u=yt(t,Jo(t)));var o=true,e=-1,i=zo(n),a=u.length;false===r?o=false:he(r)&&"chain"in r&&(o=r.chain);for(;++e<a;){r=u[e];var f=t[r];n[r]=f,i&&(n.prototype[r]=function(t){return function(){var r=this.__chain__;if(o||r){var e=n(this.__wrapped__);return(e.__actions__=Kn(this.__actions__)).push({func:t,args:arguments,thisArg:n}),e.__chain__=r,e}return r=[this.value()],lu.apply(r,arguments),t.apply(n,r)}}(f))}return n;
}function We(){}function Fe(n){return Rr(n)?Ot(n):Et(n)}_=_?Jn.defaults(Zn.Object(),_,Jn.pick(Zn,Un)):Zn;var Ne=_.Array,$e=_.Date,Le=_.Error,Pe=_.Function,ze=_.Math,Be=_.Number,Me=_.Object,De=_.RegExp,qe=_.String,Ke=_.TypeError,Ve=Ne.prototype,Ye=Le.prototype,Ze=Me.prototype,Ge=qe.prototype,Je=(Je=_.window)&&Je.document,Xe=Pe.prototype.toString,He=Ze.hasOwnProperty,Qe=0,nu=Ze.toString,tu=_._,ru=De("^"+je(nu).replace(/toString|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),eu=_e(eu=_.ArrayBuffer)&&eu,uu=_e(uu=eu&&new eu(0).slice)&&uu,ou=ze.ceil,iu=_.clearTimeout,au=ze.floor,fu=_e(fu=Me.getOwnPropertySymbols)&&fu,cu=_e(cu=Me.getPrototypeOf)&&cu,lu=Ve.push,su=_e(su=Me.preventExtensions)&&su,pu=Ze.propertyIsEnumerable,hu=_e(hu=_.Set)&&hu,_u=_.setTimeout,vu=Ve.splice,gu=_e(gu=_.Uint8Array)&&gu,yu=_e(yu=_.WeakMap)&&yu,du=function(){
try{var n=_e(n=_.Float64Array)&&n,t=new n(new eu(10),0,1)&&n}catch(r){}return t}(),mu=function(){var n=su&&_e(n=Me.assign)&&n;try{if(n){var t=su({1:0});t[0]=1}}catch(r){try{n(t,"xo")}catch(e){}return!t[1]&&n}return false}(),wu=_e(wu=Ne.isArray)&&wu,bu=_e(bu=Me.create)&&bu,xu=_.isFinite,Au=_e(Au=Me.keys)&&Au,ju=ze.max,Ou=ze.min,Eu=_e(Eu=$e.now)&&Eu,ku=_e(ku=Be.isFinite)&&ku,Iu=_.parseInt,Ru=ze.random,Su=Be.NEGATIVE_INFINITY,Cu=Be.POSITIVE_INFINITY,Tu=ze.pow(2,32)-1,Uu=Tu-1,Wu=Tu>>>1,Fu=du?du.BYTES_PER_ELEMENT:0,Nu=ze.pow(2,53)-1,$u=yu&&new yu,Lu={},Pu={};
Pu[X]=_.Float32Array,Pu[H]=_.Float64Array,Pu[Q]=_.Int8Array,Pu[nn]=_.Int16Array,Pu[tn]=_.Int32Array,Pu[rn]=_.Uint8Array,Pu[en]=_.Uint8ClampedArray,Pu[un]=_.Uint16Array,Pu[on]=_.Uint32Array;var zu={};zu[B]=zu[D]=zu[V]={constructor:true,toLocaleString:true,toString:true,valueOf:true},zu[M]=zu[G]={constructor:true,toString:true,valueOf:true},zu[q]=zu[K]=zu[Z]={constructor:true,toString:true},zu[Y]={constructor:true},Vn(Wn,function(n){for(var t in zu)if(He.call(zu,t)){var r=zu[t];r[n]=He.call(r,n)}});var Bu=Ln.support={};
!function(n){function t(){this.x=n}var r=arguments,e={0:n,length:n},u=[];t.prototype={valueOf:n,y:n};for(var o in new t)u.push(o);Bu.argsTag=nu.call(r)==z,Bu.enumErrorProps=pu.call(Ye,"message")||pu.call(Ye,"name"),Bu.enumPrototypes=pu.call(t,"prototype"),Bu.funcDecomp=/\bthis\b/.test(function(){return this}),Bu.funcNames=typeof Pe.name=="string",Bu.nodeTag=nu.call(Je)!=Y,Bu.nonEnumStrings=!pu.call("x",0),Bu.nonEnumShadows=!/valueOf/.test(u),Bu.ownLast="x"!=u[0],Bu.spliceObjects=(vu.call(e,0,1),!e[0]),
Bu.unindexedChars="xx"!="x"[0]+Me("x")[0];try{Bu.dom=11===Je.createDocumentFragment().nodeType}catch(i){Bu.dom=false}try{Bu.nonEnumArgs=!pu.call(r,1)}catch(a){Bu.nonEnumArgs=true}}(1,0),Ln.templateSettings={escape:_n,evaluate:vn,interpolate:gn,variable:"",imports:{_:Ln}};var Mu=mu||function(n,t){return null==t?n:ot(t,Qu(t),ot(t,Jo(t),n))},Du=function(){function n(){}return function(t){if(he(t)){n.prototype=t;var r=new n;n.prototype=null}return r||_.Object()}}(),qu=Yt(vt),Ku=Yt(gt,true),Vu=Zt(),Yu=Zt(true),Zu=$u?function(n,t){
return $u.set(n,t),n}:Ce;uu||(Mt=eu&&gu?function(n){var t=n.byteLength,r=du?au(t/Fu):0,e=r*Fu,u=new eu(t);if(r){var o=new du(u,0,r);o.set(new du(n,0,r))}return t!=e&&(o=new gu(u,e),o.set(new gu(n,e))),u}:Se(null));var Gu=bu&&hu?function(n){return new Dn(n)}:Se(null),Ju=$u?function(n){return $u.get(n)}:We,Xu=function(){return Bu.funcNames?"constant"==Se.name?Ot("name"):function(n){for(var t=n.name,r=Lu[t],e=r?r.length:0;e--;){var u=r[e],o=u.func;if(null==o||o==n)return u.name}return t}:Se("")}(),Hu=Ot("length"),Qu=fu?function(n){
return fu(Lr(n))}:Se([]),no=function(){var n=0,t=0;return function(r,e){var u=Oo(),o=W-(u-t);if(t=u,0<o){if(++n>=U)return r}else n=0;return Zu(r,e)}}(),to=ce(function(n,t){return Er(n)?ct(n,ht(t,false,true)):[]}),ro=tr(),eo=tr(true),uo=ce(function(t,r){r=ht(r);var e=ut(t,r);return kt(t,r.sort(n)),e}),oo=_r(),io=_r(true),ao=ce(function(n){return Ft(ht(n,false,true))}),fo=ce(function(n,t){return Er(n)?ct(n,t):[]}),co=ce(Zr),lo=ce(function(n){var t=n.length,r=n[t-2],e=n[t-1];return 2<t&&typeof r=="function"?t-=2:(r=1<t&&typeof e=="function"?(--t,
e):w,e=w),n.length=t,Gr(n,r,e)}),so=ce(function(n,t){return Er(n)&&(n=$r(n)),ut(n,ht(t))}),po=Kt(function(n,t,r){He.call(n,r)?++n[r]:n[r]=1}),ho=nr(qu),_o=nr(Ku,true),vo=ur(Vn,qu),go=ur(function(n,t){for(var r=n.length;r--&&false!==t(n[r],r,n););return n},Ku),yo=Kt(function(n,t,r){He.call(n,r)?n[r].push(t):n[r]=[t]}),mo=Kt(function(n,t,r){n[r]=t}),wo=ce(function(n,t,r){var e=-1,u=typeof t=="function",o=Rr(t),i=Er(n)?Ne(n.length):[];return qu(n,function(n){var a=u?t:o&&null!=n&&n[t];i[++e]=a?a.apply(n,r):Or(n,t,r);
}),i}),bo=Kt(function(n,t,r){n[r?0:1].push(t)},function(){return[[],[]]}),xo=lr(Qn,qu),Ao=lr(function(n,t,r,e){var u=n.length;for(e&&u&&(r=n[--u]);u--;)r=t(r,n[u],u,n);return r},Ku),jo=ce(function(n,t){if(null==n)return[];var r=t[2];return r&&Ir(t[0],t[1],r)&&(t.length=1),Ut(n,ht(t),[])}),Oo=Eu||function(){return(new $e).getTime()},Eo=ce(function(n,t,r){var e=x;if(r.length)var u=v(r,Eo.placeholder),e=e|k;return vr(n,e,t,r,u)}),ko=ce(function(n,t){t=t.length?ht(t):we(n);for(var r=-1,e=t.length;++r<e;){
var u=t[r];n[u]=vr(n[u],x,n)}return n}),Io=ce(function(n,t,r){var e=x|A;if(r.length)var u=v(r,Io.placeholder),e=e|k;return vr(t,e,n,r,u)}),Ro=Ht(O),So=Ht(E),Co=ce(function(n,t){return ft(n,1,t)}),To=ce(function(n,t,r){return ft(n,t,r)}),Uo=er(),Wo=er(true),Fo=cr(k),No=cr(I),$o=ce(function(n,t){return vr(n,S,null,null,null,ht(t))});Bu.argsTag||(le=function(n){return h(n)&&Er(n)&&He.call(n,"callee")&&!pu.call(n,"callee")});var Lo=wu||function(n){return h(n)&&Cr(n.length)&&nu.call(n)==B};Bu.dom||(se=function(n){
return!!n&&1===n.nodeType&&h(n)&&!Bo(n)});var Po=ku||function(n){return typeof n=="number"&&xu(n)},zo=e(/x/)||gu&&!e(gu)?function(n){return nu.call(n)==K}:e,Bo=cu?function(n){if(!n||nu.call(n)!=Y||!Ln.support.argsTag&&le(n))return false;var t=n.valueOf,r=_e(t)&&(r=cu(t))&&cu(r);return r?n==r||cu(n)==r:Fr(n)}:Fr,Mo=Vt(function(n,t,r){return r?et(n,t,r):Mu(n,t)}),Do=ce(function(n){var t=n[0];return null==t?t:(n.push(tt),Mo.apply(w,n))}),qo=rr(vt),Ko=rr(gt),Vo=or(Vu),Yo=or(Yu),Zo=ir(vt),Go=ir(gt),Jo=Au?function(n){
var t=null!=n&&n.constructor;return typeof t=="function"&&t.prototype===n||(typeof n=="function"?Ln.support.enumPrototypes:Er(n))?Nr(n):he(n)?Au(n):[]}:Nr,Xo=ar(true),Ho=ar(),Qo=Vt(jt),ni=ce(function(n,t){if(null==n)return{};if("function"!=typeof t[0])return t=Hn(ht(t),qe),Ur(n,ct(be(n),t));var r=Bt(t[0],t[1],3);return Wr(n,function(n,t,e){return!r(n,t,e)})}),ti=ce(function(n,t){return null==n?{}:"function"==typeof t[0]?Wr(n,Bt(t[0],t[1],3)):Ur(n,ht(t))}),ri=Jt(function(n,t,r){return t=t.toLowerCase(),
n+(r?t.charAt(0).toUpperCase()+t.slice(1):t)}),ei=Jt(function(n,t,r){return n+(r?"-":"")+t.toLowerCase()}),ui=fr(),oi=fr(true);8!=Iu(Tn+"08")&&(Oe=function(n,t,r){return(r?Ir(n,t,r):null==t)?t=0:t&&(t=+t),n=ke(n),Iu(n,t||(En.test(n)?16:10))});var ii=Jt(function(n,t,r){return n+(r?"_":"")+t.toLowerCase()}),ai=Jt(function(n,t,r){return n+(r?" ":"")+(t.charAt(0).toUpperCase()+t.slice(1))}),fi=ce(function(n,t){try{return n.apply(w,t)}catch(r){return pe(r)?r:new Le(r)}}),ci=ce(function(n,t){return function(r){
return Or(r,n,t)}}),li=ce(function(n,t){return function(r){return Or(n,r,t)}}),si=Qt(function(n){for(var t=-1,r=n.length,e=Su;++t<r;){var u=n[t];u>e&&(e=u)}return e}),pi=Qt(function(n){for(var t=-1,r=n.length,e=Cu;++t<r;){var u=n[t];u<e&&(e=u)}return e},true);return Ln.prototype=Pn.prototype,zn.prototype=Du(Pn.prototype),zn.prototype.constructor=zn,Bn.prototype=Du(Pn.prototype),Bn.prototype.constructor=Bn,Mn.prototype["delete"]=function(n){return this.has(n)&&delete this.__data__[n]},Mn.prototype.get=function(n){
return"__proto__"==n?w:this.__data__[n]},Mn.prototype.has=function(n){return"__proto__"!=n&&He.call(this.__data__,n)},Mn.prototype.set=function(n,t){return"__proto__"!=n&&(this.__data__[n]=t),this},Dn.prototype.push=function(n){var t=this.data;typeof n=="string"||he(n)?t.set.add(n):t.hash[n]=true},fe.Cache=Mn,Ln.after=function(n,t){if(typeof t!="function"){if(typeof n!="function")throw new Ke(L);var r=n;n=t,t=r}return n=xu(n=+n)?n:0,function(){return 1>--n?t.apply(this,arguments):void 0}},Ln.ary=function(n,t,r){
return r&&Ir(n,t,r)&&(t=null),t=n&&null==t?n.length:ju(+t||0,0),vr(n,R,null,null,null,null,t)},Ln.assign=Mo,Ln.at=so,Ln.before=ie,Ln.bind=Eo,Ln.bindAll=ko,Ln.bindKey=Io,Ln.callback=Re,Ln.chain=Xr,Ln.chunk=function(n,t,r){t=(r?Ir(n,t,r):null==t)?1:ju(+t||1,1),r=0;for(var e=n?n.length:0,u=-1,o=Ne(ou(e/t));r<e;)o[++u]=St(n,r,r+=t);return o},Ln.compact=function(n){for(var t=-1,r=n?n.length:0,e=-1,u=[];++t<r;){var o=n[t];o&&(u[++e]=o)}return u},Ln.constant=Se,Ln.countBy=po,Ln.create=function(n,t,r){var e=Du(n);
return r&&Ir(n,t,r)&&(t=null),t?Mu(e,t):e},Ln.curry=Ro,Ln.curryRight=So,Ln.debounce=ae,Ln.defaults=Do,Ln.defer=Co,Ln.delay=To,Ln.difference=to,Ln.drop=Br,Ln.dropRight=Mr,Ln.dropRightWhile=function(n,t,r){return n&&n.length?$t(n,wr(t,r,3),true,true):[]},Ln.dropWhile=function(n,t,r){return n&&n.length?$t(n,wr(t,r,3),true):[]},Ln.fill=function(n,t,r,e){var u=n?n.length:0;if(!u)return[];for(r&&typeof r!="number"&&Ir(n,t,r)&&(r=0,e=u),u=n.length,r=null==r?0:+r||0,0>r&&(r=-r>u?0:u+r),e=e===w||e>u?u:+e||0,0>e&&(e+=u),
u=r>e?0:e>>>0,r>>>=0;r<u;)n[r++]=t;return n},Ln.filter=ne,Ln.flatten=function(n,t,r){var e=n?n.length:0;return r&&Ir(n,t,r)&&(t=false),e?ht(n,t):[]},Ln.flattenDeep=function(n){return n&&n.length?ht(n,true):[]},Ln.flow=Uo,Ln.flowRight=Wo,Ln.forEach=vo,Ln.forEachRight=go,Ln.forIn=Vo,Ln.forInRight=Yo,Ln.forOwn=Zo,Ln.forOwnRight=Go,Ln.functions=we,Ln.groupBy=yo,Ln.indexBy=mo,Ln.initial=function(n){return Mr(n,1)},Ln.intersection=function(){for(var n=[],t=-1,e=arguments.length,u=[],o=br(),i=o==r,a=[];++t<e;){
var f=arguments[t];Er(f)&&(n.push(f),u.push(i&&120<=f.length?Gu(t&&f):null))}if(e=n.length,2>e)return a;var i=n[0],c=-1,l=i?i.length:0,s=u[0];n:for(;++c<l;)if(f=i[c],0>(s?qn(s,f):o(a,f,0))){for(t=e;--t;){var p=u[t];if(0>(p?qn(p,f):o(n[t],f,0)))continue n}s&&s.push(f),a.push(f)}return a},Ln.invert=function(n,t,r){r&&Ir(n,t,r)&&(t=null),r=-1;for(var e=Jo(n),u=e.length,o={};++r<u;){var i=e[r],a=n[i];t?He.call(o,a)?o[a].push(i):o[a]=[i]:o[a]=i}return o},Ln.invoke=wo,Ln.keys=Jo,Ln.keysIn=be,Ln.map=re,
Ln.mapKeys=Xo,Ln.mapValues=Ho,Ln.matches=Te,Ln.matchesProperty=function(n,t){return At(n,at(t,true))},Ln.memoize=fe,Ln.merge=Qo,Ln.method=ci,Ln.methodOf=li,Ln.mixin=Ue,Ln.negate=function(n){if(typeof n!="function")throw new Ke(L);return function(){return!n.apply(this,arguments)}},Ln.omit=ni,Ln.once=function(n){return ie(2,n)},Ln.pairs=function(n){for(var t=-1,r=Jo(n),e=r.length,u=Ne(e);++t<e;){var o=r[t];u[t]=[o,n[o]]}return u},Ln.partial=Fo,Ln.partialRight=No,Ln.partition=bo,Ln.pick=ti,Ln.pluck=function(n,t){
return re(n,Fe(t))},Ln.property=Fe,Ln.propertyOf=function(n){return function(t){return dt(n,Pr(t),t+"")}},Ln.pull=function(){var n=arguments,t=n[0];if(!t||!t.length)return t;for(var r=0,e=br(),u=n.length;++r<u;)for(var o=0,i=n[r];-1<(o=e(t,i,o));)vu.call(t,o,1);return t},Ln.pullAt=uo,Ln.range=function(n,t,r){r&&Ir(n,t,r)&&(t=r=null),n=+n||0,r=null==r?1:+r||0,null==t?(t=n,n=0):t=+t||0;var e=-1;t=ju(ou((t-n)/(r||1)),0);for(var u=Ne(t);++e<t;)u[e]=n,n+=r;return u},Ln.rearg=$o,Ln.reject=function(n,t,r){
var e=Lo(n)?Xn:st;return t=wr(t,r,3),e(n,function(n,r,e){return!t(n,r,e)})},Ln.remove=function(n,t,r){var e=[];if(!n||!n.length)return e;var u=-1,o=[],i=n.length;for(t=wr(t,r,3);++u<i;)r=n[u],t(r,u,n)&&(e.push(r),o.push(u));return kt(n,o),e},Ln.rest=Vr,Ln.restParam=ce,Ln.set=function(n,t,r){if(null==n)return n;var e=t+"";t=null!=n[e]||Rr(t,n)?[e]:Pr(t);for(var e=-1,u=t.length,o=u-1,i=n;null!=i&&++e<u;){var a=t[e];he(i)&&(e==o?i[a]=r:null==i[a]&&(i[a]=kr(t[e+1])?[]:{})),i=i[a]}return n},Ln.shuffle=ue,
Ln.slice=function(n,t,r){var e=n?n.length:0;return e?(r&&typeof r!="number"&&Ir(n,t,r)&&(t=0,r=e),St(n,t,r)):[]},Ln.sortBy=function(n,t,r){if(null==n)return[];r&&Ir(n,t,r)&&(t=null);var e=-1;return t=wr(t,r,3),n=bt(n,function(n,r,u){return{a:t(n,r,u),b:++e,c:n}}),Tt(n,f)},Ln.sortByAll=jo,Ln.sortByOrder=function(n,t,r,e){return null==n?[]:(e&&Ir(t,r,e)&&(r=null),Lo(t)||(t=null==t?[]:[t]),Lo(r)||(r=null==r?[]:[r]),Ut(n,t,r))},Ln.spread=function(n){if(typeof n!="function")throw new Ke(L);return function(t){
return n.apply(this,t)}},Ln.take=function(n,t,r){return n&&n.length?((r?Ir(n,t,r):null==t)&&(t=1),St(n,0,0>t?0:t)):[]},Ln.takeRight=function(n,t,r){var e=n?n.length:0;return e?((r?Ir(n,t,r):null==t)&&(t=1),t=e-(+t||0),St(n,0>t?0:t)):[]},Ln.takeRightWhile=function(n,t,r){return n&&n.length?$t(n,wr(t,r,3),false,true):[]},Ln.takeWhile=function(n,t,r){return n&&n.length?$t(n,wr(t,r,3)):[]},Ln.tap=function(n,t,r){return t.call(r,n),n},Ln.throttle=function(n,t,r){var e=true,u=true;if(typeof n!="function")throw new Ke(L);
return false===r?e=false:he(r)&&(e="leading"in r?!!r.leading:e,u="trailing"in r?!!r.trailing:u),$n.leading=e,$n.maxWait=+t,$n.trailing=u,ae(n,t,$n)},Ln.thru=Hr,Ln.times=function(n,t,r){if(n=au(n),1>n||!xu(n))return[];var e=-1,u=Ne(Ou(n,Tu));for(t=Bt(t,r,1);++e<n;)e<Tu?u[e]=t(e):t(e);return u},Ln.toArray=function(n){var t=n?Hu(n):0;return Cr(t)?t?Ln.support.unindexedChars&&ye(n)?n.split(""):Kn(n):[]:xe(n)},Ln.toPlainObject=me,Ln.transform=function(n,t,r,e){var u=Lo(n)||de(n);return t=wr(t,e,4),null==r&&(u||he(n)?(e=n.constructor,
r=u?Lo(n)?new e:[]:Du(zo(e)&&e.prototype)):r={}),(u?Vn:vt)(n,function(n,e,u){return t(r,n,e,u)}),r},Ln.union=ao,Ln.uniq=Yr,Ln.unzip=Zr,Ln.unzipWith=Gr,Ln.values=xe,Ln.valuesIn=function(n){return Nt(n,be(n))},Ln.where=function(n,t){return ne(n,xt(t))},Ln.without=fo,Ln.wrap=function(n,t){return t=null==t?Ce:t,vr(t,k,null,[n],[])},Ln.xor=function(){for(var n=-1,t=arguments.length;++n<t;){var r=arguments[n];if(Er(r))var e=e?ct(e,r).concat(ct(r,e)):r}return e?Ft(e):[]},Ln.zip=co,Ln.zipObject=Jr,Ln.zipWith=lo,
Ln.backflow=Wo,Ln.collect=re,Ln.compose=Wo,Ln.each=vo,Ln.eachRight=go,Ln.extend=Mo,Ln.iteratee=Re,Ln.methods=we,Ln.object=Jr,Ln.select=ne,Ln.tail=Vr,Ln.unique=Yr,Ue(Ln,Ln),Ln.add=function(n,t){return(+n||0)+(+t||0)},Ln.attempt=fi,Ln.camelCase=ri,Ln.capitalize=function(n){return(n=u(n))&&n.charAt(0).toUpperCase()+n.slice(1)},Ln.clone=function(n,t,r,e){return t&&typeof t!="boolean"&&Ir(n,t,r)?t=false:typeof t=="function"&&(e=r,r=t,t=false),r=typeof r=="function"&&Bt(r,e,1),at(n,t,r)},Ln.cloneDeep=function(n,t,r){
return t=typeof t=="function"&&Bt(t,r,1),at(n,true,t)},Ln.deburr=Ae,Ln.endsWith=function(n,t,r){n=u(n),t+="";var e=n.length;return r=r===w?e:Ou(0>r?0:+r||0,e),r-=t.length,0<=r&&n.indexOf(t,r)==r},Ln.escape=function(n){return(n=u(n))&&hn.test(n)?n.replace(sn,l):n},Ln.escapeRegExp=je,Ln.every=Qr,Ln.find=ho,Ln.findIndex=ro,Ln.findKey=qo,Ln.findLast=_o,Ln.findLastIndex=eo,Ln.findLastKey=Ko,Ln.findWhere=function(n,t){return ho(n,xt(t))},Ln.first=Dr,Ln.get=function(n,t,r){return n=null==n?w:dt(n,Pr(t),t+""),
n===w?r:n},Ln.has=function(n,t){if(null==n)return false;var r=He.call(n,t);return r||Rr(t)||(t=Pr(t),n=1==t.length?n:dt(n,St(t,0,-1)),t=Kr(t),r=null!=n&&He.call(n,t)),r||Ln.support.nonEnumStrings&&ye(n)&&kr(t,n.length)},Ln.identity=Ce,Ln.includes=te,Ln.indexOf=qr,Ln.inRange=function(n,t,r){return t=+t||0,"undefined"===typeof r?(r=t,t=0):r=+r||0,n>=Ou(t,r)&&n<ju(t,r)},Ln.isArguments=le,Ln.isArray=Lo,Ln.isBoolean=function(n){return true===n||false===n||h(n)&&nu.call(n)==M},Ln.isDate=function(n){return h(n)&&nu.call(n)==D;
},Ln.isElement=se,Ln.isEmpty=function(n){return null==n?true:Er(n)&&(Lo(n)||ye(n)||le(n)||h(n)&&zo(n.splice))?!n.length:!Jo(n).length},Ln.isEqual=function(n,t,r,e){return r=typeof r=="function"&&Bt(r,e,3),!r&&Tr(n)&&Tr(t)?n===t:(e=r?r(n,t):w,e===w?mt(n,t,r):!!e)},Ln.isError=pe,Ln.isFinite=Po,Ln.isFunction=zo,Ln.isMatch=function(n,t,r,e){var u=Jo(t),o=u.length;if(!o)return true;if(null==n)return false;if(r=typeof r=="function"&&Bt(r,e,3),n=Lr(n),!r&&1==o){var i=u[0];if(e=t[i],Tr(e))return e===n[i]&&(e!==w||i in n);
}for(var i=Ne(o),a=Ne(o);o--;)e=i[o]=t[u[o]],a[o]=Tr(e);return wt(n,u,i,a,r)},Ln.isNaN=function(n){return ve(n)&&n!=+n},Ln.isNative=_e,Ln.isNull=function(n){return null===n},Ln.isNumber=ve,Ln.isObject=he,Ln.isPlainObject=Bo,Ln.isRegExp=ge,Ln.isString=ye,Ln.isTypedArray=de,Ln.isUndefined=function(n){return n===w},Ln.kebabCase=ei,Ln.last=Kr,Ln.lastIndexOf=function(n,t,r){var e=n?n.length:0;if(!e)return-1;var u=e;if(typeof r=="number")u=(0>r?ju(e+r,0):Ou(r||0,e-1))+1;else if(r)return u=Pt(n,t,true)-1,
n=n[u],(t===t?t===n:n!==n)?u:-1;if(t!==t)return p(n,u,true);for(;u--;)if(n[u]===t)return u;return-1},Ln.max=si,Ln.min=pi,Ln.noConflict=function(){return _._=tu,this},Ln.noop=We,Ln.now=Oo,Ln.pad=function(n,t,r){n=u(n),t=+t;var e=n.length;return e<t&&xu(t)?(e=(t-e)/2,t=au(e),e=ou(e),r=pr("",e,r),r.slice(0,t)+n+r):n},Ln.padLeft=ui,Ln.padRight=oi,Ln.parseInt=Oe,Ln.random=function(n,t,r){r&&Ir(n,t,r)&&(t=r=null);var e=null==n,u=null==t;return null==r&&(u&&typeof n=="boolean"?(r=n,n=1):typeof t=="boolean"&&(r=t,
u=true)),e&&u&&(t=1,u=false),n=+n||0,u?(t=n,n=0):t=+t||0,r||n%1||t%1?(r=Ru(),Ou(n+r*(t-n+parseFloat("1e-"+((r+"").length-1))),t)):It(n,t)},Ln.reduce=xo,Ln.reduceRight=Ao,Ln.repeat=Ee,Ln.result=function(n,t,r){var e=null==n?w:Lr(n)[t];return e===w&&(null==n||Rr(t,n)||(t=Pr(t),n=1==t.length?n:dt(n,St(t,0,-1)),e=null==n?w:Lr(n)[Kr(t)]),e=e===w?r:e),zo(e)?e.call(n):e},Ln.runInContext=m,Ln.size=function(n){var t=n?Hu(n):0;return Cr(t)?t:Jo(n).length},Ln.snakeCase=ii,Ln.some=oe,Ln.sortedIndex=oo,Ln.sortedLastIndex=io,
Ln.startCase=ai,Ln.startsWith=function(n,t,r){return n=u(n),r=null==r?0:Ou(0>r?0:+r||0,n.length),n.lastIndexOf(t,r)==r},Ln.sum=function(n,t,r){r&&Ir(n,t,r)&&(t=null);var e=wr(),u=null==t;if(e===it&&u||(u=false,t=e(t,r,3)),u){for(n=Lo(n)?n:$r(n),t=n.length,r=0;t--;)r+=+n[t]||0;n=r}else n=Wt(n,t);return n},Ln.template=function(n,t,r){var e=Ln.templateSettings;r&&Ir(n,t,r)&&(t=r=null),n=u(n),t=et(Mu({},r||t),e,rt),r=et(Mu({},t.imports),e.imports,rt);var o,i,a=Jo(r),f=Nt(r,a),c=0;r=t.interpolate||Rn;var l="__p+='";
r=De((t.escape||Rn).source+"|"+r.source+"|"+(r===gn?jn:Rn).source+"|"+(t.evaluate||Rn).source+"|$","g");var p="sourceURL"in t?"//# sourceURL="+t.sourceURL+"\n":"";if(n.replace(r,function(t,r,e,u,a,f){return e||(e=u),l+=n.slice(c,f).replace(Sn,s),r&&(o=true,l+="'+__e("+r+")+'"),a&&(i=true,l+="';"+a+";\n__p+='"),e&&(l+="'+((__t=("+e+"))==null?'':__t)+'"),c=f+t.length,t}),l+="';",(t=t.variable)||(l="with(obj){"+l+"}"),l=(i?l.replace(an,""):l).replace(fn,"$1").replace(cn,"$1;"),l="function("+(t||"obj")+"){"+(t?"":"obj||(obj={});")+"var __t,__p=''"+(o?",__e=_.escape":"")+(i?",__j=Array.prototype.join;function print(){__p+=__j.call(arguments,'')}":";")+l+"return __p}",
t=fi(function(){return Pe(a,p+"return "+l).apply(w,f)}),t.source=l,pe(t))throw t;return t},Ln.trim=ke,Ln.trimLeft=function(n,t,r){var e=n;return(n=u(n))?n.slice((r?Ir(e,t,r):null==t)?g(n):i(n,t+"")):n},Ln.trimRight=function(n,t,r){var e=n;return(n=u(n))?(r?Ir(e,t,r):null==t)?n.slice(0,y(n)+1):n.slice(0,a(n,t+"")+1):n},Ln.trunc=function(n,t,r){r&&Ir(n,t,r)&&(t=null);var e=C;if(r=T,null!=t)if(he(t)){var o="separator"in t?t.separator:o,e="length"in t?+t.length||0:e;r="omission"in t?u(t.omission):r}else e=+t||0;
if(n=u(n),e>=n.length)return n;if(e-=r.length,1>e)return r;if(t=n.slice(0,e),null==o)return t+r;if(ge(o)){if(n.slice(e).search(o)){var i,a=n.slice(0,e);for(o.global||(o=De(o.source,(On.exec(o)||"")+"g")),o.lastIndex=0;n=o.exec(a);)i=n.index;t=t.slice(0,null==i?e:i)}}else n.indexOf(o,e)!=e&&(o=t.lastIndexOf(o),-1<o&&(t=t.slice(0,o)));return t+r},Ln.unescape=function(n){return(n=u(n))&&pn.test(n)?n.replace(ln,d):n},Ln.uniqueId=function(n){var t=++Qe;return u(n)+t},Ln.words=Ie,Ln.all=Qr,Ln.any=oe,Ln.contains=te,
Ln.detect=ho,Ln.foldl=xo,Ln.foldr=Ao,Ln.head=Dr,Ln.include=te,Ln.inject=xo,Ue(Ln,function(){var n={};return vt(Ln,function(t,r){Ln.prototype[r]||(n[r]=t)}),n}(),false),Ln.sample=ee,Ln.prototype.sample=function(n){return this.__chain__||null!=n?this.thru(function(t){return ee(t,n)}):ee(this.value())},Ln.VERSION=b,Vn("bind bindKey curry curryRight partial partialRight".split(" "),function(n){Ln[n].placeholder=Ln}),Vn(["dropWhile","filter","map","takeWhile"],function(n,t){var r=t!=$,e=t==F;Bn.prototype[n]=function(n,u){
var o=this.__filtered__,i=o&&e?new Bn(this):this.clone();return(i.__iteratees__||(i.__iteratees__=[])).push({done:false,count:0,index:0,iteratee:wr(n,u,1),limit:-1,type:t}),i.__filtered__=o||r,i}}),Vn(["drop","take"],function(n,t){var r=n+"While";Bn.prototype[n]=function(r){var e=this.__filtered__,u=e&&!t?this.dropWhile():this.clone();return r=null==r?1:ju(au(r)||0,0),e?t?u.__takeCount__=Ou(u.__takeCount__,r):Kr(u.__iteratees__).limit=r:(u.__views__||(u.__views__=[])).push({size:r,type:n+(0>u.__dir__?"Right":"")
}),u},Bn.prototype[n+"Right"]=function(t){return this.reverse()[n](t).reverse()},Bn.prototype[n+"RightWhile"]=function(n,t){return this.reverse()[r](n,t).reverse()}}),Vn(["first","last"],function(n,t){var r="take"+(t?"Right":"");Bn.prototype[n]=function(){return this[r](1).value()[0]}}),Vn(["initial","rest"],function(n,t){var r="drop"+(t?"":"Right");Bn.prototype[n]=function(){return this[r](1)}}),Vn(["pluck","where"],function(n,t){var r=t?"filter":"map",e=t?xt:Fe;Bn.prototype[n]=function(n){return this[r](e(n));
}}),Bn.prototype.compact=function(){return this.filter(Ce)},Bn.prototype.reject=function(n,t){return n=wr(n,t,1),this.filter(function(t){return!n(t)})},Bn.prototype.slice=function(n,t){n=null==n?0:+n||0;var r=this;return 0>n?r=this.takeRight(-n):n&&(r=this.drop(n)),t!==w&&(t=+t||0,r=0>t?r.dropRight(-t):r.take(t-n)),r},Bn.prototype.toArray=function(){return this.drop(0)},vt(Bn.prototype,function(n,t){var r=Ln[t];if(r){var e=/^(?:filter|map|reject)|While$/.test(t),u=/^(?:first|last)$/.test(t);Ln.prototype[t]=function(){
function t(n){return n=[n],lu.apply(n,o),r.apply(Ln,n)}var o=arguments,i=this.__chain__,a=this.__wrapped__,f=!!this.__actions__.length,c=a instanceof Bn,l=o[0],s=c||Lo(a);return s&&e&&typeof l=="function"&&1!=l.length&&(c=s=false),c=c&&!f,u&&!i?c?n.call(a):r.call(Ln,this.value()):s?(a=n.apply(c?a:new Bn(this),o),u||!f&&!a.__actions__||(a.__actions__||(a.__actions__=[])).push({func:Hr,args:[t],thisArg:Ln}),new zn(a,i)):this.thru(t)}}}),Vn("concat join pop push replace shift sort splice split unshift".split(" "),function(n){
var t=(/^(?:replace|split)$/.test(n)?Ge:Ve)[n],r=/^(?:push|sort|unshift)$/.test(n)?"tap":"thru",e=/^(?:join|pop|replace|shift)$/.test(n),u=Bu.spliceObjects||!/^(?:pop|shift|splice)$/.test(n)?t:function(){var n=t.apply(this,arguments);return 0===this.length&&delete this[0],n};Ln.prototype[n]=function(){var n=arguments;return e&&!this.__chain__?u.apply(this.value(),n):this[r](function(t){return u.apply(t,n)})}}),vt(Bn.prototype,function(n,t){var r=Ln[t];if(r){var e=r.name;(Lu[e]||(Lu[e]=[])).push({
name:t,func:r})}}),Lu[sr(null,A).name]=[{name:"wrapper",func:null}],Bn.prototype.clone=function(){var n=this.__actions__,t=this.__iteratees__,r=this.__views__,e=new Bn(this.__wrapped__);return e.__actions__=n?Kn(n):null,e.__dir__=this.__dir__,e.__filtered__=this.__filtered__,e.__iteratees__=t?Kn(t):null,e.__takeCount__=this.__takeCount__,e.__views__=r?Kn(r):null,e},Bn.prototype.reverse=function(){if(this.__filtered__){var n=new Bn(this);n.__dir__=-1,n.__filtered__=true}else n=this.clone(),n.__dir__*=-1;
return n},Bn.prototype.value=function(){var n=this.__wrapped__.value();if(!Lo(n))return Lt(n,this.__actions__);var t,r=this.__dir__,e=0>r;t=n.length;for(var u=this.__views__,o=0,i=-1,a=u?u.length:0;++i<a;){var f=u[i],c=f.size;switch(f.type){case"drop":o+=c;break;case"dropRight":t-=c;break;case"take":t=Ou(t,o+c);break;case"takeRight":o=ju(o,t-c)}}t={start:o,end:t},u=t.start,o=t.end,t=o-u,u=e?o:u-1,o=Ou(t,this.__takeCount__),a=(i=this.__iteratees__)?i.length:0,f=0,c=[];n:for(;t--&&f<o;){for(var u=u+r,l=-1,s=n[u];++l<a;){
var p=i[l],h=p.iteratee,_=p.type;if(_==F){if(p.done&&(e?u>p.index:u<p.index)&&(p.count=0,p.done=false),p.index=u,!(p.done||(_=p.limit,p.done=-1<_?p.count++>=_:!h(s))))continue n}else if(p=h(s),_==$)s=p;else if(!p){if(_==N)continue n;break n}}c[f++]=s}return c},Ln.prototype.chain=function(){return Xr(this)},Ln.prototype.commit=function(){return new zn(this.value(),this.__chain__)},Ln.prototype.plant=function(n){for(var t,r=this;r instanceof Pn;){var e=zr(r);t?u.__wrapped__=e:t=e;var u=e,r=r.__wrapped__;
}return u.__wrapped__=n,t},Ln.prototype.reverse=function(){var n=this.__wrapped__;return n instanceof Bn?(this.__actions__.length&&(n=new Bn(this)),new zn(n.reverse(),this.__chain__)):this.thru(function(n){return n.reverse()})},Ln.prototype.toString=function(){return this.value()+""},Ln.prototype.run=Ln.prototype.toJSON=Ln.prototype.valueOf=Ln.prototype.value=function(){return Lt(this.__wrapped__,this.__actions__)},Ln.prototype.collect=Ln.prototype.map,Ln.prototype.head=Ln.prototype.first,Ln.prototype.select=Ln.prototype.filter,
Ln.prototype.tail=Ln.prototype.rest,Ln}var w,b="3.8.0",x=1,A=2,j=4,O=8,E=16,k=32,I=64,R=128,S=256,C=30,T="...",U=150,W=16,F=0,N=1,$=2,L="Expected a function",P="__lodash_placeholder__",z="[object Arguments]",B="[object Array]",M="[object Boolean]",D="[object Date]",q="[object Error]",K="[object Function]",V="[object Number]",Y="[object Object]",Z="[object RegExp]",G="[object String]",J="[object ArrayBuffer]",X="[object Float32Array]",H="[object Float64Array]",Q="[object Int8Array]",nn="[object Int16Array]",tn="[object Int32Array]",rn="[object Uint8Array]",en="[object Uint8ClampedArray]",un="[object Uint16Array]",on="[object Uint32Array]",an=/\b__p\+='';/g,fn=/\b(__p\+=)''\+/g,cn=/(__e\(.*?\)|\b__t\))\+'';/g,ln=/&(?:amp|lt|gt|quot|#39|#96);/g,sn=/[&<>"'`]/g,pn=RegExp(ln.source),hn=RegExp(sn.source),_n=/<%-([\s\S]+?)%>/g,vn=/<%([\s\S]+?)%>/g,gn=/<%=([\s\S]+?)%>/g,yn=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\n\\]|\\.)*?\1)\]/,dn=/^\w*$/,mn=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\n\\]|\\.)*?)\2)\]/g,wn=/[.*+?^${}()|[\]\/\\]/g,bn=RegExp(wn.source),xn=/[\u0300-\u036f\ufe20-\ufe23]/g,An=/\\(\\)?/g,jn=/\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g,On=/\w*$/,En=/^0[xX]/,kn=/^\[object .+?Constructor\]$/,In=/[\xc0-\xd6\xd8-\xde\xdf-\xf6\xf8-\xff]/g,Rn=/($^)/,Sn=/['\n\r\u2028\u2029\\]/g,Cn=RegExp("[A-Z\\xc0-\\xd6\\xd8-\\xde]+(?=[A-Z\\xc0-\\xd6\\xd8-\\xde][a-z\\xdf-\\xf6\\xf8-\\xff]+)|[A-Z\\xc0-\\xd6\\xd8-\\xde]?[a-z\\xdf-\\xf6\\xf8-\\xff]+|[A-Z\\xc0-\\xd6\\xd8-\\xde]+|[0-9]+","g"),Tn=" \t\x0b\f\xa0\ufeff\n\r\u2028\u2029\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000",Un="Array ArrayBuffer Date Error Float32Array Float64Array Function Int8Array Int16Array Int32Array Math Number Object RegExp Set String _ clearTimeout document isFinite parseInt setTimeout TypeError Uint8Array Uint8ClampedArray Uint16Array Uint32Array WeakMap window".split(" "),Wn="constructor hasOwnProperty isPrototypeOf propertyIsEnumerable toLocaleString toString valueOf".split(" "),Fn={};
Fn[X]=Fn[H]=Fn[Q]=Fn[nn]=Fn[tn]=Fn[rn]=Fn[en]=Fn[un]=Fn[on]=true,Fn[z]=Fn[B]=Fn[J]=Fn[M]=Fn[D]=Fn[q]=Fn[K]=Fn["[object Map]"]=Fn[V]=Fn[Y]=Fn[Z]=Fn["[object Set]"]=Fn[G]=Fn["[object WeakMap]"]=false;var Nn={};Nn[z]=Nn[B]=Nn[J]=Nn[M]=Nn[D]=Nn[X]=Nn[H]=Nn[Q]=Nn[nn]=Nn[tn]=Nn[V]=Nn[Y]=Nn[Z]=Nn[G]=Nn[rn]=Nn[en]=Nn[un]=Nn[on]=true,Nn[q]=Nn[K]=Nn["[object Map]"]=Nn["[object Set]"]=Nn["[object WeakMap]"]=false;var $n={leading:false,maxWait:0,trailing:false},Ln={"\xc0":"A","\xc1":"A","\xc2":"A","\xc3":"A","\xc4":"A","\xc5":"A",
"\xe0":"a","\xe1":"a","\xe2":"a","\xe3":"a","\xe4":"a","\xe5":"a","\xc7":"C","\xe7":"c","\xd0":"D","\xf0":"d","\xc8":"E","\xc9":"E","\xca":"E","\xcb":"E","\xe8":"e","\xe9":"e","\xea":"e","\xeb":"e","\xcc":"I","\xcd":"I","\xce":"I","\xcf":"I","\xec":"i","\xed":"i","\xee":"i","\xef":"i","\xd1":"N","\xf1":"n","\xd2":"O","\xd3":"O","\xd4":"O","\xd5":"O","\xd6":"O","\xd8":"O","\xf2":"o","\xf3":"o","\xf4":"o","\xf5":"o","\xf6":"o","\xf8":"o","\xd9":"U","\xda":"U","\xdb":"U","\xdc":"U","\xf9":"u","\xfa":"u",
"\xfb":"u","\xfc":"u","\xdd":"Y","\xfd":"y","\xff":"y","\xc6":"Ae","\xe6":"ae","\xde":"Th","\xfe":"th","\xdf":"ss"},Pn={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","`":"&#96;"},zn={"&amp;":"&","&lt;":"<","&gt;":">","&quot;":'"',"&#39;":"'","&#96;":"`"},Bn={"function":true,object:true},Mn={"\\":"\\","'":"'","\n":"n","\r":"r","\u2028":"u2028","\u2029":"u2029"},Dn=Bn[typeof exports]&&exports&&!exports.nodeType&&exports,qn=Bn[typeof module]&&module&&!module.nodeType&&module,Kn=Bn[typeof self]&&self&&self.Object&&self,Vn=Bn[typeof window]&&window&&window.Object&&window,Yn=qn&&qn.exports===Dn&&Dn,Zn=Dn&&qn&&typeof global=="object"&&global&&global.Object&&global||Vn!==(this&&this.window)&&Vn||Kn||this,Gn=function(){
try{Object({toString:0}+"")}catch(n){return function(){return false}}return function(n){return typeof n.toString!="function"&&typeof(n+"")=="string"}}(),Jn=m();typeof define=="function"&&typeof define.amd=="object"&&define.amd?(Zn._=Jn, define(function(){return Jn})):Dn&&qn?Yn?(qn.exports=Jn)._=Jn:Dn._=Jn:Zn._=Jn}).call(this);