LearningAngular2
TableofContents
LearningAngular2
Credits
AbouttheAuthor
Acknowledgments
AbouttheReviewer
www.PacktPub.com
eBooks,discountoffers,andmore
Whysubscribe?
Preface
Whatthisbookcovers
Whatyouneedforthisbook
Whothisbookisfor
Conventions
Readerfeedback
Customersupport
Downloadingtheexamplecode
Errata
Piracy
Questions
1.CreatingOurVeryFirstComponentinAngular2
Afreshstart
Webcomponents
WhyTypeScriptoverothersyntaxes?
Settingupourworkspace
Installingdependencies
InstallingTypeScript
InstallingTypeScripttypings
Hello,Angular2!
TypeScriptclasses
Introducingmetadatadecorators
CompilingTypeScriptintobrowser-friendlyJavaScript
TheHTMLcontainer
Servingtheexamplesofthisbook
Puttingeverythingtogether
EnhancingourIDE
SublimeText3
Atom
VisualStudioCode
WebStorm
LeveragingGulpwithotherIDEs
DivingdeeperintoAngular2components
Improvingproductivity
Componentmethodsanddataupdates
Addinginteractivitytothecomponent
ImprovingthedataoutputintheviewandpolishingtheUI
Summary
2.IntroducingTypeScript
UnderstandingthecaseforTypeScript
ThebenefitsofTypeScript
IntroducingTypeScriptresourcesinthewild
TheTypeScriptofficialsite
TheTypeScriptWiki
TypesinTypeScript
String
DeclaringourvariablestheECMAScript6way
Number
Boolean
Array
Dynamictypingwiththeanytype
Enum
Void
Typeinference
Functions,lambdas,andexecutionflow
Annotatingtypesinourfunctions
FunctionparametersinTypeScript
Optionalparameters
Defaultparameters
Restparameters
Overloadingthefunctionsignature
Betterfunctionsyntaxandscopehandlingwithlambdas
Classes,interfaces,andclassinheritance
Anatomyofaclass–constructors,properties,methods,getters,andsetters
InterfacesinTypeScript
Extendingclasseswithclassinheritance
DecoratorsinTypeScript
Classdecorators
Extendingtheclassdecoratorfunctionsignature
Propertydecorators
Methoddecorators
Parameterdecorators
Organizingourapplicationswithmodules
Internalmodules
Externalmodules
Theroadahead
Summary
3.ImplementingPropertiesandEventsinOurComponents
Abettertemplatesyntax
Databindingswithinputproperties
Someextrasyntacticsugarwhenbindingexpressions
Eventbindingwithoutputproperties
Inputandoutputpropertiesinaction
Settingupcustomvaluesdeclaratively
Communicatingbetweencomponentsthroughcustomevents
Emittingdatathroughcustomevents
Localreferencesintemplates
Alternativesyntaxforinputandoutputproperties
Configuringourtemplatefromourcomponentclass
Internalandexternaltemplates
EncapsulatingCSSstyling
Thestylesproperty
ThestyleUrlsproperty
Inlinestylesheets
Managingviewencapsulation
Summary
4.EnhancingOurComponentswithPipesandDirectives
DirectivesinAngular2
Coredirectives
NgIf
NgFor
NgStyle
NgClass
NgSwitch,NgSwitchWhen,andNgSwitchDefault
ManipulatingtemplatebindingswithPipes
Theuppercase/lowercasepipe
Thenumber,percent,andcurrencypipes
Thenumberpipe
Thepercentpipe
Thecurrencypipe
Theslicepipe
Thedatepipe
TheJSONpipe
Thereplacepipe
Thei18npipes
Thei18nPluralpipe
Thei18nSelectpipe
Theasyncpipe
PuttingitalltogetherinthePomodorotasklist
SettingupourmainHTMLcontainer
BuildingourtasklisttablewithAngulardirectives