NgModule.providers vs Component.providers vs Component.viewProviders
In this video Im using an online editor calledPlunkerto write and run Angular code. The book and code has since been updated to useStackBlitzinstead. To understand more about why and the differences betweenread this.
With client sideSPAs we have two strategies we can use toimplement client side routing, one is called theHashLocationStrategyandthe other is called thePathLocationStrategy.
Thedefault inAngular is thePathLocationStrategy, if we do nothing that is thestrategy Angular will employ.
Know thedifference between theHashLocationStrategyandPathLocationStrategy.
Know thepros andcons ofeach andbe able tomake ajudgement call forwhen touse each.
ToenableHashLocationStrategyinan Angular application we passuseHash: truewhen we are providing our routes withRouterModule, like so:
URLcan contain some data prepended with acharacter.
Thepart ofthe url is called thehash fragment.
Its normally used so that people can link toa particular section inaHTMLpage, specifically anchor tags, forexample if there is ananchor tag with anname attribute ofrouting-strategieslike so:
Then thebrowser would openandthenscroll downso that thea name=routing-strategies/atag is atthe top ofthe page.
However it has another very important characteristic inthat anything past theinaURLnever gets sent tothe server.
So if yourURLwasthen thebrowser makes aGETrequest toonly.
If you were tolook atyour logs onthe server you would never see any reference to/foo/moo/loo
Another way tothink about thehash fragment, since its never sent tothe server, is that its forstoring thestate ofyourclientapplication.
Its therefore anideal solution forimplementingclientside routing:-
Its part oftheURLso can be bookmarked andsent toother people.
It wont confuse theserver side since thehash fragment is never sent tothe server.
Andthats exactly why, fora number ofyears, theprimary way ofimplementing client side routing was via hash fragments.
Taking alook atthe app weve built so far, if running locally theURLs look something like:
According tothe theserver there is only ever oneURLlocalhost:4040, theotherhash fragmentstuff is ignored bythe server.
This is why we call what we are building aSingle Page Application, there is only ever onepagerequested from theserver. Inthe above example itslocalhost:4040 theother pages are just changes tothe hash fragment which theclient application deals with, from theperspective ofthe server thewhole site is just asingle page.
This is thedefaultstrategy inAngular so we need todo nothing toenable it.
It takes advantage ofa relatively newHTML5APIcalledpushstate(from theHTML5 historyAPI).
Byusingpushstatewe can change theURLandnothave thebrowser request thepage from theserver andwithoutneeding touse ahash fragment.
Byusing thepushstateAPIwe can change theURLto
Andthe browserwontmake aGETrequest tothe server for/artist/1234/tracks
That sounds perfect forclient side routing right?
We get aURLthat looks just like any otherURLso can be bookmarked, shared andso on.
Thebrowser doesnt send therequest tothe server so therouting is handled onthe client side.
Unfortunately it has one big downside, if we then reloaded thepage orbookmarked andopened it later thebrowserwouldmake arequest tothe server fore.g.localhost:4040/artist/1234/tracks
Byusing ahash fragment theserverneverneeds toknow about any applicationURL, it will only ever get asked forthe root page andit will only ever return theroot page.
But byusing aPathLocationStrategytheserver needs tobe able toreturn themain application code foreveryURL, not just therootURL.
So withPathLocationStrategywe need toco-operatewith aserver side that supports this functionality, its possible andquite easy toimplement aserver side like this but it does require some effort andcooperation.
When using thePathLocationStrategywe need totell thebrowser what will be prefixed tothe requested path togenerate theURL.
We do that byspecifying abase href, either inthe head section ofourHTMLlike so:
Oryou canprovideit tothe DI framework it via thesymbolAPP_BASE_href.
Thevalue ofthe base href gets prepended toevery navigation request we make, so if we ask tonavigate to[moo,foo]with theabove href theURLwould change to/my/app/moo/foo
What if we could build anapp that rendered thepage onthe server side andreturned that tothe client, andfrom that point onlet theclient handle therouting?
What if we reloaded thepage atlocalhost:4040/artist/1234/tracksandthe server atlocalhost:4040rendered thepage.
Theserver called theiTunesAPIs andgenerated theHTMLforthe tracks page, it returned it tothe browser andthe browser just displayed it. Then if theuser clicked onsearch theclient application takes over andhandles therouting onthe client side.
That is something calledAngular Universal, orIsomorphic Renderingbut essentially its theability torun Angular inboth thebrowserandtheserver side.
Thebig benefit ofAngular Universal is that pages can be cached onthe server side andapplications will then load much faster.
ForAngular Universal toworkURLs need tobe passed tothe server side which is why it can only work with aPathLocationStrategyandnot aHashLocationStrategy.
Thedefault client side routing strategy used inAngular is thePathLocationStrategy.
This changes theURLprogrammatically using theHTML5 HistoryAPIinsuch away that thebrowser doesnt make arequest tothe server forthe newURL.
Forthis towork we do need toserve our Angular application from aserver that supports requests onmultiple differentURLs, ata minimum all this server side needs todo is return thesame page forall thedifferentURLs thats requested from it.
Its not alot ofwork but does need someco-operationfrom theserver side.
PathLocationStrategyalso sets us up fora future architecture where we can speed up loading time bypre-rendering thepages with Angular running onthe server side andthen once its downloaded tothe browser theclient can take over routing. This is calledAngular Universalandits currently indevelopment.
HashLocationStrategyuses thehash fragment part oftheURLtostore state forthe client, it easier tosetup anddoesnt require anyco-operationfrom theserver side but has thedownside that it wont work withAngular Universalonce thats released.
Caught a mistake or want to contribute to the book?Edit this page on GitHub!