Ky është hapi i dytë në studimin tonë të kornizës Angular. Në këtë hap do të analizojmë strukturën dhe skedarët e krijuar nga hapat që kemi ndjekur në artikullin e mëparshëm. Në hapin e parë, ne ekzekutuam komandën 'ng new "project_name"' dhe tani do të kuptojmë strukturën që robotët Angular krijuan për ne.
Le të hapim projektin e krijuar në artikullin e mëparshëm në IDE. Në rastin tim, unë zakonisht përdor Visual Studio Code. Kur hapim do të gjejmë një strukturë si kjo:
Dosja e parë e listuar është 'node-modules'. Ashtu si me kornizat e tjera JavaScript, Angular përdor gjithashtu disa (VËRTETË DISA!) biblioteka për të ekzekutuar funksionalitetin e tij. Këto biblioteka janë varësitë e projektit tuaj. Këto varësi menaxhohen përmes skedarit package.json.
— — — — — — — — — — — — — — — — — — — — — — — — — —
Në këtë skedar mund të gjejmë një listë me varësitë aktuale të projektit tonë, dhe disa informacione të tjera si emri i projektit, stripts, ndër të tjera.
— — — — — — — — — — — — — — — — — — — — — — — — — —
Struktura bazë e një komponenti këndor mund të shihet në dosjen e aplikacionit. Kur krijuam projektin tonë, ne kemi zgjedhur të përdorim rrugën e parazgjedhur Angular dhe skedari i parë në dosjen app i ka këto cilësime. Skedari i stilimit .scss u krijua kur zgjodhëm këtë konfigurim gjatë krijimit të projektit.
Në Angular ne kemi përgjegjësitë e komponentëve të ndara kryesisht në këto skedarë që mund t'i shohim në app.component. Ndërsa përparojmë në studime, do të shohim në detaje secilën prej tyre. Tani për tani, le t'i afrohemi strukturës bazë. NE RREGULL? =)
— — — — — — — — — — — — — — — — — — — — — — — — — —
Ne do të përdorim dosjen assetspër të ruajtur imazhet që do t'i përdorim përfundimisht në projektin tonë.
Dosja environments përdoret për të referuar variablat e mjedisit, në rast se ju duhet t'i përdorni ato.
— — — — — — — — — — — — — — — — — — — — — — — — —
Tani do të flasim për tre skedarë shumë të rëndësishëm brenda projektit Angular. Ato janë: angular.json, tsconfig.json dhe karma.config.js. Këta skedarë sjellin cilësime dhe informacione të rëndësishme të projektit. Mos u shqetësoni për të ditur saktësisht se çfarë bën çdo veçori e këtyre skedarëve. Por është mirë të dini se për çfarë në thelb është përgjegjës secili, pasi me shumë mundësi do t'ju duhet të bëni disa rregullime dhe/ose ndryshime në këto skedarë ndërsa projekti juaj rritet.
Skedari angular.json. (imazhi më lart) në thelb përmban informacion në lidhje me projektin në lidhje me shënimet e importeve, skedarët e referencës, konfigurimet e modeleve të përdorura, ndër shumë informacione të tjera. Siç u tha më herët, mos u shqetësoni për të ditur se çfarë bën saktësisht secila pronë, por është e rëndësishme të dini konceptualisht se si konfigurohet një projekt brenda një mjedisi duke përdorur Angular. Imazhi nuk e përmban skedarin në tërësi, pasi është shumë i gjatë.
……………………………………………………………………………………….
Skedari tsconfig.json ka cilësime që lidhen me TypeScript. Shfletuesit sot nuk e kuptojnë TypeScript. Prandaj, projekti ynë, përpara se të ekzekutohet në një shfletues, duhet të "përkthehet" në një gjuhë që shfletuesi e kupton. Në skedarin tsconfig.json mund të bëjmë disa konfigurime në lidhje me këtë proces, për shembull.
……………………………………………………………………………………….
karma.config.js sjell cilësimet e përdorura nga biblioteka Karma duke iu referuar krijimit të testeve të njësive brenda projektit tonë. Ne do të bëjmë disa teste brenda projektit tonë dhe është interesante të dimë të paktën konceptualisht se si Angular trajton testet e njësisë.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Shumë informacion, nuk mendoni!!?? Por mos kini frikë. Mos u shqetësoni për të ditur gjithçka në momentin e parë. Njohuria vjen me praktikë dhe kërkon kohë. Pra, ejani me mua! Ne sapo kemi filluar!
Në artikullin tjetër do të krijojmë komponentin tonë të parë dhe do të mësojmë se si ta përdorim atë brenda projektit tonë. A vjen me mua?
Versioni portugez: https://dev-mauricioalexandre.medium.com/02-este-%C3%A9-o-projeto-angular-padr%C3%A3o-4c130cc9e819
