12/19/2016

ComparingAngular1.x&2.0

ComparingAngular1.x&2.0

TheObsorneEffect
TheAngularteamfacesaproblem.HowdoyoutalkthegreatnewfeaturesofAngular2.0underdevelopment
withoutdamaginguseofthecurrent1.x?ThiseffectisoftencalledtheObsborneeffect,namedaftera1980s
computercompanywhosemarketingcontributedtoputtingthecompanyoutofbusiness.Inshort,thebetter2.0
sounds,thelesspeoplewillwanttostartorcontinueprojectsbuiltwith1.x.
Butthesecretsout.Angular2.0isavailableongithubandyoucanplayaroundwithitusingnpminstall
angular@2.0.0alpha.6.Keepinmind,itisNOTreadyforproductionandsubjectto(likelyalotof)change.

Angular1.xvs.2.0
It'simportanttoseewhytheAngularteamaremakingsuchdrasticchanges.Angularisn'tjusttryingtokeepup,
they'repushingforwardalotofstandards,enhancementsandbetterapparchitecture.
Themoreyoulookattheeleganceof2.0,themore1.xlookslikeabunchofhacksstrewntogetherandprefixed
with'ng'.While1.xwasallaboutaddingfeaturesandgettingstuffdone,2.xshouldhaveasimplerAPIwhile
simultaneouslytargetingperformance&webstandards.
2waydatabinding
2.0:1waydatabinding
Inlargerapps,2waybindingcandevelopintospaghetti.Angular2.0willuseaconceptcalledDirectedAcyclic
Graph,akindofunidirectionalarchitecture.
ThissoundsalotlikewhatReactisdoingrightwithFlux.ThiskindofarchitecturecanbeusedwithAngularas
well.Readmore.
Though2waybindingwilldisappear,MiskohasstatedthatAngular2.0mayfunctioninawaythatdata
bindingsappear2way,thoughbehindthescenesdataflows1way.

watchers
2.0:Zone.js
$scope.$watch,$scope.$apply,$timeout.Nomore.Whew!UsingthesewaspartofthereasonAngular1.xhad
suchahugelearningcurve.
Zone.jshelpsAngulartodochangedetectionautomatically.ThissoundssimilartoReact'sreconciliationdiffing
algorithm.
TheAngularteamexplainedchangedetectionisnowfaster,useslessmemoryandlesspower.Changedetection
mayimprovefurtherwithobject.observecomingtootherbrowsers(currentlyjustChrome).
http://www.shmck.com/comparingangular1x20/

1/7

12/19/2016

ComparingAngular1.x&2.0

Zone.jsalsosupportsusingimmutableobjectsforevenfasterprocessing.Thisisbecausethecompilercan
assumethedataobjectswon'tchangeandoptimize.
[editMarch11,2015]ForamoreindepthlookathowchangedetectionwillworkinAngular2.0watchChange
DetectionReinventedbyVictorSakvin@ngConf.

componentcommunication
2.0:Insteadof$broadcast&$emit,2.0hasafewdifferences:1)YoucanemitmessagesintheDOM,rather
thanthescope.
2)Youcanputcomponentsinsideeachotherandlinkthemdirectly.Thismaybesimilartocomponentsusing
isolatescopenow.

DOM
2.0:Inmanyways,Angular2.0seemstohandleDOMstylemanipulationwithsomethingsimilartoReact.js's
virtualDOM,whichtheyreferredtoinarecentpresentationasthe"view".Inresponsetoarecentquestion
about'AngularNative?',MiskomentionedthatthisViewcouldberunonawebworkerorevenpotentiallyon
native.

scope
Datawillbeorganizedinatreelikearchitecture.
Angular2.0willalsouseWebComponentsstandards.Forexample,theshadowDOMcouldbeusedtocreatean
isolatescope.TheAngularteamexplainedthatthereisalsoashadowDOMemulatedmode(forbrowsersnot
supportwebcomponentfeaturesyet.)Thiswouldallowadditionaloptionsforisolatingcssstylesaswell.Cool!

Modules
2.0:2.0isofcoursegoingtouseES6modulesyntax.Ontopofthat,Angular2.0isexpectedtohave'amazing'
dependencyinjectionwithlazyloading.Ratherthanusingsingletons,2.0willhaveakindofhierchicaldata
structurelikelyoffersinheritancefeatures.Youwillalsobeabletocontrolthelifetimeofmodulessuchas
services.

Directives
[editMarch11,2015]
2.0:Nowcalled"Components"Stillcalleddirectives.InAngular1.x,directivesareavailableeverywhereon
instantiation,creatingnamespaceoverlapproblemsforlargeprojects.In2.0,youmustimportyourdirectives
whichavoidsthisproblem.
AlthoughI'mnotclearonhowitworks,Angular2.0willcreateaprototypicaltemplateofallpotentialbindings
tooptimizeforcompilerspeed.
Therearecurrentlythreetypesofdirectives:
http://www.shmck.com/comparingangular1x20/

2/7

12/19/2016

ComparingAngular1.x&2.0

ComponentDirectiveMadeupofaview&controller.Whatwemightrecognizeasa.directivestyle
directive.
DecoratorDirectiveaddsbehaviortoadirective.Similartothengdirectiveattributesyouadd,likeng
clickorngshow.
ViewportDirectivehandleshtmltransformationsasinngiforngrepeat.

Router
2.0:Checkitout:2.0router.Itshouldbebackportedto1.xaswell,thoughwithoutthefeatureoflazyloading
whichwasdeemedunstablefor1.x.
[edit:March8,2015]
BrianFordgaveapresentationaboutthenewrouter@ngconfthat'sworthawatch.Inithedescribeshowthe
newroutercanusebothAngular1.x&2.xmodules,allowingteamstograduallychangefromoneroutertothe
other.Healsoproposedapossiblemigrationpathfromthepopularuirouter.
Uirouterisgreat,butlackssomeimportantfeatures.Forexample,resolvecanonlypassdatabeforeapageis
loaded.Whatifyouwanttocheckifauserscurrentdataissavedinaformbeforeroutingtothenextpage?Ui
router'sresolveisaonetimetrigger.Instead,thenewrouterwillprovide'LifecycleHooks'thatletyouspecify
exactlywhenyouwantanactiontotakeplace.
Componentdirectivescanberoutedtousingthenewangularrouter.Ifthissoundscrazytoyou,youcanalready
dosomethingsimilarinangular1.xbydroppingcontrollersfordirectivesandroutingtoatemplate.Checkout
thisexampleforinspiration.

HTML
2.0:Thoughthesyntaxlooksverydifferent,keepinmindthatthedifferenceshavegoodreasonsbehindthem.
ngdirectives

ComponentsintheHTMLarebrokenupintotwotypes:(events)&[properties].Theyarewrappedinroundor
squarebracketstohelpbothhumansandthecomputerdifferentiateandoptimizeforthetwotypes.

(events)

(events)refertouserinitiatedactions.
1.x

2.0

ngclick

(click)(dblclick)

ngkeyup

(keyup)

http://www.shmck.com/comparingangular1x20/

3/7

12/19/2016

ComparingAngular1.x&2.0

[properties]

[properties]nowlinkdirectlyintotheDOMproperties.
1.x

2.0

nghide

[class:hidden]

ngchecked

[checked]

*foreach

!foreachistheproposedreplacementforngrepeat.

<ul>
<li*foreach="#iteminitemService.items"></li>
</ul>

#item

Itemsprefixedwitha#canbinddirectlyinthehtml.Nomorengmodel.

<inputtype="text"#userName/>

{{}}

Doublecurlysarestillin2.0.See!Noteverythingwillchange.

directivenames

NomorecamelCase&snakecaseconfusion.Nowyouspecifythedirectivenameinthecomponent.Assuming
Angular2.0followswebcomponentstandards,itwillrequirea''inthename.

@Component{
selector:'myAppcomponent'
}

http://www.shmck.com/comparingangular1x20/

4/7

12/19/2016

ComparingAngular1.x&2.0

FinalThoughts
Angular2.0looksfantastic.It'snotreadyyet,butyoucanplayaroundwithittoday.Checkoutthegithubfor
more.Therearealsosomeexamplesavailable,suchasng2do.
[editMarch11,2015]Definitelycatchthekeynotesfromngconf1&2aswellasthefreshfacednewangular.io
site.
Ifyou'relookingtoprepareforthelearningcurve,thereareafewthingsyoucandonow.
TryoutRobEisenbergsnewframework:Aurelia.It'sdefinitelyworthalook.
LearnmoreaboutwebcomponentsandshadowDOM.
UseES6(nowES2015?)withAngular1.x.There'sagreatexampleusingES6&JSPMhere.
LearnmoreaboutFacebook'sReact.js.Alotofgreatconceptsarestemmingfromthegreatworkthere,
includingFlux.
Ataglance,Angular1&2haveverylittleincommon.2.0looksmorelikeacompleteoverhaulthananepisode
ofPimpmyFramework.Sowiththelearningcurvefor1.x,whycontinuesinkingtimeintoaframeworkthat
mayquicklybecomevaporware?
[editMarch11,2015]
Recently,I'vehadthisquestionedanswered.Seeingthat1.x&2.xappscanworktogetherwiththenewrouteris
astrongcasetowardscontinuingwithAngular1.Ialsonowseeeffortstowardsamigrationpath,aswellasalot
ofsimilaritiesincodestyle.
Embracingchangecanbeagoodthing,butyouhavetodoitattherighttime.Tooearly,andyoureffortsmay
outweighthebenefits.Toolate,andyou're,well...you'retoolate.Fornow,Iremainenthusiasticabout1.x,and
forthatIthankthefantasticAngularcommunity.
Writtenby

ShawnMcKay
Published17Feb2015
8Comments

ShMcK

Recommend 3

Share

Login

SortbyBest

Jointhediscussion
MiskoHevery2yearsago

Directivesarestilldirectives.ThedirectiveconceptissubclassedintoComponentDirective,
DecoratorDirective,WiewportDirective.SayingthatComponentisreplacementforDirectiveisnot
quiteright.

Reply Share
TorgeirHelgevold>MiskoHeveryayearago

HerearesomesampleAngular2.0componentsincaseyouareinterested.Iamcurrentlyat
http://www.shmck.com/comparingangular1x20/

5/7

12/19/2016

ComparingAngular1.x&2.0

alpha28,butwillevolvethisovertime:http://www.syntaxsuccess.com/v...

Reply Share
ShawnMcKay

Mod >MiskoHevery 2yearsago

Itrustyouknowwhatyou'retalkingabout!I'llhavethisarticleupdatedlatertoday.

Reply Share
LucianoMammino2yearsago

Greatarticle,IreallyenjoyeditandIreallylookforwardtoseeastableversionofangular2coming
out.
Thanksforsharing

Reply Share
VladimirHavenchyk2yearsago

BTW,IguessES6nowES2015:)

Reply Share
ShawnMcKay

Mod >VladimirHavenchyk 2yearsago

Bettersnatchupthosedomainnamesnowthen!

Reply Share
VladimirHavenchyk2yearsago

Hi,thanksforyourpost,it'smostlyfullcomparisonofangular1and2I'veeverseen.
ButIseesomeinconsistencyhere:newrouterisbuiltwithatscript,butatscript==typescript,sowill
thisrouterberewrittenornot?Whatdoyouthink?
Thanks

Reply Share
ShawnMcKay

Mod >VladimirHavenchyk 2yearsago

MyunderstandingisnowatScript===TypeScript.Google&Microsoftare[workingtogether]
(http://techcrunch.com/2015/03/...ontheproposedlanguage.Goodstuff.
Youcanlearnmoreaboutthenewrouterfrom[thistalk](https://www.youtube.com/watch?...
@ngconf.I'llupdatethepostbasedonthetalk.Twoimportantnotes:apossiblemigrationpath
fromuiroutertothenewangularrouter,&theabilitytouse1.xand2.xappstogetherwiththe
router.

The New Router Brian Ford

http://www.shmck.com/comparingangular1x20/

6/7

12/19/2016

ComparingAngular1.x&2.0

Reply Share

ALSOONSHMCK

Webpack&Angular:Part3

WhyAngular+Meteor?

8comments2yearsago

6commentsayearago

SebastianBurgstallerThanksman,

gabrielpocaIusedurigo'spartiesapplication

ExtractTextPluginlooksverypromising!

tointroduceitatmycompany.

WhyJavaScriptisn'tPopularinKorea

Angular2ComponentProperties:AQuick
Overview

4comments2yearsago

thohanWerecentlydidawebsiteforKorea.

3commentsayearago

ModerntechnologymeetswhateverKoreahas.
Angular,etc.Wehadtofittheirsquare

Subscribe d AddDisqustoyoursiteAddDisqusAdd

http://www.shmck.com/comparingangular1x20/

DmitriImightbemissingthepointbutIfeel

that`someexp="someExpression"`iscleanerand
conformswithHTML,whichisthe

Privacy

7/7