docs: left nav is driven by _data.json files
This commit is contained in:
Ward Bell
parent
ed5effa503
commit
bf3ed182a7
|
|
@ -1,7 +1,37 @@
|
||||||
- var lang = current.path[1]
|
// Include this file ONLY when current.path[2] is defined
|
||||||
|
- var tracks = function(src, selector) {
|
||||||
|
- var base = '/docs/' + current.path[1] + '/' + current.path[2] + '/';
|
||||||
|
- var secondaryPath = public.docs[current.path[1]][current.path[2]]
|
||||||
|
- var data = src ? secondaryPath[src] && secondaryPath[src]._data : secondaryPath._data;
|
||||||
|
- if (!data) return [];
|
||||||
|
|
||||||
|
- var track = [];
|
||||||
|
- var selector = selector || function() { return true; };
|
||||||
|
- var prefix = base + (src ? src + '/' : '');
|
||||||
|
- for (prop in data) {
|
||||||
|
- var item = data[prop];
|
||||||
|
- item[0] = prop;
|
||||||
|
- if (prop[0] !== '_' && !item.hide && selector(item)) {
|
||||||
|
- var file = prop !== 'index' ? prop + '.html' : ''
|
||||||
|
- item.file = file;
|
||||||
|
- item.href = prefix + file;
|
||||||
|
- item.navTitle = item.navTitle || item.title;
|
||||||
|
- item.tooltip = item.description || item.intro || '';
|
||||||
|
- track.push(item);
|
||||||
|
- }
|
||||||
|
- }
|
||||||
|
- return track;
|
||||||
|
- }
|
||||||
|
|
||||||
|
- var tutorial = tracks('tutorial');
|
||||||
|
- var cookbook = tracks('cookbook');
|
||||||
|
- var basics = tracks('guide', function(item) { return item.basics; });
|
||||||
|
- var guide = tracks('guide', function(item) { return !item.basics; });
|
||||||
|
- var qs = tracks('', function(item) { return item[0] === 'quickstart'; })[0] || {};
|
||||||
|
- var reference = tracks('', function(item) { return item.reference; });
|
||||||
|
- var resources = tracks('', function(item) { return item.resources; });
|
||||||
|
|
||||||
nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
|
nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
|
||||||
|
|
||||||
// SEARCH BAR
|
// SEARCH BAR
|
||||||
header.side-nav-search.st-input-wrapper
|
header.side-nav-search.st-input-wrapper
|
||||||
form.st-input-inner
|
form.st-input-inner
|
||||||
|
|
@ -10,7 +40,50 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
|
||||||
button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="appCtrl.toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>
|
button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="appCtrl.toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>
|
||||||
|
|
||||||
div(class="side-nav-secondary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
|
div(class="side-nav-secondary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
|
||||||
!= partial("../" + lang + "/latest/_nav")
|
.nav-blocks
|
||||||
|
.nav-title Tutorial
|
||||||
|
.nav-primary-link
|
||||||
|
a(href="#{qs.href}" title="#{qs.tooltip}") #{qs.navTitle}
|
||||||
|
.nav-sub-title Case Study: Tour of Heroes
|
||||||
|
.nav-ordered-lists
|
||||||
|
ol
|
||||||
|
each item in tutorial
|
||||||
|
li: a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
|
||||||
|
|
||||||
|
.nav-blocks
|
||||||
|
.nav-title Basics
|
||||||
|
.nav-ordered-lists
|
||||||
|
ol
|
||||||
|
each item in basics
|
||||||
|
li: a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
|
||||||
|
|
||||||
|
.nav-blocks
|
||||||
|
.nav-title Developer Guide
|
||||||
|
.nav-unordered-lists
|
||||||
|
ul
|
||||||
|
each item in guide
|
||||||
|
li: a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
|
||||||
|
|
||||||
|
.nav-blocks
|
||||||
|
.nav-title Cookbook
|
||||||
|
.nav-unordered-lists
|
||||||
|
ul
|
||||||
|
each item in cookbook
|
||||||
|
li: a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
|
||||||
|
|
||||||
|
.nav-blocks
|
||||||
|
.nav-title Reference
|
||||||
|
.nav-unordered-lists
|
||||||
|
ul
|
||||||
|
each item in reference
|
||||||
|
li: a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
|
||||||
|
|
||||||
|
.nav-blocks
|
||||||
|
.nav-title Resources
|
||||||
|
.nav-unordered-lists
|
||||||
|
ul
|
||||||
|
each item in resources
|
||||||
|
li: a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
|
||||||
|
|
||||||
|
|
||||||
script.
|
script.
|
||||||
|
|
@ -20,11 +93,9 @@ script.
|
||||||
if (!leftNav) {return;}
|
if (!leftNav) {return;}
|
||||||
var links = leftNav.getElementsByTagName('a');
|
var links = leftNav.getElementsByTagName('a');
|
||||||
var path = location.toString();
|
var path = location.toString();
|
||||||
// remove trailing '/'
|
// remove trailing 'index.html' (10 chars) for matching purposes.
|
||||||
if (path[path.length-1] === '/') {path = path.slice(0, path.length-1);}
|
if (path.lastIndexOf('index.html') === path.length-10) {
|
||||||
// remove trailing '/index.html' (11 chars) for matching purposes.
|
path = path.slice(0, -10);
|
||||||
if (path.lastIndexOf('/index.html') === path.length-11) {
|
|
||||||
path = path.slice(0, -11);
|
|
||||||
}
|
}
|
||||||
for (var i=0; i < links.length; i++){
|
for (var i=0; i < links.length; i++){
|
||||||
// assumes fresh page each time so no need to clear class
|
// assumes fresh page each time so no need to clear class
|
||||||
|
|
@ -33,8 +104,9 @@ script.
|
||||||
parent.classList.add('is-selected');
|
parent.classList.add('is-selected');
|
||||||
|
|
||||||
if(parent.offsetTop > window.innerHeight && parent.scrollIntoView){
|
if(parent.offsetTop > window.innerHeight && parent.scrollIntoView){
|
||||||
parent.scrollIntoView(false);
|
sideNav = document.getElementsByClassName('side-nav')[0];
|
||||||
// parent.scrollTop();
|
sideNav.scrollTop = parent.offsetTop - (window.innerHeight/2);
|
||||||
|
//alert("offsetTop: " + parent.offsetTop + " side-nav top is " + sideNav.scrollTop);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,8 @@ html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Frame
|
||||||
|
|
||||||
body(class="l-offset-nav l-offset-side-nav" ng-controller="AppCtrl as appCtrl")
|
body(class="l-offset-nav l-offset-side-nav" ng-controller="AppCtrl as appCtrl")
|
||||||
!= partial("../_includes/_main-nav")
|
!= partial("../_includes/_main-nav")
|
||||||
!= partial("_includes/_side-nav")
|
if current.path[2]
|
||||||
|
!= partial("_includes/_side-nav")
|
||||||
!= partial("../_includes/_hero")
|
!= partial("../_includes/_hero")
|
||||||
!= partial("../_includes/_banner")
|
!= partial("../_includes/_banner")
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,8 @@
|
||||||
|
|
||||||
"quickstart": {
|
"quickstart": {
|
||||||
"icon": "query-builder",
|
"icon": "query-builder",
|
||||||
"title": "5 Min Quickstart"
|
"title": "5 Min Quickstart",
|
||||||
|
"description": "Get up and running with Angular 2"
|
||||||
},
|
},
|
||||||
|
|
||||||
"tutorial": {
|
"tutorial": {
|
||||||
|
|
@ -19,7 +20,7 @@
|
||||||
|
|
||||||
"guide": {
|
"guide": {
|
||||||
"icon": "list",
|
"icon": "list",
|
||||||
"title": "Developers Guide",
|
"title": "Developer Guides",
|
||||||
"banner": "Angular 2 is currently in Beta."
|
"banner": "Angular 2 is currently in Beta."
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -31,17 +32,32 @@
|
||||||
|
|
||||||
"api": {
|
"api": {
|
||||||
"icon": "book",
|
"icon": "book",
|
||||||
"title": "API Proposal"
|
"title": "API Preview",
|
||||||
|
"reference": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"cheatsheet": {
|
||||||
|
"title": "Angular Cheat Sheet",
|
||||||
|
"intro": "A quick quide to Angular syntax.",
|
||||||
|
"reference": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"glossary": {
|
||||||
|
"title": "Glossary",
|
||||||
|
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
|
||||||
|
"reference": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"resources": {
|
"resources": {
|
||||||
"icon": "play-circle-fill",
|
"icon": "play-circle-fill",
|
||||||
"title": "Angular Resources",
|
"title": "Angular Resources",
|
||||||
"banner": "Angular 2 is currently in Beta."
|
"banner": "Angular 2 is currently in Beta.",
|
||||||
|
"resources": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"help": {
|
"help": {
|
||||||
"icon": "chat",
|
"icon": "chat",
|
||||||
"title": "Help & Support"
|
"title": "Help & Support",
|
||||||
|
"resources": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
- var base = '/docs/dart/latest/'
|
|
||||||
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Tutorial
|
|
||||||
.nav-primary-link
|
|
||||||
a(href='#{base}quickstart.html') 5 Min Quickstart
|
|
||||||
.nav-sub-title Case Study: Tour of Heroes
|
|
||||||
.nav-ordered-lists
|
|
||||||
ol
|
|
||||||
li: a(href='#{base}tutorial') Introduction
|
|
||||||
li: a(href='#{base}tutorial/toh-pt1.html') The Hero Editor
|
|
||||||
li: a(href='#{base}tutorial/toh-pt2.html') Master/Detail
|
|
||||||
li: a(href='#{base}tutorial/toh-pt3.html') Multiple Components
|
|
||||||
li: a(href='#{base}tutorial/toh-pt4.html') Services
|
|
||||||
li: a(href='#{base}tutorial/toh-pt5.html') Routing
|
|
||||||
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Basics
|
|
||||||
.nav-ordered-lists
|
|
||||||
ol
|
|
||||||
li: a(href='#{base}guide') Overview
|
|
||||||
li: a(href='#{base}guide/architecture.html') Architecture
|
|
||||||
li: a(href='#{base}guide/displaying-data.html') Displaying Data
|
|
||||||
li: a(href='#{base}guide/user-input.html') User Input
|
|
||||||
li: a(href='#{base}guide/forms.html') Forms
|
|
||||||
li: a(href='#{base}guide/dependency-injection.html') Dependency Injection
|
|
||||||
li: a(href='#{base}guide/template-syntax.html') Template Syntax
|
|
||||||
li: a(href='#{base}guide/cheatsheet.html') Angular Cheat Sheet
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Developer Guide
|
|
||||||
.nav-unordered-lists
|
|
||||||
ul
|
|
||||||
li: a(href='#{base}guide/attribute-directives.html') Attribute Directives
|
|
||||||
li: a(href='#{base}guide/hierarchical-dependency-injection.html') Hierarchical Injectors
|
|
||||||
li: a(href='#{base}guide/server-communication.html') Http Client
|
|
||||||
li: a(href='#{base}guide/lifecycle-hooks.html') Lifecycle Hooks
|
|
||||||
li: a(href='#{base}guide/pipes.html') Pipes
|
|
||||||
li: a(href='#{base}guide/router.html') Routing & Navigation
|
|
||||||
li: a(href='#{base}guide/structural-directives.html') Structural Directives
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Cookbook
|
|
||||||
.nav-unordered-lists
|
|
||||||
ul
|
|
||||||
li: a(href='#{base}cookbook') Overview
|
|
||||||
li: a(href='#{base}cookbook/component-communication.html') Component Interaction
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Reference
|
|
||||||
.nav-unordered-lists
|
|
||||||
ul
|
|
||||||
li: a(href='#{base}api') API Preview
|
|
||||||
li: a(href='#{base}cheatsheet.html') Angular Cheat Sheet
|
|
||||||
li: a(href='#{base}guide/glossary.html') Glossary
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Resources
|
|
||||||
.nav-unordered-lists
|
|
||||||
ul
|
|
||||||
li: a(href='#{base}resources.html') Angular Resources
|
|
||||||
li: a(href='#{base}help.html') Help & Support
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
|
- var base = current.path[4] ? '.' : './guide';
|
||||||
.banner
|
.banner
|
||||||
p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
|
p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
|
||||||
|
|
||||||
article(class="l-content-small grid-fluid docs-content")
|
article(class="l-content-small grid-fluid docs-content")
|
||||||
.cheatsheet
|
.cheatsheet
|
||||||
ngio-cheatsheet(src='./guide/cheatsheet.json')
|
ngio-cheatsheet(src= base + '/cheatsheet.json')
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,15 @@
|
||||||
{
|
{
|
||||||
"_listtype": "alpha",
|
|
||||||
|
|
||||||
"index": {
|
"index": {
|
||||||
"title": "Cookbook",
|
"title": "Cookbook",
|
||||||
|
"navTitle": "Overview",
|
||||||
"description": "A collection of recipes for common Angular application scenarios"
|
"description": "A collection of recipes for common Angular application scenarios"
|
||||||
},
|
},
|
||||||
|
|
||||||
"a1-a2-quick-reference": {
|
"a1-a2-quick-reference": {
|
||||||
"title": "Angular 1 to 2 Quick Ref",
|
"title": "Angular 1 to 2 Quick Reference",
|
||||||
"description": "Learn how Angular 1 concepts and techniques map to Angular 2"
|
"navTitle": "Angular 1 to 2 Quick Ref",
|
||||||
|
"description": "Learn how Angular 1 concepts and techniques map to Angular 2",
|
||||||
|
"hide": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"component-communication": {
|
"component-communication": {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
include _util-fns
|
||||||
|
+includeShared('{ts}', 'intro')
|
||||||
|
+includeShared('{ts}', 'a2')
|
||||||
|
+includeShared('{ts}', 'b-c')
|
||||||
|
+includeShared('{ts}', 'd1')
|
||||||
|
+includeShared('{ts}', 'd2')
|
||||||
|
+includeShared('{ts}', 'e1')
|
||||||
|
+includeShared('{ts}', 'e2')
|
||||||
|
+includeShared('{ts}', 'f-l')
|
||||||
|
+includeShared('{ts}', 'm1')
|
||||||
|
+includeShared('{ts}', 'n-s')
|
||||||
|
+includeShared('{ts}', 't1')
|
||||||
|
|
||||||
|
+includeShared('{ts}', 'u-z')
|
||||||
|
|
@ -1,45 +1,60 @@
|
||||||
{
|
{
|
||||||
"_listtype": "ordered",
|
|
||||||
|
|
||||||
"index": {
|
"index": {
|
||||||
"title": "Documentation Overview",
|
"title": "Documentation Overview",
|
||||||
"nextable":true
|
"navTitle": "Overview",
|
||||||
|
"description": "How to read and use this documentation",
|
||||||
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"architecture": {
|
"architecture": {
|
||||||
"title": "Architecture Overview",
|
"title": "Architecture Overview",
|
||||||
|
"navTitle": "Architecture",
|
||||||
"intro": "The basic building blocks of Angular 2 applications",
|
"intro": "The basic building blocks of Angular 2 applications",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"displaying-data": {
|
"displaying-data": {
|
||||||
"title": "Displaying Data",
|
"title": "Displaying Data",
|
||||||
"intro": "Interpolation and other forms of property binding help us show app data in the UI.",
|
"intro": "Interpolation and other forms of property binding help us show app data in the UI.",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"user-input": {
|
"user-input": {
|
||||||
"title": "User Input",
|
"title": "User Input",
|
||||||
"intro": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models.",
|
"intro": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models.",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"forms": {
|
"forms": {
|
||||||
"title": "Forms",
|
"title": "Forms",
|
||||||
"intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.",
|
"intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"dependency-injection": {
|
"dependency-injection": {
|
||||||
"title": "Dependency Injection",
|
"title": "Dependency Injection",
|
||||||
"intro": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\".",
|
"intro": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\".",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"template-syntax": {
|
"template-syntax": {
|
||||||
"title": "Template Syntax",
|
"title": "Template Syntax",
|
||||||
"intro": "Learn how to write templates that display data and consume user events with the help of data binding.",
|
"intro": "Learn how to write templates that display data and consume user events with the help of data binding.",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"cheatsheet": {
|
||||||
|
"title": "Angular Cheat Sheet",
|
||||||
|
"intro": "A quick quide to Angular syntax.",
|
||||||
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"attribute-directives": {
|
"attribute-directives": {
|
||||||
|
|
@ -48,7 +63,8 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
"hierarchical-dependency-injection": {
|
"hierarchical-dependency-injection": {
|
||||||
"title": "Hierarchical Injectors",
|
"title": "Hierarchical Dependency Injectors",
|
||||||
|
"navTitle": "Hierarchical Injectors",
|
||||||
"intro": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree."
|
"intro": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree."
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -62,6 +78,12 @@
|
||||||
"intro": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them."
|
"intro": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them."
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"npm-packages": {
|
||||||
|
"title": "Npm Packages",
|
||||||
|
"intro": "Details of the recommended npm packages and the different kinds of package dependencies",
|
||||||
|
"hide": true
|
||||||
|
},
|
||||||
|
|
||||||
"pipes": {
|
"pipes": {
|
||||||
"title": "Pipes",
|
"title": "Pipes",
|
||||||
"intro": "Pipes transform displayed values within a template."
|
"intro": "Pipes transform displayed values within a template."
|
||||||
|
|
@ -77,13 +99,27 @@
|
||||||
"intro": "Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements."
|
"intro": "Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements."
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"testing": {
|
||||||
|
"title": "Testing",
|
||||||
|
"intro": "Techniques and practices for testing an Angular 2 app",
|
||||||
|
"hide": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"typescript-configuration": {
|
||||||
|
"title": "TypeScript Configuration",
|
||||||
|
"intro": "TypeScript configuration for Angular 2 developers",
|
||||||
|
"hide": true
|
||||||
|
},
|
||||||
|
|
||||||
"upgrade": {
|
"upgrade": {
|
||||||
"title": "Upgrading from 1.x",
|
"title": "Upgrading from 1.x",
|
||||||
"intro": "Angular 1 applications can be incrementally upgraded to Angular 2."
|
"intro": "Angular 1 applications can be incrementally upgraded to Angular 2.",
|
||||||
|
"hide": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"glossary": {
|
"glossary": {
|
||||||
"title": "Glossary",
|
"title": "Glossary",
|
||||||
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary"
|
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
|
||||||
|
"hide": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1 @@
|
||||||
.banner
|
!= partial("../cheatsheet")
|
||||||
p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
|
|
||||||
|
|
||||||
article(class="l-content-small grid-fluid docs-content")
|
|
||||||
.cheatsheet
|
|
||||||
ngio-cheatsheet(src='./cheatsheet.json')
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1 @@
|
||||||
include ../_util-fns
|
!= partial("../glossary")
|
||||||
+includeShared('{ts}', 'intro')
|
|
||||||
+includeShared('{ts}', 'a2')
|
|
||||||
+includeShared('{ts}', 'b-c')
|
|
||||||
+includeShared('{ts}', 'd1')
|
|
||||||
+includeShared('{ts}', 'd2')
|
|
||||||
+includeShared('{ts}', 'e1')
|
|
||||||
+includeShared('{ts}', 'e2')
|
|
||||||
+includeShared('{ts}', 'f-l')
|
|
||||||
+includeShared('{ts}', 'm1')
|
|
||||||
+includeShared('{ts}', 'n-s')
|
|
||||||
+includeShared('{ts}', 't1')
|
|
||||||
|
|
||||||
+includeShared('{ts}', 'u-z')
|
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,33 @@
|
||||||
{
|
{
|
||||||
"_listtype": "ordered",
|
|
||||||
|
|
||||||
"index": {
|
"index": {
|
||||||
"title": "Tutorial: Tour of Heroes",
|
"title": "Tutorial: Tour of Heroes",
|
||||||
|
"navTitle": "Introduction",
|
||||||
"intro": "The Tour of Heroes tutorial takes us through the steps of creating an Angular application in TypeScript.",
|
"intro": "The Tour of Heroes tutorial takes us through the steps of creating an Angular application in TypeScript.",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt1": {
|
"toh-pt1": {
|
||||||
"title": "The Hero Editor",
|
"title": "The Hero Editor",
|
||||||
"intro": "We build a simple hero editor",
|
"intro": "We build a simple hero editor",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt2": {
|
"toh-pt2": {
|
||||||
"title": "Master/Detail",
|
"title": "Master/Detail",
|
||||||
"intro": "We build a master/detail page with a list of heroes",
|
"intro": "We build a master/detail page with a list of heroes",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt3": {
|
"toh-pt3": {
|
||||||
"title": "Multiple Components",
|
"title": "Multiple Components",
|
||||||
"intro": "We refactor the master/detail view into separate components",
|
"intro": "We refactor the master/detail view into separate components",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt4": {
|
"toh-pt4": {
|
||||||
"title": "Services",
|
"title": "Services",
|
||||||
"intro": "We create a reusable service to manage our hero data calls",
|
"intro": "We create a reusable service to manage our hero data calls",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt5": {
|
"toh-pt5": {
|
||||||
"title": "Routing",
|
"title": "Routing",
|
||||||
"intro": "We add the Angular Component Router and learn to navigate among the views",
|
"intro": "We add the Angular Component Router and learn to navigate among the views",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -8,7 +8,8 @@
|
||||||
|
|
||||||
"quickstart": {
|
"quickstart": {
|
||||||
"icon": "query-builder",
|
"icon": "query-builder",
|
||||||
"title": "5 Min Quickstart"
|
"title": "5 Min Quickstart",
|
||||||
|
"description": "Get up and running with Angular 2"
|
||||||
},
|
},
|
||||||
|
|
||||||
"tutorial": {
|
"tutorial": {
|
||||||
|
|
@ -19,7 +20,7 @@
|
||||||
|
|
||||||
"guide": {
|
"guide": {
|
||||||
"icon": "list",
|
"icon": "list",
|
||||||
"title": "Developer Guide",
|
"title": "Developer Guides",
|
||||||
"banner": "Angular 2 is currently in Beta."
|
"banner": "Angular 2 is currently in Beta."
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -31,17 +32,32 @@
|
||||||
|
|
||||||
"api": {
|
"api": {
|
||||||
"icon": "book",
|
"icon": "book",
|
||||||
"title": "API Preview"
|
"title": "API Preview",
|
||||||
|
"reference": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"cheatsheet": {
|
||||||
|
"title": "Angular Cheat Sheet",
|
||||||
|
"intro": "A quick quide to Angular syntax.",
|
||||||
|
"reference": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"glossary": {
|
||||||
|
"title": "Glossary",
|
||||||
|
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
|
||||||
|
"reference": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"resources": {
|
"resources": {
|
||||||
"icon": "play-circle-fill",
|
"icon": "play-circle-fill",
|
||||||
"title": "Angular Resources",
|
"title": "Angular Resources",
|
||||||
"banner": "Angular 2 is currently in Beta."
|
"banner": "Angular 2 is currently in Beta.",
|
||||||
|
"resources": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"help": {
|
"help": {
|
||||||
"icon": "chat",
|
"icon": "chat",
|
||||||
"title": "Help & Support"
|
"title": "Help & Support",
|
||||||
|
"resources": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
- var base = '/docs/js/latest/'
|
|
||||||
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Tutorial
|
|
||||||
.nav-primary-link
|
|
||||||
a(href='#{base}quickstart.html') 5 Min Quickstart
|
|
||||||
.nav-sub-title Case Study: Tour of Heroes
|
|
||||||
.nav-ordered-lists
|
|
||||||
ol
|
|
||||||
li: a(href='#{base}tutorial') Introduction
|
|
||||||
li: a(href='#{base}tutorial/toh-pt1.html') The Hero Editor
|
|
||||||
li: a(href='#{base}tutorial/toh-pt2.html') Master/Detail
|
|
||||||
li: a(href='#{base}tutorial/toh-pt3.html') Multiple Components
|
|
||||||
li: a(href='#{base}tutorial/toh-pt4.html') Services
|
|
||||||
li: a(href='#{base}tutorial/toh-pt5.html') Routing
|
|
||||||
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Basics
|
|
||||||
.nav-ordered-lists
|
|
||||||
ol
|
|
||||||
li: a(href='#{base}guide') Overview
|
|
||||||
li: a(href='#{base}guide/architecture.html') Architecture
|
|
||||||
li: a(href='#{base}guide/displaying-data.html') Displaying Data
|
|
||||||
li: a(href='#{base}guide/user-input.html') User Input
|
|
||||||
li: a(href='#{base}guide/forms.html') Forms
|
|
||||||
li: a(href='#{base}guide/dependency-injection.html') Dependency Injection
|
|
||||||
li: a(href='#{base}guide/template-syntax.html') Template Syntax
|
|
||||||
li: a(href='#{base}guide/cheatsheet.html') Angular Cheat Sheet
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Developer Guide
|
|
||||||
.nav-unordered-lists
|
|
||||||
ul
|
|
||||||
li: a(href='#{base}guide/attribute-directives.html') Attribute Directives
|
|
||||||
li: a(href='#{base}guide/hierarchical-dependency-injection.html') Hierarchical Injectors
|
|
||||||
li: a(href='#{base}guide/server-communication.html') Http Client
|
|
||||||
li: a(href='#{base}guide/lifecycle-hooks.html') Lifecycle Hooks
|
|
||||||
li: a(href='#{base}guide/npm-packages.html') npm packages
|
|
||||||
li: a(href='#{base}guide/pipes.html') Pipes
|
|
||||||
li: a(href='#{base}guide/router.html') Routing & Navigation
|
|
||||||
li: a(href='#{base}guide/structural-directives.html') Structural Directives
|
|
||||||
li: a(href='#{base}guide/upgrade.html') Upgrading from 1.x
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Cookbook
|
|
||||||
.nav-unordered-lists
|
|
||||||
ul
|
|
||||||
li: a(href='#{base}cookbook') Overview
|
|
||||||
li: a(href='#{base}cookbook/a1-a2-quick-reference.html') Angular 1 to 2 Quick Ref
|
|
||||||
li: a(href='#{base}cookbook/component-communication.html') Component Interaction
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Reference
|
|
||||||
.nav-unordered-lists
|
|
||||||
ul
|
|
||||||
li: a(href='#{base}api') API Preview
|
|
||||||
li: a(href='#{base}cheatsheet.html') Angular Cheat Sheet
|
|
||||||
li: a(href='#{base}guide/glossary.html') Glossary
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Resources
|
|
||||||
.nav-unordered-lists
|
|
||||||
ul
|
|
||||||
li: a(href='#{base}resources.html') Angular Resources
|
|
||||||
li: a(href='#{base}help.html') Help & Support
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
|
- var base = current.path[4] ? '.' : './guide';
|
||||||
.banner
|
.banner
|
||||||
p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
|
p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
|
||||||
|
|
||||||
article(class="l-content-small grid-fluid docs-content")
|
article(class="l-content-small grid-fluid docs-content")
|
||||||
.cheatsheet
|
.cheatsheet
|
||||||
ngio-cheatsheet(src='./guide/cheatsheet.json')
|
ngio-cheatsheet(src= base + '/cheatsheet.json')
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
{
|
{
|
||||||
"_listtype": "alpha",
|
|
||||||
|
|
||||||
"index": {
|
"index": {
|
||||||
"title": "Cookbook",
|
"title": "Cookbook",
|
||||||
|
"navTitle": "Overview",
|
||||||
"description": "A collection of recipes for common Angular application scenarios"
|
"description": "A collection of recipes for common Angular application scenarios"
|
||||||
},
|
},
|
||||||
|
|
||||||
"a1-a2-quick-reference": {
|
"a1-a2-quick-reference": {
|
||||||
"title": "Angular 1 to 2 Quick Ref",
|
"title": "Angular 1 to 2 Quick Reference",
|
||||||
|
"navTitle": "Angular 1 to 2 Quick Ref",
|
||||||
"description": "Learn how Angular 1 concepts and techniques map to Angular 2"
|
"description": "Learn how Angular 1 concepts and techniques map to Angular 2"
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
include _util-fns
|
||||||
|
+includeShared('{ts}', 'intro')
|
||||||
|
+includeShared('{ts}', 'a2')
|
||||||
|
+includeShared('{ts}', 'b-c')
|
||||||
|
+includeShared('{ts}', 'd1')
|
||||||
|
+includeShared('{ts}', 'd2')
|
||||||
|
+includeShared('{ts}', 'e1')
|
||||||
|
+includeShared('{ts}', 'e2')
|
||||||
|
+includeShared('{ts}', 'f-l')
|
||||||
|
+includeShared('{ts}', 'm1')
|
||||||
|
+includeShared('{ts}', 'n-s')
|
||||||
|
+includeShared('{ts}', 't1')
|
||||||
|
+includeShared('{ts}', 't2')
|
||||||
|
+includeShared('{ts}', 'u-z')
|
||||||
|
|
@ -1,44 +1,60 @@
|
||||||
{
|
{
|
||||||
"_listtype": "ordered",
|
|
||||||
|
|
||||||
"index": {
|
"index": {
|
||||||
"title": "Documentation Overview",
|
"title": "Documentation Overview",
|
||||||
"nextable":true
|
"navTitle": "Overview",
|
||||||
|
"description": "How to read and use this documentation",
|
||||||
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"architecture": {
|
"architecture": {
|
||||||
"title": "Architecture Overview",
|
"title": "Architecture Overview",
|
||||||
|
"navTitle": "Architecture",
|
||||||
"intro": "The basic building blocks of Angular 2 applications",
|
"intro": "The basic building blocks of Angular 2 applications",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"displaying-data": {
|
"displaying-data": {
|
||||||
"title": "Displaying Data",
|
"title": "Displaying Data",
|
||||||
"intro": "Interpolation and other forms of property binding help us show app data in the UI.",
|
"intro": "Interpolation and other forms of property binding help us show app data in the UI.",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"user-input": {
|
"user-input": {
|
||||||
"title": "User Input",
|
"title": "User Input",
|
||||||
"intro": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models.",
|
"intro": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models.",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"forms": {
|
"forms": {
|
||||||
"title": "Forms",
|
"title": "Forms",
|
||||||
"intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors."
|
"intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.",
|
||||||
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"dependency-injection": {
|
"dependency-injection": {
|
||||||
"title": "Dependency Injection",
|
"title": "Dependency Injection",
|
||||||
"intro": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\".",
|
"intro": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\".",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"template-syntax": {
|
"template-syntax": {
|
||||||
"title": "Template Syntax",
|
"title": "Template Syntax",
|
||||||
"intro": "Learn how to write templates that display data and consume user events with the help of data binding.",
|
"intro": "Learn how to write templates that display data and consume user events with the help of data binding.",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"cheatsheet": {
|
||||||
|
"title": "Angular Cheat Sheet",
|
||||||
|
"intro": "A quick quide to Angular syntax.",
|
||||||
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"attribute-directives": {
|
"attribute-directives": {
|
||||||
|
|
@ -47,7 +63,8 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
"hierarchical-dependency-injection": {
|
"hierarchical-dependency-injection": {
|
||||||
"title": "Hierarchical Injectors",
|
"title": "Hierarchical Dependency Injectors",
|
||||||
|
"navTitle": "Hierarchical Injectors",
|
||||||
"intro": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree."
|
"intro": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree."
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -62,7 +79,7 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
"npm-packages": {
|
"npm-packages": {
|
||||||
"title": "npm packages",
|
"title": "Npm Packages",
|
||||||
"intro": "Details of the recommended npm packages and the different kinds of package dependencies"
|
"intro": "Details of the recommended npm packages and the different kinds of package dependencies"
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -81,13 +98,27 @@
|
||||||
"intro": "Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements."
|
"intro": "Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements."
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"testing": {
|
||||||
|
"title": "Testing",
|
||||||
|
"intro": "Techniques and practices for testing an Angular 2 app",
|
||||||
|
"hide": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"typescript-configuration": {
|
||||||
|
"title": "TypeScript Configuration",
|
||||||
|
"intro": "TypeScript configuration for Angular 2 developers",
|
||||||
|
"hide": true
|
||||||
|
},
|
||||||
|
|
||||||
"upgrade": {
|
"upgrade": {
|
||||||
"title": "Upgrading from 1.x",
|
"title": "Upgrading from 1.x",
|
||||||
"intro": "Angular 1 applications can be incrementally upgraded to Angular 2."
|
"intro": "Angular 1 applications can be incrementally upgraded to Angular 2."
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
"glossary": {
|
"glossary": {
|
||||||
"title": "Glossary",
|
"title": "Glossary",
|
||||||
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary"
|
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
|
||||||
|
"hide": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1 @@
|
||||||
.banner
|
!= partial("../cheatsheet")
|
||||||
p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
|
|
||||||
|
|
||||||
article(class="l-content-small grid-fluid docs-content")
|
|
||||||
.cheatsheet
|
|
||||||
ngio-cheatsheet(src='./cheatsheet.json')
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1 @@
|
||||||
include ../_util-fns
|
!= partial("../glossary")
|
||||||
+includeShared('{ts}', 'intro')
|
|
||||||
+includeShared('{ts}', 'a2')
|
|
||||||
+includeShared('{ts}', 'b-c')
|
|
||||||
+includeShared('{ts}', 'd1')
|
|
||||||
+includeShared('{ts}', 'd2')
|
|
||||||
+includeShared('{ts}', 'e1')
|
|
||||||
+includeShared('{ts}', 'e2')
|
|
||||||
+includeShared('{ts}', 'f-l')
|
|
||||||
+includeShared('{ts}', 'm1')
|
|
||||||
+includeShared('{ts}', 'n-s')
|
|
||||||
+includeShared('{ts}', 't1')
|
|
||||||
+includeShared('{ts}', 't2')
|
|
||||||
+includeShared('{ts}', 'u-z')
|
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,33 @@
|
||||||
{
|
{
|
||||||
"_listtype": "ordered",
|
|
||||||
|
|
||||||
"index": {
|
"index": {
|
||||||
"title": "Tutorial: Tour of Heroes",
|
"title": "Tutorial: Tour of Heroes",
|
||||||
|
"navTitle": "Introduction",
|
||||||
"intro": "The Tour of Heroes tutorial takes us through the steps of creating an Angular application in TypeScript.",
|
"intro": "The Tour of Heroes tutorial takes us through the steps of creating an Angular application in TypeScript.",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt1": {
|
"toh-pt1": {
|
||||||
"title": "The Hero Editor",
|
"title": "The Hero Editor",
|
||||||
"intro": "We build a simple hero editor",
|
"intro": "We build a simple hero editor",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt2": {
|
"toh-pt2": {
|
||||||
"title": "Master/Detail",
|
"title": "Master/Detail",
|
||||||
"intro": "We build a master/detail page with a list of heroes",
|
"intro": "We build a master/detail page with a list of heroes",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt3": {
|
"toh-pt3": {
|
||||||
"title": "Multiple Components",
|
"title": "Multiple Components",
|
||||||
"intro": "We refactor the master/detail view into separate components",
|
"intro": "We refactor the master/detail view into separate components",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt4": {
|
"toh-pt4": {
|
||||||
"title": "Services",
|
"title": "Services",
|
||||||
"intro": "We create a reusable service to manage our hero data calls",
|
"intro": "We create a reusable service to manage our hero data calls",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt5": {
|
"toh-pt5": {
|
||||||
"title": "Routing",
|
"title": "Routing",
|
||||||
"intro": "We add the Angular Component Router and learn to navigate among the views",
|
"intro": "We add the Angular Component Router and learn to navigate among the views",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -8,7 +8,8 @@
|
||||||
|
|
||||||
"quickstart": {
|
"quickstart": {
|
||||||
"icon": "query-builder",
|
"icon": "query-builder",
|
||||||
"title": "5 Min Quickstart"
|
"title": "5 Min Quickstart",
|
||||||
|
"description": "Get up and running with Angular 2"
|
||||||
},
|
},
|
||||||
|
|
||||||
"tutorial": {
|
"tutorial": {
|
||||||
|
|
@ -29,25 +30,34 @@
|
||||||
"banner": "How to solve common implementation challenges."
|
"banner": "How to solve common implementation challenges."
|
||||||
},
|
},
|
||||||
|
|
||||||
"testing": {
|
|
||||||
"icon": "list",
|
|
||||||
"title": "Testing Guides",
|
|
||||||
"banner": "Angular 2 is currently in Beta."
|
|
||||||
},
|
|
||||||
|
|
||||||
"api": {
|
"api": {
|
||||||
"icon": "book",
|
"icon": "book",
|
||||||
"title": "API Preview"
|
"title": "API Preview",
|
||||||
|
"reference": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"cheatsheet": {
|
||||||
|
"title": "Angular Cheat Sheet",
|
||||||
|
"intro": "A quick quide to Angular syntax.",
|
||||||
|
"reference": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"glossary": {
|
||||||
|
"title": "Glossary",
|
||||||
|
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
|
||||||
|
"reference": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"resources": {
|
"resources": {
|
||||||
"icon": "play-circle-fill",
|
"icon": "play-circle-fill",
|
||||||
"title": "Angular Resources",
|
"title": "Angular Resources",
|
||||||
"banner": "Angular 2 is currently in Beta."
|
"banner": "Angular 2 is currently in Beta.",
|
||||||
|
"resources": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"help": {
|
"help": {
|
||||||
"icon": "chat",
|
"icon": "chat",
|
||||||
"title": "Help & Support"
|
"title": "Help & Support",
|
||||||
|
"resources": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
- var base = '/docs/ts/latest/'
|
|
||||||
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Tutorial
|
|
||||||
.nav-primary-link
|
|
||||||
a(href='#{base}quickstart.html') 5 Min Quickstart
|
|
||||||
.nav-sub-title Case Study: Tour of Heroes
|
|
||||||
.nav-ordered-lists
|
|
||||||
ol
|
|
||||||
li: a(href='#{base}tutorial') Introduction
|
|
||||||
li: a(href='#{base}tutorial/toh-pt1.html') The Hero Editor
|
|
||||||
li: a(href='#{base}tutorial/toh-pt2.html') Master/Detail
|
|
||||||
li: a(href='#{base}tutorial/toh-pt3.html') Multiple Components
|
|
||||||
li: a(href='#{base}tutorial/toh-pt4.html') Services
|
|
||||||
li: a(href='#{base}tutorial/toh-pt5.html') Routing
|
|
||||||
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Basics
|
|
||||||
.nav-ordered-lists
|
|
||||||
ol
|
|
||||||
li: a(href='#{base}guide') Overview
|
|
||||||
li: a(href='#{base}guide/architecture.html') Architecture
|
|
||||||
li: a(href='#{base}guide/displaying-data.html') Displaying Data
|
|
||||||
li: a(href='#{base}guide/user-input.html') User Input
|
|
||||||
li: a(href='#{base}guide/forms.html') Forms
|
|
||||||
li: a(href='#{base}guide/dependency-injection.html') Dependency Injection
|
|
||||||
li: a(href='#{base}guide/template-syntax.html') Template Syntax
|
|
||||||
li: a(href='#{base}guide/cheatsheet.html') Angular Cheat Sheet
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Developer Guide
|
|
||||||
.nav-unordered-lists
|
|
||||||
ul
|
|
||||||
li: a(href='#{base}guide/attribute-directives.html') Attribute Directives
|
|
||||||
li: a(href='#{base}guide/hierarchical-dependency-injection.html') Hierarchical Injectors
|
|
||||||
li: a(href='#{base}guide/server-communication.html') Http Client
|
|
||||||
li: a(href='#{base}guide/lifecycle-hooks.html') Lifecycle Hooks
|
|
||||||
li: a(href='#{base}guide/npm-packages.html') Npm Packages
|
|
||||||
li: a(href='#{base}guide/pipes.html') Pipes
|
|
||||||
li: a(href='#{base}guide/router.html') Routing & Navigation
|
|
||||||
li: a(href='#{base}guide/structural-directives.html') Structural Directives
|
|
||||||
li: a(href='#{base}guide/testing.html') Testing
|
|
||||||
li: a(href='#{base}guide/typescript-configuration.html') TypeScript Configuration
|
|
||||||
li: a(href='#{base}guide/upgrade.html') Upgrading from 1.x
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Cookbook
|
|
||||||
.nav-unordered-lists
|
|
||||||
ul
|
|
||||||
li: a(href='#{base}cookbook') Overview
|
|
||||||
li: a(href='#{base}cookbook/a1-a2-quick-reference.html') Angular 1 to 2 Quick Ref
|
|
||||||
li: a(href='#{base}cookbook/component-communication.html') Component Interaction
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Reference
|
|
||||||
.nav-unordered-lists
|
|
||||||
ul
|
|
||||||
li: a(href='#{base}api') API Preview
|
|
||||||
li: a(href='#{base}cheatsheet.html') Angular Cheat Sheet
|
|
||||||
li: a(href='#{base}guide/glossary.html') Glossary
|
|
||||||
.nav-blocks
|
|
||||||
.nav-title Resources
|
|
||||||
.nav-unordered-lists
|
|
||||||
ul
|
|
||||||
li: a(href='#{base}resources.html') Angular Resources
|
|
||||||
li: a(href='#{base}help.html') Help & Support
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
|
- var base = current.path[4] ? '.' : './guide';
|
||||||
.banner
|
.banner
|
||||||
p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
|
p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
|
||||||
|
|
||||||
article(class="l-content-small grid-fluid docs-content")
|
article(class="l-content-small grid-fluid docs-content")
|
||||||
.cheatsheet
|
.cheatsheet
|
||||||
ngio-cheatsheet(src='./guide/cheatsheet.json')
|
ngio-cheatsheet(src= base + '/cheatsheet.json')
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
{
|
{
|
||||||
"_listtype": "alpha",
|
|
||||||
|
|
||||||
"index": {
|
"index": {
|
||||||
"title": "Cookbook",
|
"title": "Cookbook",
|
||||||
|
"navTitle": "Overview",
|
||||||
"description": "A collection of recipes for common Angular application scenarios"
|
"description": "A collection of recipes for common Angular application scenarios"
|
||||||
},
|
},
|
||||||
|
|
||||||
"a1-a2-quick-reference": {
|
"a1-a2-quick-reference": {
|
||||||
"title": "Angular 1 to 2 Quick Ref",
|
"title": "Angular 1 to 2 Quick Reference",
|
||||||
|
"navTitle": "Angular 1 to 2 Quick Ref",
|
||||||
"description": "Learn how Angular 1 concepts and techniques map to Angular 2"
|
"description": "Learn how Angular 1 concepts and techniques map to Angular 2"
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,637 @@
|
||||||
|
include _util-fns
|
||||||
|
|
||||||
|
// #docregion intro
|
||||||
|
:marked
|
||||||
|
# Angular 2 Glossary
|
||||||
|
|
||||||
|
Angular 2 has a vocabulary of its own.
|
||||||
|
Most Angular 2 terms are everyday English words
|
||||||
|
with a specific meaning within the Angular system.
|
||||||
|
|
||||||
|
We have gathered here the most prominent terms
|
||||||
|
and a few less familiar ones that have unusual or
|
||||||
|
unexpected definitions.
|
||||||
|
|
||||||
|
[A](#A) [B](#B) [C](#C) [D](#D) [E](#E) [F](#F) [G](#G) [H](#H) [I](#I)
|
||||||
|
[J](#J) [K](#K) [L](#L) [M](#M) [N](#N) [O](#O) [P](#P) [Q](#Q) [R](#R)
|
||||||
|
[S](#S) [T](#T) [U](#U) [V](#V) [W](#W) [X](#X) [Y](#Y) [Z](#Z)
|
||||||
|
// #enddocregion intro
|
||||||
|
|
||||||
|
// #docregion a1
|
||||||
|
<a id="A"></a>
|
||||||
|
// #enddocregion a1
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## Annotation
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
In practice a synonym for [Decoration](#decorator).
|
||||||
|
// #enddocregion a-1
|
||||||
|
// #docregion a-2
|
||||||
|
:marked
|
||||||
|
## Attribute Directive
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
A category of [Directive](#directive) that can listen to and modify the behavior of
|
||||||
|
other HTML elements, attributes, properties, and components. They are usually represented
|
||||||
|
as HTML attributes, hence the name.
|
||||||
|
|
||||||
|
The `ngClass` directive for adding and removing CSS class names is a good example of
|
||||||
|
an Attribute Directive.
|
||||||
|
// #enddocregion a-2
|
||||||
|
|
||||||
|
// #docregion b-c
|
||||||
|
- var lang = current.path[1]
|
||||||
|
- var decorator = lang = 'dart' ? 'annotation' : '[decorator](#decorator)'
|
||||||
|
- var atSym = lang == 'js' ? '' : '@'
|
||||||
|
<a id="B"></a>
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## Barrel
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
A **barrel** is an Angular library module consisting of a logical grouping of single-purpose modules
|
||||||
|
such as `Component` and `Directive`.
|
||||||
|
|
||||||
|
Familiar barrels include `angular2/core`, `angular2/common`, `angular2/platform/browser`,
|
||||||
|
`angular2/http`, and `angular2/router`.
|
||||||
|
|
||||||
|
Barrels are packaged and shipped as [**bundles**](#bundle) that
|
||||||
|
we may load with script tags in our `index.html`.
|
||||||
|
|
||||||
|
The script, `angular2.dev.js`, is a bundle.
|
||||||
|
|
||||||
|
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
|
||||||
|
|
||||||
|
:marked
|
||||||
|
## Binding
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
Almost always refers to [Data Binding](#data-binding) and the act of
|
||||||
|
binding an HTML object property to a data object property.
|
||||||
|
|
||||||
|
May refer to a [Dependency Injection](#dependency-injection) binding
|
||||||
|
between a "token" or "key" and a dependency [provider](#provider).
|
||||||
|
This more rare usage should be clear in context.
|
||||||
|
|
||||||
|
:marked
|
||||||
|
## Bootstrap
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
We launch an Angular application by "bootstrapping" it with the `bootstrap` method.
|
||||||
|
The `bootstrap` method identifies an application's top level "root" [Component](#component)
|
||||||
|
and optionally registers service [providers](#provider) with the
|
||||||
|
[dependency injection system](#dependency-injection).
|
||||||
|
|
||||||
|
One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
|
||||||
|
|
||||||
|
:marked
|
||||||
|
## Bundle
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
Angular JavaScript libraries are shipped in **bundles** within an **npm package**
|
||||||
|
such as [angular2](https://www.npmjs.com/package/angular2).
|
||||||
|
|
||||||
|
The scripts `angular2.dev.js`, `http.js`, `router.js`, and `Rx.js` are
|
||||||
|
familiar examples of bundles.
|
||||||
|
|
||||||
|
A bundle contains one more more [**barrels**](#barrel)
|
||||||
|
and each barrel contains a collection of logically related [modules](#module)
|
||||||
|
|
||||||
|
Familiar barrels include `angular2/core`, `angular2/common`, `angular2/platform/browser`,
|
||||||
|
`angular2/http`, `angular2/router`.
|
||||||
|
|
||||||
|
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
|
||||||
|
|
||||||
|
<a id="C"></a>
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## Component
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
An Angular class responsible for exposing data
|
||||||
|
to a [View](#view) and handling most of the view’s display
|
||||||
|
and user-interaction logic.
|
||||||
|
|
||||||
|
The Component is one of the most important building blocks in the Angular system.
|
||||||
|
It is, in fact, an Angular [Directive](#directive) with a companion [Template](#template).
|
||||||
|
|
||||||
|
The developer applies the `#{atSym}Component` #{decorator} to
|
||||||
|
the component class, thereby attaching to the class the essential component metadata
|
||||||
|
that Angular needs to create a component instance and render it with its template
|
||||||
|
as a view.
|
||||||
|
|
||||||
|
Those familiar with "MVC" and "MVVM" patterns will recognize
|
||||||
|
the Component in the role of "Controller" or "View Model".
|
||||||
|
// #enddocregion b-c
|
||||||
|
|
||||||
|
// #docregion d1
|
||||||
|
<a id="D"></a>
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## Data Binding
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
Applications display data values to a user and respond to user
|
||||||
|
actions (clicks, touches, keystrokes).
|
||||||
|
|
||||||
|
We could push application data values into HTML, attach
|
||||||
|
event listeners, pull changed values from the screen, and
|
||||||
|
update application data values ... all by hand.
|
||||||
|
|
||||||
|
Or we could declare the relationship between an HTML widget
|
||||||
|
and an application data source ... and let a data binding
|
||||||
|
framework handle the details.
|
||||||
|
|
||||||
|
Data Binding is that second approach. Angular has a rich
|
||||||
|
data binding framework with a variety of data binding
|
||||||
|
operations and supporting declaration syntax.
|
||||||
|
|
||||||
|
The many forms of binding include:
|
||||||
|
* [Interpolation](template-syntax.html#interpolation)
|
||||||
|
* [Property Binding](template-syntax.html#property-binding)
|
||||||
|
* [Event Binding](template-syntax.html#event-binding)
|
||||||
|
* [Attribute Binding](template-syntax.html#attribute-binding)
|
||||||
|
* [Class Binding](template-syntax.html#class-binding)
|
||||||
|
* [Style Binding](template-syntax.html#style-binding)
|
||||||
|
* [Two-way data binding with ngModel](template-syntax.html#ng-model)
|
||||||
|
|
||||||
|
Learn more about data binding in the
|
||||||
|
[Template Syntax](template-syntax.html#data-binding) chapter.
|
||||||
|
|
||||||
|
// #enddocregion d1
|
||||||
|
<a id="decorator"></a> <a id="decoration"></a>
|
||||||
|
:marked
|
||||||
|
## Decorator | Decoration
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
|
||||||
|
|
||||||
|
Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (AKA ES7).
|
||||||
|
|
||||||
|
We apply a decorator by positioning it
|
||||||
|
immediately above or to the left of the thing it decorates.
|
||||||
|
|
||||||
|
Angular has its own set of decorators to help it interoperate with our application parts.
|
||||||
|
Here is an example of a `@Component` decorator that identifies a
|
||||||
|
class as an Angular [Component](#component) and an `@Input` decorator applied to a property
|
||||||
|
of that component.
|
||||||
|
The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
|
||||||
|
```
|
||||||
|
@Component({...})
|
||||||
|
export class AppComponent {
|
||||||
|
constructor(@Inject('SpecialFoo') public foo:Foo) {}
|
||||||
|
@Input()
|
||||||
|
name:string;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
The scope of a decorator is limited to the language feature
|
||||||
|
that it decorates. None of the decorations shown here will "leak" to other
|
||||||
|
classes appearing below it in the file.
|
||||||
|
|
||||||
|
.alert.is-important
|
||||||
|
:marked
|
||||||
|
Always include the parentheses `()` when applying a decorator.
|
||||||
|
A decorator is a **function** that must be called when applied.
|
||||||
|
|
||||||
|
// #docregion d2
|
||||||
|
:marked
|
||||||
|
## Dependency Injection
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
Dependency Injection is both a design pattern and a mechanism
|
||||||
|
for creating and delivering parts of an application to other
|
||||||
|
parts of an application that request them.
|
||||||
|
|
||||||
|
Angular developers prefer to build applications by defining many simple parts
|
||||||
|
that each do one thing well and then wire them together at runtime.
|
||||||
|
|
||||||
|
These parts often rely on other parts. An Angular [Component](#component)
|
||||||
|
part might rely on a service part to get data or perform a calculation. When a
|
||||||
|
part "A" relies on another part "B", we say that "A" depends on "B" and
|
||||||
|
that "B" is a dependency of "A".
|
||||||
|
|
||||||
|
We can ask a "Dependency Injection System" to create "A"
|
||||||
|
for us and handle all the dependencies.
|
||||||
|
If "A" needs "B" and "B" needs "C", the system resolves that chain of dependencies
|
||||||
|
and returns a fully prepared instance of "A".
|
||||||
|
|
||||||
|
Angular provides and relies upon its own sophisticated
|
||||||
|
[Dependency Injection](dependency-injection.html) system
|
||||||
|
to assemble and run applications by "injecting" application parts
|
||||||
|
into other application parts where and when needed.
|
||||||
|
|
||||||
|
At the core is an [`Injector`](#injector) that returns dependency values on request.
|
||||||
|
The expression `injector.get(token)` returns the value associated with the given token.
|
||||||
|
|
||||||
|
A token is an Angular type (`OpaqueToken`). We rarely deal with tokens directly; most
|
||||||
|
methods accept a class name (`Foo`) or a string ("foo") and Angular converts it
|
||||||
|
to a token. When we write `injector.get(Foo)`, the injector returns
|
||||||
|
the value associated with the token for the `Foo` class, typically an instance of `Foo` itself.
|
||||||
|
|
||||||
|
Angular makes similar requests internally during many of its operations
|
||||||
|
as when it creates a [`Component`](#AppComponent) for display.
|
||||||
|
|
||||||
|
The `Injector` maintains an internal map of tokens to dependency values.
|
||||||
|
If the `Injector` can't find a value for a given token, it creates
|
||||||
|
a new value using a `Provider` for that token.
|
||||||
|
|
||||||
|
A [Provider](#provider) is a recipe for
|
||||||
|
creating new instances of a dependency value associated with a particular token.
|
||||||
|
|
||||||
|
An injector can only create a value for a given token if it has
|
||||||
|
a `Provider` for that token in its internal provider registry.
|
||||||
|
Registering providers is a critical preparatory step.
|
||||||
|
|
||||||
|
Angular registers some of its own providers with every injector.
|
||||||
|
We can register our own providers. Quite often the best time to register a `Provider`
|
||||||
|
is when we [bootstrap](#bootstrap) the application.
|
||||||
|
There are other opportunities to register as well.
|
||||||
|
|
||||||
|
Learn more in the [Dependency Injection](dependency-injection.html) chapter.
|
||||||
|
:marked
|
||||||
|
## Directive
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
An Angular class responsible for creating, re-shaping, and interacting with HTML elements
|
||||||
|
in the browser DOM. Directives are Angular's most fundamental feature.
|
||||||
|
|
||||||
|
A Directive is almost always associated with an HTML element or attribute.
|
||||||
|
We often refer to such an element or attribute as the directive itself.
|
||||||
|
When Angular finds a directive in an HTML template,
|
||||||
|
it creates the matching directive class instance
|
||||||
|
and gives that instance control over that portion of the browser DOM.
|
||||||
|
|
||||||
|
Developers can invent custom HTML markup (e.g., `<my-directive>`) to
|
||||||
|
associate with their custom directives. They add this custom markup to HTML templates
|
||||||
|
as if they were writing native HTML. In this way, directives become extensions of
|
||||||
|
HTML itself.
|
||||||
|
|
||||||
|
Directives fall into one of three categories:
|
||||||
|
|
||||||
|
1. [Components](#component) that combine application logic with an HTML template to
|
||||||
|
render application [views]. Components are usually represented as HTML elements.
|
||||||
|
They are the building blocks of an Angular application and the
|
||||||
|
developer can expect to write a lot of them.
|
||||||
|
|
||||||
|
1. [Attribute Directives](#attribute-directive) that can listen to and modify the behavior of
|
||||||
|
other HTML elements, attributes, properties, and components. They are usually represented
|
||||||
|
as HTML attributes, hence the name.
|
||||||
|
|
||||||
|
1. [Structural Directives](#structural-directive), a directive responsible for
|
||||||
|
shaping or re-shaping HTML layout, typically by adding, removing, or manipulating
|
||||||
|
elements and their children.
|
||||||
|
// #enddocregion d2
|
||||||
|
|
||||||
|
// #docregion e1
|
||||||
|
<a id="E"></a>
|
||||||
|
// #enddocregion e1
|
||||||
|
// #docregion e2
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## ECMAScript
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript).
|
||||||
|
|
||||||
|
The latest approved version of JavaScript is
|
||||||
|
[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
|
||||||
|
(AKA "ES2015" or "ES6") and many Angular 2 developers will write their applications
|
||||||
|
either in this version of the language or a dialect that strives to be
|
||||||
|
compatible with it such as [TypeScript](#typesScript).
|
||||||
|
|
||||||
|
Most modern browsers today only support the prior "ECMAScript 5" (AKA ES5) standard.
|
||||||
|
Applications written in ES2015 or one of its dialects must be "[transpiled](#transpile)"
|
||||||
|
to ES5 JavaScript.
|
||||||
|
|
||||||
|
Angular 2 developers may choose to write in ES5 directly.
|
||||||
|
:marked
|
||||||
|
## ECMAScript 2015
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
The lastest released version of JavaScript,
|
||||||
|
[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
|
||||||
|
(AKA "ES2015" or "ES6")
|
||||||
|
:marked
|
||||||
|
## ES2015
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
Short hand for "[ECMAScript 2015](#ecmascript=2015)".
|
||||||
|
:marked
|
||||||
|
## ES6
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
Short hand for "[ECMAScript 2015](#ecmascript=2015)".
|
||||||
|
:marked
|
||||||
|
## ES5
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
Short hand for "ECMAScript 5", the version of JavaScript run by most modern browsers.
|
||||||
|
See [ECMAScript](#ecmascript).
|
||||||
|
// #enddocregion e2
|
||||||
|
|
||||||
|
// #docregion f-l
|
||||||
|
<a id="F"></a>
|
||||||
|
<a id="G"></a>
|
||||||
|
<a id="H"></a>
|
||||||
|
<a id="I"></a>
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## Injector
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
An object in the Angular [dependency injection system](#dependency-injection)
|
||||||
|
that can find a named "dependency" in its cache or create such a thing
|
||||||
|
with a registered [provider](#provider).
|
||||||
|
|
||||||
|
:marked
|
||||||
|
## Input
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
A directive property that can be the ***target*** of a
|
||||||
|
[Property Binding](template-syntax.html#property-binding).
|
||||||
|
Data values flow *into* this property from the data source identified
|
||||||
|
in the template expression to the right of the equal sign.
|
||||||
|
|
||||||
|
See the [Template Syntax](template-syntax.html#inputs-outputs) chapter.
|
||||||
|
|
||||||
|
:marked
|
||||||
|
## Interpolation
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
A form of [Property Data Binding](#data-binding) in which a
|
||||||
|
[template expression](#template-expression) between double-curly braces
|
||||||
|
renders as text. That text may be concatenated with neighboring text
|
||||||
|
before it is assigned to an element property
|
||||||
|
or displayed between element tags as in this example.
|
||||||
|
|
||||||
|
code-example(language="html" escape="html").
|
||||||
|
<label>My current hero is {{hero.name}}</label>
|
||||||
|
|
||||||
|
:marked
|
||||||
|
Learn more about interpolation in the
|
||||||
|
[Template Syntax](template-syntax.html#interpolation) chapter.
|
||||||
|
|
||||||
|
|
||||||
|
<a id="J"></a>
|
||||||
|
<a id="K"></a>
|
||||||
|
<a id="L"></a>
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## Lifecycle Hooks
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
[Directives](#directive) and [Components](#component) have a lifecycle
|
||||||
|
managed by Angular as it creates, updates and destroys them.
|
||||||
|
|
||||||
|
Developers can tap into key moments in that lifecycle by implementing
|
||||||
|
one or more of the "Lifecycle Hook" interfaces.
|
||||||
|
|
||||||
|
Each interface has a single hook method whose name is the interface name prefixed with `ng`.
|
||||||
|
For example, the `OnInit` interface has a hook method names `ngOnInit`.
|
||||||
|
|
||||||
|
Angular calls these hook methods in the following order:
|
||||||
|
* `ngOnChanges` - called when an [input](#input)/[output](#output) binding values change
|
||||||
|
* `ngOnInit` - after the first `ngOnChanges`
|
||||||
|
* `ngDoCheck` - developer's custom change detection
|
||||||
|
* `ngAfterContentInit` - after component content initialized
|
||||||
|
* `ngAfterContentChecked` - after every check of component content
|
||||||
|
* `ngAfterViewInit` - after component's view(s) are initialized
|
||||||
|
* `ngAfterViewChecked` - after every check of a component's view(s)
|
||||||
|
* `ngOnDestroy` - just before the directive is destroyed.
|
||||||
|
|
||||||
|
Learn more in the [Lifecycle Hooks](lifecycle-hooks.html) chapter.
|
||||||
|
// #enddocregion f-l
|
||||||
|
|
||||||
|
// #docregion m1
|
||||||
|
<a id="M"></a>
|
||||||
|
// #enddocregion m1
|
||||||
|
// #docregion m2
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## Module
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
Angular apps are modular.
|
||||||
|
|
||||||
|
In general, we assemble our application from many modules, both the ones we write ourselves
|
||||||
|
and the ones we acquire from others.
|
||||||
|
|
||||||
|
A typical module is a cohesive block of code dedicated to a single purpose.
|
||||||
|
|
||||||
|
A module **exports** something of value in that code, typically one thing such as a class.
|
||||||
|
A module that needs that thing, **imports** it.
|
||||||
|
|
||||||
|
The structure of Angular modules and the import/export syntax
|
||||||
|
is based on the [ES2015](#es2015) module standard
|
||||||
|
described [here](http://www.2ality.com/2014/09/es6-modules-final.html).
|
||||||
|
|
||||||
|
An application that adheres to this standard requires a module loader to
|
||||||
|
load modules on request and resolve inter-module dependencies.
|
||||||
|
Angular does not ship with a module loader and does not have a preference
|
||||||
|
for any particular 3rd party library (although most samples use SystemJS).
|
||||||
|
Application developers may pick any module library that conforms to the standard
|
||||||
|
|
||||||
|
Modules are typically named after the file in which the exported thing is defined.
|
||||||
|
The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/date_pipe.ts)
|
||||||
|
class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
|
||||||
|
|
||||||
|
Developers rarely access Angular feature modules directly.
|
||||||
|
We usually import them from public-facing **library modules**
|
||||||
|
called [**barrels**](#barrel). Barrels are groups of logically related modules.
|
||||||
|
The `angular2/core` barrel is a good example.
|
||||||
|
|
||||||
|
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
|
||||||
|
// #enddocregion m2
|
||||||
|
|
||||||
|
// #docregion n-s
|
||||||
|
- var lang = current.path[1]
|
||||||
|
- var decorator = lang = 'dart' ? 'annotation' : '[decorator](#decorator)'
|
||||||
|
- var atSym = lang == 'js' ? '' : '@'
|
||||||
|
<a id="N"></a>
|
||||||
|
<a id="O"></a>
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## Output
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
A directive property that can be the ***target*** of an
|
||||||
|
[Event Binding](template-syntax.html#property-binding).
|
||||||
|
Events stream *out* of this property to the receiver identified
|
||||||
|
in the template expression to the right of the equal sign.
|
||||||
|
|
||||||
|
See the [Template Syntax](template-syntax.html#inputs-outputs) chapter.
|
||||||
|
|
||||||
|
.l-main-section
|
||||||
|
<a id="P"></a>
|
||||||
|
:marked
|
||||||
|
## Pipe
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
An Angular pipe is a function that transforms input values to output values for
|
||||||
|
display in a [view](#view). We use the `#{atSym}Pipe` #{decorator}
|
||||||
|
to associate the pipe function with a name. We then can use that
|
||||||
|
name in our HTML to declaratively transform values on screen.
|
||||||
|
|
||||||
|
Here's an example that uses the built-in `currency` pipe to display
|
||||||
|
a numeric value in the local currency.
|
||||||
|
|
||||||
|
code-example(language="html" escape="html").
|
||||||
|
<label>Price: </label>{{product.price | currency}}
|
||||||
|
:marked
|
||||||
|
Learn more in the chapter on [pipes](pipes.html) .
|
||||||
|
|
||||||
|
:marked
|
||||||
|
## Provider
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
A Provider creates a new instance of a dependency for the Dependency Injection system.
|
||||||
|
It relates a lookup token to code - sometimes called a "recipe" - that can create a dependency value.
|
||||||
|
|
||||||
|
For example, `new Provider(Foo, {useClass: Foo})` creates a `Provider`
|
||||||
|
that relates the `Foo` token to a function that creates a new instance of the `Foo` class.
|
||||||
|
|
||||||
|
There are other ways to create tokens and recipes.
|
||||||
|
See [Dependency Injection](#dependency-injection) chapter to learn more.
|
||||||
|
|
||||||
|
.l-main-section
|
||||||
|
<a id="Q"></a>
|
||||||
|
<a id="R"></a>
|
||||||
|
:marked
|
||||||
|
## Router
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
Most applications consist of many screens or [views](#view).
|
||||||
|
The user navigates among them by clicking links and buttons
|
||||||
|
and taking other similar actions that cause the application to
|
||||||
|
replace one view with another.
|
||||||
|
|
||||||
|
The Angular [Component Router](router.html) is a richly featured mechanism for configuring
|
||||||
|
and managing the entire view navigation process including the creation and destruction
|
||||||
|
of views.
|
||||||
|
:marked
|
||||||
|
## Routing Component
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
A [Component](#component) with an attached router.
|
||||||
|
|
||||||
|
In most cases, the component became attached to a [router](#router) by means
|
||||||
|
of a `#{atSym}RouterConfig` #{decorator} that defined routes to views controlled by this component.
|
||||||
|
|
||||||
|
The component's template has a `RouterOutlet` element where it can display views produced by the router.
|
||||||
|
|
||||||
|
It likely has anchor tags or buttons with `RouterLink` directives that users can click to navigate.
|
||||||
|
|
||||||
|
<a id="S"></a>
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## Structural Directive
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
A category of [Directive](#directive) that can
|
||||||
|
shape or re-shape HTML layout, typically by adding, removing, or manipulating
|
||||||
|
elements and their children.
|
||||||
|
|
||||||
|
The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are
|
||||||
|
good examples in this category.
|
||||||
|
// #enddocregion n-s
|
||||||
|
|
||||||
|
// #docregion t1
|
||||||
|
<a id="T"></a>
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## Template
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
A template is a chunk of HTML that Angular uses to render a [view](#view) with
|
||||||
|
the support and continuing guidance of an Angular [Directive](#directive),
|
||||||
|
most notably a [Component](#component).
|
||||||
|
|
||||||
|
We write templates in a special [Template Syntax](template-syntax.html).
|
||||||
|
|
||||||
|
:marked
|
||||||
|
## Template Expression
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
An expression in a JavaScript-like syntax that Angular evaluates within
|
||||||
|
a [data binding](#data-binding). Learn how to write template expressions
|
||||||
|
in the [Template Syntax](template-syntax.html#template-expressions) chapter.
|
||||||
|
|
||||||
|
// #enddocregion t1
|
||||||
|
// #docregion t2
|
||||||
|
:marked
|
||||||
|
## Transpile
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
The process of transforming code written in one form of JavaScript
|
||||||
|
(e.g., TypeScript) into another form of JavaScript (e.g., [ES5](#es5)).
|
||||||
|
|
||||||
|
:marked
|
||||||
|
## TypeScript
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
A version of JavaScript that supports most [ECMAScript 2015](#ecmascript=2015)
|
||||||
|
language features and many features that may arrive in future versions
|
||||||
|
of JavaScript such as [Decorators](#decorator).
|
||||||
|
|
||||||
|
TypeScript is also noteable for its optional typing system which gives
|
||||||
|
us compile-time type-checking and strong tooling support (e.g. "intellisense",
|
||||||
|
code completion, refactoring, and intelligent search). Many code editors
|
||||||
|
and IDEs support TypeScript either natively or with plugins.
|
||||||
|
|
||||||
|
TypeScript is the preferred language for Angular 2 development although
|
||||||
|
we are welcome to write in other JavaScript dialects such as [ES5](#es5).
|
||||||
|
|
||||||
|
Angular 2 itself is written in TypeScript.
|
||||||
|
|
||||||
|
Learn more about TypeScript on its [website](http://www.typescriptlang.org/).
|
||||||
|
// #enddocregion t2
|
||||||
|
|
||||||
|
// #docregion u-z
|
||||||
|
<a id="U"></a>
|
||||||
|
<a id="V"></a>
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## View
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
A view is a portion of the screen that displays information and responds
|
||||||
|
to user actions such as clicks, mouse moves, and keystrokes.
|
||||||
|
|
||||||
|
Angular renders a view under the control of one or more [Directives](#directive),
|
||||||
|
especially [Component](#component) directives and their companion [Templates](#template).
|
||||||
|
The Component plays such a prominent role that we often
|
||||||
|
find it convenient to refer to a component as a view.
|
||||||
|
|
||||||
|
Views often contain other views and any view might be loaded and unloaded
|
||||||
|
dynamically as the user navigates through the application, typically
|
||||||
|
under the control of a [router](#router).
|
||||||
|
|
||||||
|
.l-main-section
|
||||||
|
<a id="W"></a>
|
||||||
|
<a id="X"></a>
|
||||||
|
<a id="Y"></a>
|
||||||
|
<a id="Z"></a>
|
||||||
|
:marked
|
||||||
|
## Zone
|
||||||
|
.l-sub-section
|
||||||
|
:marked
|
||||||
|
Zones are a mechanism for encapsulating and intercepting
|
||||||
|
a JavaScript application's asynchronous activity.
|
||||||
|
|
||||||
|
The browser DOM and JavaScript have a limited number
|
||||||
|
of asynchronous activities, activities such as DOM events (e.g., clicks),
|
||||||
|
[promises](#promise), and
|
||||||
|
[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
|
||||||
|
calls to remote servers.
|
||||||
|
|
||||||
|
Zones intercept all of these activities and give a "zone client" the opportunity
|
||||||
|
to take action before and after the async activity completes.
|
||||||
|
|
||||||
|
Angular runs our application in a zone where it can respond to
|
||||||
|
asynchronous events by checking for data changes and updating
|
||||||
|
the information it displays via [data binding](#data-binding).
|
||||||
|
|
||||||
|
Learn more about zones in this
|
||||||
|
[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
|
||||||
|
// #enddocregion u-z
|
||||||
|
|
@ -1,45 +1,60 @@
|
||||||
{
|
{
|
||||||
"_listtype": "ordered",
|
|
||||||
|
|
||||||
"index": {
|
"index": {
|
||||||
"title": "Documentation Overview",
|
"title": "Documentation Overview",
|
||||||
"nextable":true
|
"navTitle": "Overview",
|
||||||
|
"description": "How to read and use this documentation",
|
||||||
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"architecture": {
|
"architecture": {
|
||||||
"title": "Architecture Overview",
|
"title": "Architecture Overview",
|
||||||
|
"navTitle": "Architecture",
|
||||||
"intro": "The basic building blocks of Angular 2 applications",
|
"intro": "The basic building blocks of Angular 2 applications",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"displaying-data": {
|
"displaying-data": {
|
||||||
"title": "Displaying Data",
|
"title": "Displaying Data",
|
||||||
"intro": "Interpolation and other forms of property binding help us show app data in the UI.",
|
"intro": "Interpolation and other forms of property binding help us show app data in the UI.",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"user-input": {
|
"user-input": {
|
||||||
"title": "User Input",
|
"title": "User Input",
|
||||||
"intro": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models.",
|
"intro": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models.",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"forms": {
|
"forms": {
|
||||||
"title": "Forms",
|
"title": "Forms",
|
||||||
"intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.",
|
"intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"dependency-injection": {
|
"dependency-injection": {
|
||||||
"title": "Dependency Injection",
|
"title": "Dependency Injection",
|
||||||
"intro": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\".",
|
"intro": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\".",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"template-syntax": {
|
"template-syntax": {
|
||||||
"title": "Template Syntax",
|
"title": "Template Syntax",
|
||||||
"intro": "Learn how to write templates that display data and consume user events with the help of data binding.",
|
"intro": "Learn how to write templates that display data and consume user events with the help of data binding.",
|
||||||
"nextable":true
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"cheatsheet": {
|
||||||
|
"title": "Angular Cheat Sheet",
|
||||||
|
"intro": "A quick quide to Angular syntax.",
|
||||||
|
"nextable": true,
|
||||||
|
"basics": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"attribute-directives": {
|
"attribute-directives": {
|
||||||
|
|
@ -48,7 +63,8 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
"hierarchical-dependency-injection": {
|
"hierarchical-dependency-injection": {
|
||||||
"title": "Hierarchical Injectors",
|
"title": "Hierarchical Dependency Injectors",
|
||||||
|
"navTitle": "Hierarchical Injectors",
|
||||||
"intro": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree."
|
"intro": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree."
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -87,18 +103,19 @@
|
||||||
"intro": "Techniques and practices for testing an Angular 2 app"
|
"intro": "Techniques and practices for testing an Angular 2 app"
|
||||||
},
|
},
|
||||||
|
|
||||||
"upgrade": {
|
|
||||||
"title": "Upgrading from 1.x",
|
|
||||||
"intro": "Angular 1 applications can be incrementally upgraded to Angular 2."
|
|
||||||
},
|
|
||||||
|
|
||||||
"typescript-configuration": {
|
"typescript-configuration": {
|
||||||
"title": "TypeScript Configuration",
|
"title": "TypeScript Configuration",
|
||||||
"intro": "TypeScript configuration for Angular 2 developers"
|
"intro": "TypeScript configuration for Angular 2 developers"
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"upgrade": {
|
||||||
|
"title": "Upgrading from 1.x",
|
||||||
|
"intro": "Angular 1 applications can be incrementally upgraded to Angular 2."
|
||||||
|
},
|
||||||
|
|
||||||
"glossary": {
|
"glossary": {
|
||||||
"title": "Glossary",
|
"title": "Glossary",
|
||||||
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary"
|
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
|
||||||
|
"hide": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1 @@
|
||||||
.banner
|
!= partial("../cheatsheet")
|
||||||
p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
|
|
||||||
|
|
||||||
article(class="l-content-small grid-fluid docs-content")
|
|
||||||
.cheatsheet
|
|
||||||
ngio-cheatsheet(src='./cheatsheet.json')
|
|
||||||
|
|
|
||||||
|
|
@ -1,637 +1 @@
|
||||||
include ../_util-fns
|
!= partial("../glossary")
|
||||||
|
|
||||||
// #docregion intro
|
|
||||||
:marked
|
|
||||||
# Angular 2 Glossary
|
|
||||||
|
|
||||||
Angular 2 has a vocabulary of its own.
|
|
||||||
Most Angular 2 terms are everyday English words
|
|
||||||
with a specific meaning within the Angular system.
|
|
||||||
|
|
||||||
We have gathered here the most prominent terms
|
|
||||||
and a few less familiar ones that have unusual or
|
|
||||||
unexpected definitions.
|
|
||||||
|
|
||||||
[A](#A) [B](#B) [C](#C) [D](#D) [E](#E) [F](#F) [G](#G) [H](#H) [I](#I)
|
|
||||||
[J](#J) [K](#K) [L](#L) [M](#M) [N](#N) [O](#O) [P](#P) [Q](#Q) [R](#R)
|
|
||||||
[S](#S) [T](#T) [U](#U) [V](#V) [W](#W) [X](#X) [Y](#Y) [Z](#Z)
|
|
||||||
// #enddocregion intro
|
|
||||||
|
|
||||||
// #docregion a1
|
|
||||||
<a id="A"></a>
|
|
||||||
// #enddocregion a1
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## Annotation
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
In practice a synonym for [Decoration](#decorator).
|
|
||||||
// #enddocregion a-1
|
|
||||||
// #docregion a-2
|
|
||||||
:marked
|
|
||||||
## Attribute Directive
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
A category of [Directive](#directive) that can listen to and modify the behavior of
|
|
||||||
other HTML elements, attributes, properties, and components. They are usually represented
|
|
||||||
as HTML attributes, hence the name.
|
|
||||||
|
|
||||||
The `ngClass` directive for adding and removing CSS class names is a good example of
|
|
||||||
an Attribute Directive.
|
|
||||||
// #enddocregion a-2
|
|
||||||
|
|
||||||
// #docregion b-c
|
|
||||||
- var lang = current.path[1]
|
|
||||||
- var decorator = lang = 'dart' ? 'annotation' : '[decorator](#decorator)'
|
|
||||||
- var atSym = lang == 'js' ? '' : '@'
|
|
||||||
<a id="B"></a>
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## Barrel
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
A **barrel** is an Angular library module consisting of a logical grouping of single-purpose modules
|
|
||||||
such as `Component` and `Directive`.
|
|
||||||
|
|
||||||
Familiar barrels include `angular2/core`, `angular2/common`, `angular2/platform/browser`,
|
|
||||||
`angular2/http`, and `angular2/router`.
|
|
||||||
|
|
||||||
Barrels are packaged and shipped as [**bundles**](#bundle) that
|
|
||||||
we may load with script tags in our `index.html`.
|
|
||||||
|
|
||||||
The script, `angular2.dev.js`, is a bundle.
|
|
||||||
|
|
||||||
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
|
|
||||||
|
|
||||||
:marked
|
|
||||||
## Binding
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
Almost always refers to [Data Binding](#data-binding) and the act of
|
|
||||||
binding an HTML object property to a data object property.
|
|
||||||
|
|
||||||
May refer to a [Dependency Injection](#dependency-injection) binding
|
|
||||||
between a "token" or "key" and a dependency [provider](#provider).
|
|
||||||
This more rare usage should be clear in context.
|
|
||||||
|
|
||||||
:marked
|
|
||||||
## Bootstrap
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
We launch an Angular application by "bootstrapping" it with the `bootstrap` method.
|
|
||||||
The `bootstrap` method identifies an application's top level "root" [Component](#component)
|
|
||||||
and optionally registers service [providers](#provider) with the
|
|
||||||
[dependency injection system](#dependency-injection).
|
|
||||||
|
|
||||||
One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
|
|
||||||
|
|
||||||
:marked
|
|
||||||
## Bundle
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
Angular JavaScript libraries are shipped in **bundles** within an **npm package**
|
|
||||||
such as [angular2](https://www.npmjs.com/package/angular2).
|
|
||||||
|
|
||||||
The scripts `angular2.dev.js`, `http.js`, `router.js`, and `Rx.js` are
|
|
||||||
familiar examples of bundles.
|
|
||||||
|
|
||||||
A bundle contains one more more [**barrels**](#barrel)
|
|
||||||
and each barrel contains a collection of logically related [modules](#module)
|
|
||||||
|
|
||||||
Familiar barrels include `angular2/core`, `angular2/common`, `angular2/platform/browser`,
|
|
||||||
`angular2/http`, `angular2/router`.
|
|
||||||
|
|
||||||
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
|
|
||||||
|
|
||||||
<a id="C"></a>
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## Component
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
An Angular class responsible for exposing data
|
|
||||||
to a [View](#view) and handling most of the view’s display
|
|
||||||
and user-interaction logic.
|
|
||||||
|
|
||||||
The Component is one of the most important building blocks in the Angular system.
|
|
||||||
It is, in fact, an Angular [Directive](#directive) with a companion [Template](#template).
|
|
||||||
|
|
||||||
The developer applies the `#{atSym}Component` #{decorator} to
|
|
||||||
the component class, thereby attaching to the class the essential component metadata
|
|
||||||
that Angular needs to create a component instance and render it with its template
|
|
||||||
as a view.
|
|
||||||
|
|
||||||
Those familiar with "MVC" and "MVVM" patterns will recognize
|
|
||||||
the Component in the role of "Controller" or "View Model".
|
|
||||||
// #enddocregion b-c
|
|
||||||
|
|
||||||
// #docregion d1
|
|
||||||
<a id="D"></a>
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## Data Binding
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
Applications display data values to a user and respond to user
|
|
||||||
actions (clicks, touches, keystrokes).
|
|
||||||
|
|
||||||
We could push application data values into HTML, attach
|
|
||||||
event listeners, pull changed values from the screen, and
|
|
||||||
update application data values ... all by hand.
|
|
||||||
|
|
||||||
Or we could declare the relationship between an HTML widget
|
|
||||||
and an application data source ... and let a data binding
|
|
||||||
framework handle the details.
|
|
||||||
|
|
||||||
Data Binding is that second approach. Angular has a rich
|
|
||||||
data binding framework with a variety of data binding
|
|
||||||
operations and supporting declaration syntax.
|
|
||||||
|
|
||||||
The many forms of binding include:
|
|
||||||
* [Interpolation](template-syntax.html#interpolation)
|
|
||||||
* [Property Binding](template-syntax.html#property-binding)
|
|
||||||
* [Event Binding](template-syntax.html#event-binding)
|
|
||||||
* [Attribute Binding](template-syntax.html#attribute-binding)
|
|
||||||
* [Class Binding](template-syntax.html#class-binding)
|
|
||||||
* [Style Binding](template-syntax.html#style-binding)
|
|
||||||
* [Two-way data binding with ngModel](template-syntax.html#ng-model)
|
|
||||||
|
|
||||||
Learn more about data binding in the
|
|
||||||
[Template Syntax](template-syntax.html#data-binding) chapter.
|
|
||||||
|
|
||||||
// #enddocregion d1
|
|
||||||
<a id="decorator"></a> <a id="decoration"></a>
|
|
||||||
:marked
|
|
||||||
## Decorator | Decoration
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
|
|
||||||
|
|
||||||
Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (AKA ES7).
|
|
||||||
|
|
||||||
We apply a decorator by positioning it
|
|
||||||
immediately above or to the left of the thing it decorates.
|
|
||||||
|
|
||||||
Angular has its own set of decorators to help it interoperate with our application parts.
|
|
||||||
Here is an example of a `@Component` decorator that identifies a
|
|
||||||
class as an Angular [Component](#component) and an `@Input` decorator applied to a property
|
|
||||||
of that component.
|
|
||||||
The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
|
|
||||||
```
|
|
||||||
@Component({...})
|
|
||||||
export class AppComponent {
|
|
||||||
constructor(@Inject('SpecialFoo') public foo:Foo) {}
|
|
||||||
@Input()
|
|
||||||
name:string;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
The scope of a decorator is limited to the language feature
|
|
||||||
that it decorates. None of the decorations shown here will "leak" to other
|
|
||||||
classes appearing below it in the file.
|
|
||||||
|
|
||||||
.alert.is-important
|
|
||||||
:marked
|
|
||||||
Always include the parentheses `()` when applying a decorator.
|
|
||||||
A decorator is a **function** that must be called when applied.
|
|
||||||
|
|
||||||
// #docregion d2
|
|
||||||
:marked
|
|
||||||
## Dependency Injection
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
Dependency Injection is both a design pattern and a mechanism
|
|
||||||
for creating and delivering parts of an application to other
|
|
||||||
parts of an application that request them.
|
|
||||||
|
|
||||||
Angular developers prefer to build applications by defining many simple parts
|
|
||||||
that each do one thing well and then wire them together at runtime.
|
|
||||||
|
|
||||||
These parts often rely on other parts. An Angular [Component](#component)
|
|
||||||
part might rely on a service part to get data or perform a calculation. When a
|
|
||||||
part "A" relies on another part "B", we say that "A" depends on "B" and
|
|
||||||
that "B" is a dependency of "A".
|
|
||||||
|
|
||||||
We can ask a "Dependency Injection System" to create "A"
|
|
||||||
for us and handle all the dependencies.
|
|
||||||
If "A" needs "B" and "B" needs "C", the system resolves that chain of dependencies
|
|
||||||
and returns a fully prepared instance of "A".
|
|
||||||
|
|
||||||
Angular provides and relies upon its own sophisticated
|
|
||||||
[Dependency Injection](dependency-injection.html) system
|
|
||||||
to assemble and run applications by "injecting" application parts
|
|
||||||
into other application parts where and when needed.
|
|
||||||
|
|
||||||
At the core is an [`Injector`](#injector) that returns dependency values on request.
|
|
||||||
The expression `injector.get(token)` returns the value associated with the given token.
|
|
||||||
|
|
||||||
A token is an Angular type (`OpaqueToken`). We rarely deal with tokens directly; most
|
|
||||||
methods accept a class name (`Foo`) or a string ("foo") and Angular converts it
|
|
||||||
to a token. When we write `injector.get(Foo)`, the injector returns
|
|
||||||
the value associated with the token for the `Foo` class, typically an instance of `Foo` itself.
|
|
||||||
|
|
||||||
Angular makes similar requests internally during many of its operations
|
|
||||||
as when it creates a [`Component`](#AppComponent) for display.
|
|
||||||
|
|
||||||
The `Injector` maintains an internal map of tokens to dependency values.
|
|
||||||
If the `Injector` can't find a value for a given token, it creates
|
|
||||||
a new value using a `Provider` for that token.
|
|
||||||
|
|
||||||
A [Provider](#provider) is a recipe for
|
|
||||||
creating new instances of a dependency value associated with a particular token.
|
|
||||||
|
|
||||||
An injector can only create a value for a given token if it has
|
|
||||||
a `Provider` for that token in its internal provider registry.
|
|
||||||
Registering providers is a critical preparatory step.
|
|
||||||
|
|
||||||
Angular registers some of its own providers with every injector.
|
|
||||||
We can register our own providers. Quite often the best time to register a `Provider`
|
|
||||||
is when we [bootstrap](#bootstrap) the application.
|
|
||||||
There are other opportunities to register as well.
|
|
||||||
|
|
||||||
Learn more in the [Dependency Injection](dependency-injection.html) chapter.
|
|
||||||
:marked
|
|
||||||
## Directive
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
An Angular class responsible for creating, re-shaping, and interacting with HTML elements
|
|
||||||
in the browser DOM. Directives are Angular's most fundamental feature.
|
|
||||||
|
|
||||||
A Directive is almost always associated with an HTML element or attribute.
|
|
||||||
We often refer to such an element or attribute as the directive itself.
|
|
||||||
When Angular finds a directive in an HTML template,
|
|
||||||
it creates the matching directive class instance
|
|
||||||
and gives that instance control over that portion of the browser DOM.
|
|
||||||
|
|
||||||
Developers can invent custom HTML markup (e.g., `<my-directive>`) to
|
|
||||||
associate with their custom directives. They add this custom markup to HTML templates
|
|
||||||
as if they were writing native HTML. In this way, directives become extensions of
|
|
||||||
HTML itself.
|
|
||||||
|
|
||||||
Directives fall into one of three categories:
|
|
||||||
|
|
||||||
1. [Components](#component) that combine application logic with an HTML template to
|
|
||||||
render application [views]. Components are usually represented as HTML elements.
|
|
||||||
They are the building blocks of an Angular application and the
|
|
||||||
developer can expect to write a lot of them.
|
|
||||||
|
|
||||||
1. [Attribute Directives](#attribute-directive) that can listen to and modify the behavior of
|
|
||||||
other HTML elements, attributes, properties, and components. They are usually represented
|
|
||||||
as HTML attributes, hence the name.
|
|
||||||
|
|
||||||
1. [Structural Directives](#structural-directive), a directive responsible for
|
|
||||||
shaping or re-shaping HTML layout, typically by adding, removing, or manipulating
|
|
||||||
elements and their children.
|
|
||||||
// #enddocregion d2
|
|
||||||
|
|
||||||
// #docregion e1
|
|
||||||
<a id="E"></a>
|
|
||||||
// #enddocregion e1
|
|
||||||
// #docregion e2
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## ECMAScript
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript).
|
|
||||||
|
|
||||||
The latest approved version of JavaScript is
|
|
||||||
[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
|
|
||||||
(AKA "ES2015" or "ES6") and many Angular 2 developers will write their applications
|
|
||||||
either in this version of the language or a dialect that strives to be
|
|
||||||
compatible with it such as [TypeScript](#typesScript).
|
|
||||||
|
|
||||||
Most modern browsers today only support the prior "ECMAScript 5" (AKA ES5) standard.
|
|
||||||
Applications written in ES2015 or one of its dialects must be "[transpiled](#transpile)"
|
|
||||||
to ES5 JavaScript.
|
|
||||||
|
|
||||||
Angular 2 developers may choose to write in ES5 directly.
|
|
||||||
:marked
|
|
||||||
## ECMAScript 2015
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
The lastest released version of JavaScript,
|
|
||||||
[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
|
|
||||||
(AKA "ES2015" or "ES6")
|
|
||||||
:marked
|
|
||||||
## ES2015
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
Short hand for "[ECMAScript 2015](#ecmascript=2015)".
|
|
||||||
:marked
|
|
||||||
## ES6
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
Short hand for "[ECMAScript 2015](#ecmascript=2015)".
|
|
||||||
:marked
|
|
||||||
## ES5
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
Short hand for "ECMAScript 5", the version of JavaScript run by most modern browsers.
|
|
||||||
See [ECMAScript](#ecmascript).
|
|
||||||
// #enddocregion e2
|
|
||||||
|
|
||||||
// #docregion f-l
|
|
||||||
<a id="F"></a>
|
|
||||||
<a id="G"></a>
|
|
||||||
<a id="H"></a>
|
|
||||||
<a id="I"></a>
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## Injector
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
An object in the Angular [dependency injection system](#dependency-injection)
|
|
||||||
that can find a named "dependency" in its cache or create such a thing
|
|
||||||
with a registered [provider](#provider).
|
|
||||||
|
|
||||||
:marked
|
|
||||||
## Input
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
A directive property that can be the ***target*** of a
|
|
||||||
[Property Binding](template-syntax.html#property-binding).
|
|
||||||
Data values flow *into* this property from the data source identified
|
|
||||||
in the template expression to the right of the equal sign.
|
|
||||||
|
|
||||||
See the [Template Syntax](template-syntax.html#inputs-outputs) chapter.
|
|
||||||
|
|
||||||
:marked
|
|
||||||
## Interpolation
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
A form of [Property Data Binding](#data-binding) in which a
|
|
||||||
[template expression](#template-expression) between double-curly braces
|
|
||||||
renders as text. That text may be concatenated with neighboring text
|
|
||||||
before it is assigned to an element property
|
|
||||||
or displayed between element tags as in this example.
|
|
||||||
|
|
||||||
code-example(language="html" escape="html").
|
|
||||||
<label>My current hero is {{hero.name}}</label>
|
|
||||||
|
|
||||||
:marked
|
|
||||||
Learn more about interpolation in the
|
|
||||||
[Template Syntax](template-syntax.html#interpolation) chapter.
|
|
||||||
|
|
||||||
|
|
||||||
<a id="J"></a>
|
|
||||||
<a id="K"></a>
|
|
||||||
<a id="L"></a>
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## Lifecycle Hooks
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
[Directives](#directive) and [Components](#component) have a lifecycle
|
|
||||||
managed by Angular as it creates, updates and destroys them.
|
|
||||||
|
|
||||||
Developers can tap into key moments in that lifecycle by implementing
|
|
||||||
one or more of the "Lifecycle Hook" interfaces.
|
|
||||||
|
|
||||||
Each interface has a single hook method whose name is the interface name prefixed with `ng`.
|
|
||||||
For example, the `OnInit` interface has a hook method names `ngOnInit`.
|
|
||||||
|
|
||||||
Angular calls these hook methods in the following order:
|
|
||||||
* `ngOnChanges` - called when an [input](#input)/[output](#output) binding values change
|
|
||||||
* `ngOnInit` - after the first `ngOnChanges`
|
|
||||||
* `ngDoCheck` - developer's custom change detection
|
|
||||||
* `ngAfterContentInit` - after component content initialized
|
|
||||||
* `ngAfterContentChecked` - after every check of component content
|
|
||||||
* `ngAfterViewInit` - after component's view(s) are initialized
|
|
||||||
* `ngAfterViewChecked` - after every check of a component's view(s)
|
|
||||||
* `ngOnDestroy` - just before the directive is destroyed.
|
|
||||||
|
|
||||||
Learn more in the [Lifecycle Hooks](lifecycle-hooks.html) chapter.
|
|
||||||
// #enddocregion f-l
|
|
||||||
|
|
||||||
// #docregion m1
|
|
||||||
<a id="M"></a>
|
|
||||||
// #enddocregion m1
|
|
||||||
// #docregion m2
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## Module
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
Angular apps are modular.
|
|
||||||
|
|
||||||
In general, we assemble our application from many modules, both the ones we write ourselves
|
|
||||||
and the ones we acquire from others.
|
|
||||||
|
|
||||||
A typical module is a cohesive block of code dedicated to a single purpose.
|
|
||||||
|
|
||||||
A module **exports** something of value in that code, typically one thing such as a class.
|
|
||||||
A module that needs that thing, **imports** it.
|
|
||||||
|
|
||||||
The structure of Angular modules and the import/export syntax
|
|
||||||
is based on the [ES2015](#es2015) module standard
|
|
||||||
described [here](http://www.2ality.com/2014/09/es6-modules-final.html).
|
|
||||||
|
|
||||||
An application that adheres to this standard requires a module loader to
|
|
||||||
load modules on request and resolve inter-module dependencies.
|
|
||||||
Angular does not ship with a module loader and does not have a preference
|
|
||||||
for any particular 3rd party library (although most samples use SystemJS).
|
|
||||||
Application developers may pick any module library that conforms to the standard
|
|
||||||
|
|
||||||
Modules are typically named after the file in which the exported thing is defined.
|
|
||||||
The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/date_pipe.ts)
|
|
||||||
class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
|
|
||||||
|
|
||||||
Developers rarely access Angular feature modules directly.
|
|
||||||
We usually import them from public-facing **library modules**
|
|
||||||
called [**barrels**](#barrel). Barrels are groups of logically related modules.
|
|
||||||
The `angular2/core` barrel is a good example.
|
|
||||||
|
|
||||||
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
|
|
||||||
// #enddocregion m2
|
|
||||||
|
|
||||||
// #docregion n-s
|
|
||||||
- var lang = current.path[1]
|
|
||||||
- var decorator = lang = 'dart' ? 'annotation' : '[decorator](#decorator)'
|
|
||||||
- var atSym = lang == 'js' ? '' : '@'
|
|
||||||
<a id="N"></a>
|
|
||||||
<a id="O"></a>
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## Output
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
A directive property that can be the ***target*** of an
|
|
||||||
[Event Binding](template-syntax.html#property-binding).
|
|
||||||
Events stream *out* of this property to the receiver identified
|
|
||||||
in the template expression to the right of the equal sign.
|
|
||||||
|
|
||||||
See the [Template Syntax](template-syntax.html#inputs-outputs) chapter.
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
<a id="P"></a>
|
|
||||||
:marked
|
|
||||||
## Pipe
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
An Angular pipe is a function that transforms input values to output values for
|
|
||||||
display in a [view](#view). We use the `#{atSym}Pipe` #{decorator}
|
|
||||||
to associate the pipe function with a name. We then can use that
|
|
||||||
name in our HTML to declaratively transform values on screen.
|
|
||||||
|
|
||||||
Here's an example that uses the built-in `currency` pipe to display
|
|
||||||
a numeric value in the local currency.
|
|
||||||
|
|
||||||
code-example(language="html" escape="html").
|
|
||||||
<label>Price: </label>{{product.price | currency}}
|
|
||||||
:marked
|
|
||||||
Learn more in the chapter on [pipes](pipes.html) .
|
|
||||||
|
|
||||||
:marked
|
|
||||||
## Provider
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
A Provider creates a new instance of a dependency for the Dependency Injection system.
|
|
||||||
It relates a lookup token to code - sometimes called a "recipe" - that can create a dependency value.
|
|
||||||
|
|
||||||
For example, `new Provider(Foo, {useClass: Foo})` creates a `Provider`
|
|
||||||
that relates the `Foo` token to a function that creates a new instance of the `Foo` class.
|
|
||||||
|
|
||||||
There are other ways to create tokens and recipes.
|
|
||||||
See [Dependency Injection](#dependency-injection) chapter to learn more.
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
<a id="Q"></a>
|
|
||||||
<a id="R"></a>
|
|
||||||
:marked
|
|
||||||
## Router
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
Most applications consist of many screens or [views](#view).
|
|
||||||
The user navigates among them by clicking links and buttons
|
|
||||||
and taking other similar actions that cause the application to
|
|
||||||
replace one view with another.
|
|
||||||
|
|
||||||
The Angular [Component Router](router.html) is a richly featured mechanism for configuring
|
|
||||||
and managing the entire view navigation process including the creation and destruction
|
|
||||||
of views.
|
|
||||||
:marked
|
|
||||||
## Routing Component
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
A [Component](#component) with an attached router.
|
|
||||||
|
|
||||||
In most cases, the component became attached to a [router](#router) by means
|
|
||||||
of a `#{atSym}RouterConfig` #{decorator} that defined routes to views controlled by this component.
|
|
||||||
|
|
||||||
The component's template has a `RouterOutlet` element where it can display views produced by the router.
|
|
||||||
|
|
||||||
It likely has anchor tags or buttons with `RouterLink` directives that users can click to navigate.
|
|
||||||
|
|
||||||
<a id="S"></a>
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## Structural Directive
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
A category of [Directive](#directive) that can
|
|
||||||
shape or re-shape HTML layout, typically by adding, removing, or manipulating
|
|
||||||
elements and their children.
|
|
||||||
|
|
||||||
The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are
|
|
||||||
good examples in this category.
|
|
||||||
// #enddocregion n-s
|
|
||||||
|
|
||||||
// #docregion t1
|
|
||||||
<a id="T"></a>
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## Template
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
A template is a chunk of HTML that Angular uses to render a [view](#view) with
|
|
||||||
the support and continuing guidance of an Angular [Directive](#directive),
|
|
||||||
most notably a [Component](#component).
|
|
||||||
|
|
||||||
We write templates in a special [Template Syntax](template-syntax.html).
|
|
||||||
|
|
||||||
:marked
|
|
||||||
## Template Expression
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
An expression in a JavaScript-like syntax that Angular evaluates within
|
|
||||||
a [data binding](#data-binding). Learn how to write template expressions
|
|
||||||
in the [Template Syntax](template-syntax.html#template-expressions) chapter.
|
|
||||||
|
|
||||||
// #enddocregion t1
|
|
||||||
// #docregion t2
|
|
||||||
:marked
|
|
||||||
## Transpile
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
The process of transforming code written in one form of JavaScript
|
|
||||||
(e.g., TypeScript) into another form of JavaScript (e.g., [ES5](#es5)).
|
|
||||||
|
|
||||||
:marked
|
|
||||||
## TypeScript
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
A version of JavaScript that supports most [ECMAScript 2015](#ecmascript=2015)
|
|
||||||
language features and many features that may arrive in future versions
|
|
||||||
of JavaScript such as [Decorators](#decorator).
|
|
||||||
|
|
||||||
TypeScript is also noteable for its optional typing system which gives
|
|
||||||
us compile-time type-checking and strong tooling support (e.g. "intellisense",
|
|
||||||
code completion, refactoring, and intelligent search). Many code editors
|
|
||||||
and IDEs support TypeScript either natively or with plugins.
|
|
||||||
|
|
||||||
TypeScript is the preferred language for Angular 2 development although
|
|
||||||
we are welcome to write in other JavaScript dialects such as [ES5](#es5).
|
|
||||||
|
|
||||||
Angular 2 itself is written in TypeScript.
|
|
||||||
|
|
||||||
Learn more about TypeScript on its [website](http://www.typescriptlang.org/).
|
|
||||||
// #enddocregion t2
|
|
||||||
|
|
||||||
// #docregion u-z
|
|
||||||
<a id="U"></a>
|
|
||||||
<a id="V"></a>
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## View
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
A view is a portion of the screen that displays information and responds
|
|
||||||
to user actions such as clicks, mouse moves, and keystrokes.
|
|
||||||
|
|
||||||
Angular renders a view under the control of one or more [Directives](#directive),
|
|
||||||
especially [Component](#component) directives and their companion [Templates](#template).
|
|
||||||
The Component plays such a prominent role that we often
|
|
||||||
find it convenient to refer to a component as a view.
|
|
||||||
|
|
||||||
Views often contain other views and any view might be loaded and unloaded
|
|
||||||
dynamically as the user navigates through the application, typically
|
|
||||||
under the control of a [router](#router).
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
<a id="W"></a>
|
|
||||||
<a id="X"></a>
|
|
||||||
<a id="Y"></a>
|
|
||||||
<a id="Z"></a>
|
|
||||||
:marked
|
|
||||||
## Zone
|
|
||||||
.l-sub-section
|
|
||||||
:marked
|
|
||||||
Zones are a mechanism for encapsulating and intercepting
|
|
||||||
a JavaScript application's asynchronous activity.
|
|
||||||
|
|
||||||
The browser DOM and JavaScript have a limited number
|
|
||||||
of asynchronous activities, activities such as DOM events (e.g., clicks),
|
|
||||||
[promises](#promise), and
|
|
||||||
[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
|
|
||||||
calls to remote servers.
|
|
||||||
|
|
||||||
Zones intercept all of these activities and give a "zone client" the opportunity
|
|
||||||
to take action before and after the async activity completes.
|
|
||||||
|
|
||||||
Angular runs our application in a zone where it can respond to
|
|
||||||
asynchronous events by checking for data changes and updating
|
|
||||||
the information it displays via [data binding](#data-binding).
|
|
||||||
|
|
||||||
Learn more about zones in this
|
|
||||||
[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
|
|
||||||
// #enddocregion u-z
|
|
||||||
|
|
|
||||||
|
|
@ -100,11 +100,11 @@ pre.prettyprint.lang-bash
|
||||||
|
|
||||||
First, we'll load the JavaScript file that defines the `Hero` class.
|
First, we'll load the JavaScript file that defines the `Hero` class.
|
||||||
|
|
||||||
```
|
code-example(format="" language="html").
|
||||||
<!-- load the application's Hero definition -->
|
<!-- load the application's Hero definition -->
|
||||||
<script src="app/hero.js"></script>
|
<script src="app/hero.js"></script>
|
||||||
```
|
|
||||||
|
|
||||||
|
:marked
|
||||||
Next, we'll add an inline script element with the `Hero`tests themselves
|
Next, we'll add an inline script element with the `Hero`tests themselves
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
@ -222,10 +222,10 @@ figure.image-display
|
||||||
### Update unit-tests.html
|
### Update unit-tests.html
|
||||||
|
|
||||||
Next we update the `unit-tests.html` with a reference to our new `hero.spec.ts` file. Delete the inline test code. The revised pertinent HTML looks like this:
|
Next we update the `unit-tests.html` with a reference to our new `hero.spec.ts` file. Delete the inline test code. The revised pertinent HTML looks like this:
|
||||||
|
code-example(format="" language="html").
|
||||||
<script src="app/hero.js"></script>
|
<script src="app/hero.js"></script>
|
||||||
<script src="app/hero.spec.js"></script>
|
<script src="app/hero.spec.js"></script>
|
||||||
|
:marked
|
||||||
### Run and Fail
|
### Run and Fail
|
||||||
|
|
||||||
Look over at the browser (live-server will have reloaded it). The browser displays
|
Look over at the browser (live-server will have reloaded it). The browser displays
|
||||||
|
|
|
||||||
|
|
@ -59,12 +59,12 @@ pre.prettyprint.lang-bash
|
||||||
|
|
||||||
We’ll write our first test with inline JavaScript inside the body tag:
|
We’ll write our first test with inline JavaScript inside the body tag:
|
||||||
|
|
||||||
```
|
code-example(format="" language="html").
|
||||||
<script>
|
<script>
|
||||||
it('true is true', function(){ expect(true).toEqual(true); });
|
it('true is true', function(){ expect(true).toEqual(true); });
|
||||||
</script>
|
</script>
|
||||||
```
|
|
||||||
|
|
||||||
|
:marked
|
||||||
Now open `unit-tests.html` in a browser and see the Jasmine HTML test output:
|
Now open `unit-tests.html` in a browser and see the Jasmine HTML test output:
|
||||||
|
|
||||||
figure.image-display
|
figure.image-display
|
||||||
|
|
@ -85,13 +85,13 @@ figure.image-display
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
The test we wrote is valid TypeScript because any JavaScript is valid TypeScript. But let’s make it more modern with an arrow function:
|
The test we wrote is valid TypeScript because any JavaScript is valid TypeScript. But let’s make it more modern with an arrow function:
|
||||||
```
|
code-example(format="" ).
|
||||||
it('true is true', () => expect(true).toEqual(true));
|
it('true is true', () => expect(true).toEqual(true));
|
||||||
```
|
:marked
|
||||||
Now modify `unit-tests.html` to load the script:
|
Now modify `unit-tests.html` to load the script:
|
||||||
```
|
code-example(format="" language="html").
|
||||||
<script src="1st.spec.js"></script>
|
<script src="1st.spec.js"></script>
|
||||||
```
|
:marked
|
||||||
Hold on! We wrote a TypeScript file but we’re loading a JavaScript file?
|
Hold on! We wrote a TypeScript file but we’re loading a JavaScript file?
|
||||||
|
|
||||||
That’s a reminder that we need to compile our TypeScript test files as we do our TypeScript application files. Do that next.
|
That’s a reminder that we need to compile our TypeScript test files as we do our TypeScript application files. Do that next.
|
||||||
|
|
@ -171,11 +171,11 @@ figure.image-display
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Let’s add another Jasmine test to `1st.spec.ts`
|
Let’s add another Jasmine test to `1st.spec.ts`
|
||||||
```
|
code-example(format="" ).
|
||||||
it('null is not the same thing as undefined',
|
it('null is not the same thing as undefined',
|
||||||
() => expect(null).not.toEqual(undefined)
|
() => expect(null).not.toEqual(undefined)
|
||||||
);
|
);
|
||||||
```
|
:marked
|
||||||
You knew that right? Let’s prove it with this test. The browser should refresh after you paste that test, and show:
|
You knew that right? Let’s prove it with this test. The browser should refresh after you paste that test, and show:
|
||||||
|
|
||||||
figure.image-display
|
figure.image-display
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ include ../_util-fns
|
||||||
|
|
||||||
We use it our `hero-detail.component.html` template to turn a hero name like “eeny weenie” into “Eeny Weenie”
|
We use it our `hero-detail.component.html` template to turn a hero name like “eeny weenie” into “Eeny Weenie”
|
||||||
|
|
||||||
code-example(format="linenums" language="html" escape="html").
|
code-example(format="." language="html" escape="html").
|
||||||
<h2>{{hero.name | initCaps}} is {{userName}}'s current super hero!</h2>
|
<h2>{{hero.name | initCaps}} is {{userName}}'s current super hero!</h2>
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
|
|
@ -66,22 +66,22 @@ code-example(format="" language="html" escape="html").
|
||||||
We are writing an Angular application afterall and
|
We are writing an Angular application afterall and
|
||||||
we were going to need Angular sooner or later. That time has come.
|
we were going to need Angular sooner or later. That time has come.
|
||||||
The `InitCapsPiep` clearly depends on Angular as is clear in the first few lines:
|
The `InitCapsPiep` clearly depends on Angular as is clear in the first few lines:
|
||||||
```
|
code-example(format="").
|
||||||
import {Pipe} from 'angular2/core';
|
import {Pipe} from 'angular2/core';
|
||||||
|
|
||||||
@Pipe({ name: 'initCaps' })
|
@Pipe({ name: 'initCaps' })
|
||||||
export class InitCapsPipe {
|
export class InitCapsPipe {
|
||||||
```
|
:marked
|
||||||
**Open** `unit-tests.html`
|
**Open** `unit-tests.html`
|
||||||
|
|
||||||
**Find** the `src="../node_modules/systemjs/dist/system.src.js"></script>`
|
**Find** the `src="../node_modules/systemjs/dist/system.src.js"></script>`
|
||||||
|
|
||||||
**Replace** Step #1 with these two scripts:
|
**Replace** Step #1 with these two scripts:
|
||||||
```
|
code-example(format="" language="html").
|
||||||
<!-- #1. add the system.js and angular libraries -->
|
<!-- #1. add the system.js and angular libraries -->
|
||||||
<script src="../node_modules/systemjs/dist/system.src.js"></script>
|
<script src="../node_modules/systemjs/dist/system.src.js"></script>
|
||||||
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
|
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||||
```
|
:marked
|
||||||
## Add another spec file
|
## Add another spec file
|
||||||
|
|
||||||
**Create** an *`init-caps-pipe.spec.ts`** next to `init-caps-pipes.ts` in `src/app`
|
**Create** an *`init-caps-pipe.spec.ts`** next to `init-caps-pipes.ts` in `src/app`
|
||||||
|
|
@ -134,13 +134,13 @@ code-example(format="" language="html" escape="html").
|
||||||
|
|
||||||
Fortunately, we can create a new `Promise` that wraps both import promises and waits
|
Fortunately, we can create a new `Promise` that wraps both import promises and waits
|
||||||
for both to finish loading.
|
for both to finish loading.
|
||||||
```
|
code-example(format="").
|
||||||
// #3. Import the spec files explicitly
|
// #3. Import the spec files explicitly
|
||||||
Promise.all([
|
Promise.all([
|
||||||
System.import('app/hero.spec'),
|
System.import('app/hero.spec'),
|
||||||
System.import('app/init-caps-pipe.spec')
|
System.import('app/init-caps-pipe.spec')
|
||||||
])
|
])
|
||||||
```
|
:marked
|
||||||
Try it. The browser should refresh and show
|
Try it. The browser should refresh and show
|
||||||
|
|
||||||
figure.image-display
|
figure.image-display
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,33 @@
|
||||||
{
|
{
|
||||||
"_listtype": "ordered",
|
|
||||||
|
|
||||||
"index": {
|
"index": {
|
||||||
"title": "Tutorial: Tour of Heroes",
|
"title": "Tutorial: Tour of Heroes",
|
||||||
|
"navTitle": "Introduction",
|
||||||
"intro": "The Tour of Heroes tutorial takes us through the steps of creating an Angular application in TypeScript.",
|
"intro": "The Tour of Heroes tutorial takes us through the steps of creating an Angular application in TypeScript.",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt1": {
|
"toh-pt1": {
|
||||||
"title": "The Hero Editor",
|
"title": "The Hero Editor",
|
||||||
"intro": "We build a simple hero editor",
|
"intro": "We build a simple hero editor",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt2": {
|
"toh-pt2": {
|
||||||
"title": "Master/Detail",
|
"title": "Master/Detail",
|
||||||
"intro": "We build a master/detail page with a list of heroes",
|
"intro": "We build a master/detail page with a list of heroes",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt3": {
|
"toh-pt3": {
|
||||||
"title": "Multiple Components",
|
"title": "Multiple Components",
|
||||||
"intro": "We refactor the master/detail view into separate components",
|
"intro": "We refactor the master/detail view into separate components",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt4": {
|
"toh-pt4": {
|
||||||
"title": "Services",
|
"title": "Services",
|
||||||
"intro": "We create a reusable service to manage our hero data calls",
|
"intro": "We create a reusable service to manage our hero data calls",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
},
|
},
|
||||||
"toh-pt5": {
|
"toh-pt5": {
|
||||||
"title": "Routing",
|
"title": "Routing",
|
||||||
"intro": "We add the Angular Component Router and learn to navigate among the views",
|
"intro": "We add the Angular Component Router and learn to navigate among the views",
|
||||||
"nextable":true
|
"nextable": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue