[PDF] angular project structure example github
[PDF] angular projects for practice
[PDF] angular projects with source code free download
[PDF] angular routing tutorial step by step
[PDF] angular sample project git
[PDF] angular sample project step by step
[PDF] angular sample projects for beginners
[PDF] angular service interface naming convention
[PDF] angular step by step for beginners
[PDF] angular tutorial for beginners 2020
[PDF] angular tutorial for beginners learn angular from scratch
[PDF] angular tutorial for beginners learn angular from scratch mosh
[PDF] angular tutorial for beginners step by step
[PDF] angular tutorial for beginners step by step javatpoint
[PDF] angular tutorial for beginners step by step youtube
MigratinganAngularJSAppto Angul ar KimMaida, Auth0Inc. Version1.3.0,2017 Contents 1In troduction4 1.1Angul arJS1andAngular2+....................4 1.2Migrat evs.Upgrade.........................5 2A ngular1App"ng1-dinos "6 2.1Depe ndencies.............................6 2.2Ins tallandRun"ng1-dinos".....................6 3I ntroducingAngular2App"ng2-dinos"8 3.1Dep endencies.............................8 3.2Ini tializeng2-dinos..........................9 3.3Linti ngandStyleGuide.......................9 4Cu stomizingOurAngular2ProjectforMi gration11 4.1Boots trapCSS............................11 4.2Thir dPartyLibraries........................12 4.3Glob alSCSS.............................13 4.4Updat eAppFileStruc ture.....................15 5A ngular2RootAppCompon ent 16 5.1AppC omponent Template......................17 5.2AppC omponent Styles........................18 5.3AppC omponent TypeScript.....................18 6An gular2HeaderComponent 20 6.1AddHe aderEleme nttoAppComponen tTemplate........21 6.2Header ComponentTempl ate....................22 6.3Header ComponentStyle s......................22 7An gular2ComponentInte ract ion25 7.1Header ComponentTypeS cript...................25 7.2Header Communicationw ithAppComponent...........26 8An gular2Observablesan dDO MProperties29 1
8.1AddO bservablet oAppComponentTypeScript..........29 8.2Add DOMPropert ytoAppCompon entTemplate........31 9An gular2FooterComponen t33 9.1Foote rComponentTypeScr ipt...................33 9.2Foote rComponentTemplat e....................34 9.3Foote rComponentStyles......................34 9.4AddF ootertoAppC omponentTemplate.............34 10Mi gratingAngular2Pages36 10.1Creat eHome,About,and404PageC omponents.........36 10.2Add TitleProv idertoAppModule .................36 10.3AddT itletoPageC omponents...................37 10.4HomeCom ponentT emplate.....................39 10.5AboutC omponentTem plate....................39 10.6404Comp onen tTemplate......................40 11Rou tinginAngular241 11.1Cre ateaRoutingModule ......................41 11.2Impor tRoutingModulein AppModule..............43 11.3Dis playRoutedComponents....................43 11.4Route Navigation...........................44 11.5Route rEvents.............................45 11.6Auto- closeMenuinHeaderComponent..............45 12Cal linganAPIinAngular247 12.1Din osaurAPIDataModel......................47 12.2AddHT TPClient ModuletoAp pModule.............48 12.3GetAP IDatawith DinosSe rvice..................49 12.4Prov idetheDinosServiceinApp Module.............50 12.5Useth eDinosS ervicein HomeComponent............51 12.6Disp layaListofDinosaurs.....................52 13Di splayDinoCards55 13.1Dino CardComponentTy peScript .................55 13.2Dino CardComponentTe mplate..................56 13.3Disp layDinoCardinHomeComponen t..............56 14Mi gratingAngular1Filteringt oAngular258 14.1NoFil ter orOrderByPipes.....................58 14.2Creat eaFilterService ........................59 14.3UseAngu lar2Fil terServiceto Se arch...............60 14.3.1Filter inHomeComponentTypeSc ript...........60 14.3.2Filter inHomeComponentTemplat e............62 14.3.3Filter inHomeComponentStyles ..............63 15Mi gratingDetailComponenttoA ngular265 2
15.1Routi ngwithParameters......................65 15.2Link ingtoRouteswithParame ters.................66 16Cal lingtheAPIforDataby ID67 16.1Cre ateaDinoDetailsMo del ....................67 16.2AddHT TPObservab letoGetDi nosaurbyID..........68 16.3Using APIDatainDetail Compone nt...............69 16.3.1DetailC omponentTypeScrip t...............69 16.3.2DetailC omponentTemplate................70 16.3.3DetailC omponentStyles..................72 17Load ingStateforAPICall s74 17.1Loadin gImageAsset.........................74 17.2Loading ComponentTypeS cript..................74 17.3AddLoad ingCompone nttoAppModule .............75 17.4AddLoad ingComponen ttoHomeComponen t..........76 17.4.1ImplementLoadingFunctionalityin HomeComponent TypeScript..........................76 17.4.2ImplementLoadingFunctionalityin HomeComponent Template...........................77 17.5AddLoad ingCompone nttoDetailComp onent..........79 17.5.1ImplementLoadingFunctionalityin DetailComponent TypeScript..........................79 17.5.2ImplementLoadingFunctionalityin DetailComponent Template...........................80 17.5.3Remove "Loading..."TextfromInd exHTML......80 18Com pletedMigration82 18.1Refac toringSuggestions.......................82 19B onus:Authenticate anAngularAppandNodeAPIwith Auth083 19.0.1Featur es............................84 19.0.2SignUpfor Auth0......................85 19.0.3SetUpa ClientApp.....................85 19.0.4SetUpan API........................85 19.0.5Depend enciesandSetup...................85 19.0.6Authen ticationService....................87 19.0.7MakingA uthenticatedAPIRe quests............90 19.0.8FinalTou ches:RouteGuar dandProfilePage.......90 19.0.9MoreRes ources........................91 20Con clusion92 3
Chapter1 Introduction ManyAngularJ S1.xdevelopersareinte reste dinAngular2+,butthemajor di erencesbetweenversion s1and2+aredauntingwhenwe havesomany AngularJS1appsalreadyinp rod uctionormai ntenance.Learnhowt omigrat e ar eal-worldAngularJSapptoafreshAn gular2+build:what'sth esame, what'ssimilar,andw hat'scompletelydi erent.Afterthistutor ial,youshould beprep aredtotackleyourownmigrat ionsaswe llasnewAngular2+pro jects. Thefinalcod eforourAngular 2+appcanbeclone dfromth eng2-dinosGitHub repo. Note:TheBrandingGuidelinesforAngul arstatethatversion1 .xshouldbe referredtoas"Angular JS",wher easall releasesfromversion2anduparename d "Angular".Thismigrationarticl ewillcontinu etouse"Angular1"toreferto AngularJS(1.x)and"Angula r2"torefertoAngul ar(2andup )inorderto clearlydi erentiatetheframeworksan dreduceco nfusion.
1.1AngularJS 1andAngular2+ AngularJS1.xhasbeen afrontrunneram ongJ avaScriptframeworksoverthe pastfewyear s.Thereare thousandsofproduc tionsitesandappsbuiltwith Google's"superheroicMVW framework"andmanym orestillin developme nt.In mid-September2016,Angular2wasrele ased afteralengthyp eri odofbetasand releasecandidates.Angu lardevelopersknewthiswascoming andthatAngular
2wasafu llr ewriteandplatf ormimplementation,notanin cremen talupdate. WhileAngulardevelop erswereandareeagertotry Angular2+, adoptioncan bechall enging.ManyofushaveAngular1appsind evelopment orm aintenan ce andaren' tinapositiontomigr atethe mto Angular2duetotightdead lines, 4 budgetconstraints, clientormanagementreluctance,etc.An gular1isstillbeing maintainedunderthe"AngularJS" monikerandAngular 1appsarenotabout togoaw ay. Note:Angular2+usesSemVer(S emantic Versioning) .Th ismeansthatu nlike Angular1,therewillno longerb ebreakingchangesi npointreleas es.There will notbeanA ngular3 ;inste ad,Angular4willbethen extm ajorreleaseinorder tocorr elatetoversion4oftheAngular router .
1.2Migrat evs.Upgrade Angular2isapowe rfu landatt ract iveplatform.Manydevelopersw illhav etheir firstopportuni tytodiginwhentheytacklemigrat inganex istingAngul ar1 apptoAngu lar2.Att histime,upgradingtheoriginal codebaseisextrem ely di cult:Angular2isnotan iterationofAngul ar1.M ovingb etwee nth emis morestraigh tforwardwhenmigratingtoafre shb uildthattranslate sthesame featuresonthenewplatform. We'llwalkthroughth eprocess ofmigratinganAngular1ap ptoAngular2. OurAngular1p rojectisrelat iv elysmallbutitrepresent sascal able,real-world SinglePageApplication .Afterf ollowingthistutorial,youshouldh aveabetter understandingofhowtogetstartedwithAngular2 andh owfeatures from
Angular1translat eto Angular2. Thistutori alassumesyouarecomfortabl edevelopingappswith An- gularJSversion1.x.Ifyou'r elookingtolearnAngu lar2withoutanAngular
1com parison,checkoutresourcesli keAngular2Authent icat ionandGetting StartedwithAngular2. 5
Chapter2 Angular1App"ng1-dinos" OurAngular1ap piscalledng1-dinos.Th ecodeisa vailableattheng1-dinos
GitHubrepo.It hasthef ollowin gfeatures : •Routing(dinosaurslist ingwithindividualdetailpage s) •Filtering(searchfordinosaursby name) •CallsanexternalNodeAPItogetdi nosaurdat a •SCSSandBootstrapCSS •Customo!-canvasnavigation •Metadatafactorytoprov idedynamic
s •Gulpbuild •GuidedbytheAngular1StyleG uid e •Scalability 2.1Depende ncies Followtheinstru ctionsonthe followingsitestoinstallthesedepen den cies: •NodeJSwithnpm •Gulp(installgloballywithnpminstall-g gulp) We'llalsoneedto clonesample-nodeserver-dinos.Th islocalNodeser ver willprovidet heexternalAPIforbothourng1- dinosandng2-d inosapps.Follow theinstru ctionsinthesample-nodeserver-dinosREADMEtogetit install edand runningonhttp://localhost:3001. 2.2Installa ndRun"ng1-dinos" 1.Cloneng1-dinosfromGitHub toalocaldirectory ofyourch oos ing. 6 2.Runnpminstallfromtheroot directory. 3.Rungulptoser vetheapplication(r unslocall yonhttp://localhost:8000). Onceyouhaven g1-dinosan dtheNodeAPIrun ning,theappshouldlook like thisinth ebrows er: Figure2.1:Angular1ng1- dinoshom eview Important:Takesometi metofamili arizewiththe filestr ucture,code,and features.Wewon'tbemakingany changestothi sapplication,bu tit'simportant togetcom fortable withitbecauseeverythingw edoinourAngular2 appwil l beamigr ation ofng1-dinos. 7 Chapter3 IntroducingAngular2App "ng2-dinos" Ourmigrated Angular2applicationwill becalledng2-dinos.Th efullsourc e codeforthecomp letedap pcanbeclon edfromtheng2-dinosGitHubrepo.This appwill usethesameNode API.Fromau ser'spers pective, wewantng2-di nos tobein distin guishablefromng1-dinos.Underthehood,we'llrewriteth eappto takeadvantage ofthepowerfulnew fe aturesofAngul ar2. Angular2bringsin sev eraltechnologiesth atng1-din osdoesnottakeadvantage of.Inst eadofaGulpbuild,we'l lu set heAngularCLItosetu pandserve ng2-dinos.We'regoingtowrit etheappusingTypeScriptandES6whichwill betrans piledbytheAngularCLI. We'llfollowtheAngular2StyleGu ide forthe mostpart,wi thafewmin or exceptionsregardingfilestructu re.Forthistutorial,wewan ttopreser veas muchofacorrel ation wit hng1-dinosaswecan.Thiswillmak eiteasiertofol low themigration offeatures. 3.1Dependenci es Youshoul dhaveNodeJSwithnpminstalledalready. Next,installth eAngularCLIgloballywiththefoll owingcommand: $npminstall -g@angular/cli 8 3.2Initiali zeng2-dinos Thefirstth ingwe'lldois initializeournew Angular2appandgetitr unning. We'llusetheAngular CLItogener ateanewpro jectwithSCSS suppor tusing thefollowi ngcommand: $ngnew ng2-dinos--style=scss Nextwecanse rvethe appbyr unningthefollowi ngcommandfr omther oot directoryofournewapp: $ngserve Weshou ldbeabletoviewth esitei nthebrow serathttp://localhost:4200.The appshoul dlooklikethis: Figure3.1:NewAngular2 appinit ialized Takealookatt hefi lestruct ure foryournewn g2-dinosapp.Y oumaynotice therearetestfile sandconfi guration,butwewon't covertesting inthis tutorial.If you'dli ketolearnmoreab outtestingAngu lar2,che ckoutTesting intheAn gulardocsandartic leslikeAngular2Testin gIn Depth:Servicesand ThreeWaystoTest Angular2Componen ts. 3.3Linting andStyleGuide TheAngularC LIprovidescod elint ingwithTSLintandCodelyzer.TS Lint providesTypeScriptlinti ngandCodelyzerprovidesTSLintrul esthatadhere totheAngular2StyleGu ide .We canvie wallofth eselintingru lesat 9 ng2-dinos/tslint.json.We canlint ourproj ectusingthe followi ngcom- mand: $nglint Thistutorialfol lowstheStyleGuide andadherestothedefau ltrulesin the TSLintconfigfile.I t'sgoodtolint yourprojectp eriodicallyt omakesure your codeiscleanand freeofl intererrors. Note:TheAngular CLITSLint"eofline":truerulerequiresfilestoend withanewline.Thisisstandardconvention.If youwan ttoavoidlo tsofnewline errorswhenlinting, makesuret hatyourfilesincludethis. 10 Chapter4 CustomizingOurAngular2 ProjectforMigratio n Nowthatw ehaveawor kingst arterprojectf orou rng2-dinosapp,wewantto restructureitandaddsomelibraries. 4.1Bootst rapCSS Let'sstartbyadd ingtheBootstrapCSSCDNtoth eng2-dinos/src/index.html file.Wecanalsoad dadefau ltandsome tags: ng2-dinos 11 Loading... Note:Thecodefo rincludingthe Bootstra pCSScanbefoundatBootstrapCDN -Get tingStarted.We' reusingversio n3.3.7becauseit islateststableat the timeofwritin g.Pleas enotethatifyouupgrad etoversion4.x,therea remajor changestobemind fulof. 4.2ThirdPa rtyLibraries Theonlythi rdpartyJav aScriptwewantisa custombuildofModernizr.We'll bedoing quiteabitofcop yingandpastingfr omng1- dinossince we 'redoinga migration,soit'sbesttoke epyour localng1-dinospr ojecthandy. Ourminifie d,customModernizrbuildcan befoundatng1-dinos modernizr.min.js.Cr eatethenecessary folderstru ctureinng2-dinos: ng2-dinos |-src/ |-assets/ |-js/ |-vendor/ |-modernizr.min.js AngularCLIusesWe bpackto bundlelocald ependencies,sowewon'tadd Modernizrtoourng2-dinosindexfil e.Inst ead,we' lladdareferencetot he .angular-cli.jsonapp'sscripts: //ng2-dinos/.angular-cli.json "apps":[ "scripts":[ "assets/js/vendor/modernizr.min.js" 12 4.3GlobalSC SS Weini tializedourprojectwiththe--styles=scssflagsoSC SSiss upportedand aglob alstyles.scssfilehasalread ybeenge nerated.However, it'scurrentl y locatedattherootofthe ng2-dinos/src/folder.Tomaintainasim ilarfil e structurewithng1-dinos,itneed stoliveinng2-dinos/src/assets/scss/ instead. fileintoit .Thenupdateth e.angular-cli.jsonapp'sstylesreference: //ng2-dinos/.angular-cli.json "apps":[ "styles":[ "assets/scss/styles.scss" Note:Whenmovingo raddingnewfiles,y ou'lln eedtostopandrestar tthe AngularCLIserver(Ctrl+C,ngserve)t oavoidm odulebuilderro rs.Changes withinfilesarewatched andliverel oaded,butr eorganizingthefiles tructureca n breakthis. Nowlet 'saddsomeglobalSCSSf romng1-di nos.We'll copythefile s andsubd irectoriesfromng1-dinos/src/assets/css/scss/core/to ng2-dinos/src/assets/scss/. Note:Ifyoup aidcloseat tention,you' llnoticewe'vel efto!afo lderinng2- dinos.OurAngular1n g1-dinosap phadacssfolderwithscssinsideit.W e don'tneedthe cssfolderinng2-dinos becaus eoftheAngularCLIWebpack bundling. Whenwe'redon e,ourng2-dinosglobalst ylesfilestru ctures houldlooklikethis: ng2-dinos |-src/ |-assets/ |-scss/ |-partials/ |-_layout.vars.scss |-_responsive.partial.scss |-_base.scss |-_layout.scss |-_presentation.scss |-styles.scss 13 Nowwe'l l@importtheseSCSSfilesin theng2-dinosglob alstyles.scss: //partials @import!partials/layout.vars!; @import!partials/responsive.partial!; //globalstyles @import!base!; @import!presentation!; @import!layout!; RestarttheAngularCLIse rverandourap p'sbackgroundc olorshoul dchange togrey. Thisisavisual indicatorthatou rnewgl obals tylesareworking.I fwe inspectthepage,weshould seetheglobal stylesapplied. Finally,we'llcleanupth e_base.scssfile.Angular2doe sn'tutilize ng-cloak sowe 'llremovetheng-cloakruleset.Afterwards,thisisw hatremains: /*ng2-dinos/src/assets/scss/_base.scss */ BASICS /*--Cursor--*/ a, input[type=button], input[type=submit], button{ cursor:pointer; /*--Forms--*/ input[type="text"], input[type="number"], input[type="password"], input[type="date"], selectoption, textarea{ font-size:16px;/*foriOS topreventautozoom */ 14 4.4UpdateA ppFileStructure TheAngularCLI createsallappfil es(mo dules,components,ser vices ,pipes ,etc.) relativetong2-dinos/src/app/.Note thatth eng2-dinosapp hasacomponen t (app.component.ts|.html|.scss|.spec.ts)in thero otofthisfold er.This isourapp 'srootc omponent,butw ewanttomov eitintoasubfoldertokeep ng2-dinosorganized,scalabl e,andcorrelatedwithng1-di nos. Note:Recallthatthistuto rialwon'tco vertesting.The.spec.tsfileshavebeen largelyremovedfrom thesampleng2-dinosrepotomake itsimplert oview.Th e AngularCLIcreatesthese filesautom aticallywhengenerat ingnewarchite cture. Feelfreet okeeptheminyour project andwr itetests.F orbrevity ,theresto f thetutor ialwillnolongermention .spec.tsfiles.Ifyou' reusingthem, justrememberto includethemwheneverma naging files. Let'smovethe app.component[.html|.scss|.ts]filestoanewf older: ng2-dinos/src/app/core/.Theappfolder'sfilestructuresh ouldnowlo oklike this: ng2-dinos |-src/ |-app/ |-core/ |-app.component[.html|.scss|.ts] |-app.module.ts Thisbreaksourb uild.Wecanfixitb yupdati ngtheng2-dinos/src/app/app.module.ts file.Ifyouhave aTypeS cript extensionenabl edi nyourcodeeditororIDE,you shouldseesyntaxh ighlighting whereTypeScrip tdetectsproblems.Weneedto updatethepathtoapp.componentlikeso: //ng2-dinos/src/app/app.module.ts Note:Alwayskeepinmindthat Angula r2isvery interconnected withregard todepen dencyimports.Whenwemo vefiles,webreakreferencesinother places.TheCLItellsus wherethep roblemsarew henwebuild.Ty peScript code hintinginoureditorca nhelpto o.Toaddr esstheissueatitsroo t,wecanu se additional@NgModulesto managed ependencies;youcanl earnmorebyreading UseNgModu letoManageDependenciesinyour Angula r2Apps. That'sitforsetup !Wecano ciallystartmigrati ngng1-dinostong2- dinos. 15 Chapter5 Angular2RootApp Component Inthe ng1-dinosAngul ar1app,ng-appwasonthe element.This providedAngularcontroloverth e,all owingustodynamicallyupd ate thewithacustomm etad atafactory.InAngular2, ourrootapp componentislocatedinsid ethe .Angu lar2providesa ser vicetomanage pagesand weshou ldn'tu sean-levelapprootanymore. Asw esawabo ve,thebod yofourAngular2ng2-dinosindex.htmlfilelooks likethis: Loading... Incompar ison,thebodyofourAngular1ng1-dinosindex.htmlfilelooksli ke this:
Thelayoutm arkup,header,cont ent,andfooterchildre nwillnowmovetothe 5.1AppCom ponentT emplate Let'sstuboutapp.component.html: quotesdbs_dbs14.pdfusesText_20