Qëllimi

Edhe pse e di që angular është një nga kornizat më të njohura të TS, nuk jam prekur ende (edhe unë kam mësuar react dhe vue deri më tani.) Është koha për të mësuar angular dhe do të ndaj me ju rreth Angular, dhe si për ta përdorur atë.

Çfarë është Angular?

Siç e përmenda tashmë angular është një nga kornizat më të njohura TS që ofrohet nga google, nga viti 2016. Në fakt angular është versioni 2, dhe versioni 1 u emërua angular JS i cili gjithashtu u zhvillua nga google, i lëshuar në vitin 2012. angular JS kishte karakteristika shumë inovative të cilat integroheshin Modeli MVC (model, pamje, kontrollues) dhe shumë veçori të integruara pa bibliotekë. Sidoqoftë, në thelb këndor u krijua për projektues, jo zhvillues, kështu që nëse përdorej në projekte të mëdha, ndodhi problemi i performancës dhe kohës së ndërtuar. Kështu, Google vendosi të bënte një ndryshim shkatërrues, i cili përfshinte ndryshimin e modelit MVC në modelin e bazuar në komponentë për të rregulluar problemin e performancës, dhe emri u ndryshua gjithashtu në këndor (jo JS). AngularJS nuk mbështet më (kjo kohëzgjatje mbështetëse përfundon në janar 2022), nëse jeni fillestar në angular, duhet të mësoni JS këndore jo këndore. Pra, cilat janë të mirat dhe të këqijat këndore?

Pro dhe kundra

Pro

  • Shumë karakteristika të integruara

Nëse dëshironi të përdorni rrugëzimin react ose vue, duhet të instaloni disa biblioteka si react-router-dom ose vue-router. Sidoqoftë, angular ka një paketë të integruar për të zbatuar një veçori të rrugëtimit, kështu që nuk keni nevojë ta instaloni atë. Dikush mund të thotë se kjo nuk është një çështje e madhe, por nëse jeni në një projekt të madh, mund të jetë një problem i madh sepse duhet të instaloni saktësisht të njëjtën paketë me kolegun për të menaxhuar versionet. Nëse keni vetëm disa biblioteka që janë në rregull, por mbi 20 ose më shumë biblioteka, si ta menaxhoni atë?

  • Tipar standard TypeScript.

Kjo është një nga veçoritë e ndryshme nga këndore JS, react, vue. Edhe pse mund të zgjidhni TypeScript si opsion në react dhe vue, kjo nuk është e detyrueshme. Sidoqoftë, Angular ka një veçori "standarde" të TypeScript jo një opsion. Pra, nëse doni të përdorni Angular, duhet të mësoni gjithashtu TypeScript. Kjo është temë e diskutueshme, por personalisht jam dakord me Google sepse kjo bibliotekë është një përshtatje e mirë për një projekt relativisht të madh, siç thashë tashmë. TypeScript është gjithashtu një ndeshje e mirë për një projekt të madh sepse ky alt JS shmang gabimet serioze për të shtuar Type dhe për të nxitur zhvillimin me ekipin.

  • Produktiviteti

Siç e përmenda tashmë, Angular ka shumë karakteristika të mira të ndërtuara. Për shembull, nëse doni të krijoni një komponent, dëshironi të krijoni duke përdorur cli këndore me vijën e komandës (si p.sh. "ng g ‹EMRI-KOMPONENT-TUAJ› ‹PATH OF COMPONENT›"). Ky është një lloj kuadri mbështetës Fullstack siç është Laravel. Pra, nëse jeni njohur me mënyrën Angular, do të kishit produktivitet fantastik për të krijuar disa aplikacione ose për të menaxhuar projektet tuaja.

Kundër

  • Kurba e të mësuarit

Kjo mënyrë këndore na jep shumë produktivitet, por ju duhet një mënyrë këndore unike. Ju nuk keni nevojë të mësoni përmendësh të gjithë sintaksën, por keni nevojë për një koncept thelbësor si lidhja e të dhënave, direktiva etj.. Kjo është arsyeja pse kjo bibliotekë ka kurbë mësimi më të pjerrët se të tjerat si react ose vue. Nëse tashmë jeni njohur me react ose vue, nuk do të ishte shumë e vështirë. Por nëse jeni një i ri, mund të jetë një çështje serioze.

  • Tipar standard TypeScript.

Edhe pse ky është plotësisht avantazh ose disavantazh, veçoria TypeScript mund të jetë minus pikë sepse kërkon kohë për të mësuar në krahasim me JavaScript. Ky është një veçori shumë e mirë për të menaxhuar një projekt relativisht të madh, por nuk është i përshtatshëm për fillestarët që sapo kanë filluar të mësojnë rreth JavaScript.

  • Mund të jetë mbi-specifikim.

Siç e përmenda tashmë, kjo bibliotekë ka shumë paketa të integruara të dobishme, por kjo mund të jetë e tepërt për një projekt të vogël për shkak të shumë veçorive të papërdorura, dhe kjo nuk është mënyra më elegante. Pra, në përgjithësi, Angular është i përshtatshëm për projekte të mëdha edhe ju mund ta përdorni këtë bibliotekë në një projekt të vogël.

Kjo është e mjaftueshme për të përmendur për Angular, le të shohim projektin e mostrës.

Shembull (aplikacion kundër)

Hapat

  1. Vendosni mjedisin tuaj
npm install -g @angular/cli

Nëse jeni përdorues mac, mund t'ju duhet të bëni sudo përpara komandës së mësipërme dhe të futni fjalëkalimin për t'u marrë me të, sepse ky është një instalim global.

Nëse jeni përdorues i Windows, duhet të merreni me një problem të instalimit global. Nëse keni problem, ju lutemi referojuni dokumenteve zyrtare (kam vënë në pjesën e referencës).

Mac

sudo npm install -g @angular/cli

Dritaret

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

pastaj instaloni angular cli duke përdorur komandën e mësipërme (npm install -g @angular/cli ).

2. Krijoni hapësirën tuaj të punës dhe aplikacionin. Ju duhet t'i përgjigjeni disa pyetjeve (kjo përgjigje varet nga ju). Pasi iu përgjigj përgjigjeve të mëposhtme, aplikacioni juaj instaloi me sukses vendin tuaj të punës.

Krijo një dosje të re

ng new angular-counter(This name is up to you)

Pyetje

së pari

? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing Angular CLI commands will show possible options and 
autocomplete arguments. (Enabling autocompletion will modify configuration files in your home directory.) (y/N)

e dyta

? Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. (y/N)

e treta

Would you like to add Angular routing? (y/N)

e katërta (ju duhet të zgjidhni)

Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS 
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ]

2. Kaloni në hapësirën tuaj të punës dhe kontrolloni skedarët tuaj (kontrolli skedarët janë opsionalë).

Lëvizni në hapësirën tuaj të punës

cd angular-counter(this is your app name)

Më poshtë është kjo strukturë e dosjeve. Nëse jeni njohur me ndonjë punë tjetër kornizë JS si react, vue. Kjo është e ngjashme, por paksa e ndryshme dhe më shumë skedarë. Për shembull, kjo dosje ka tre skedarë të ndryshëm tsconfig, skedarë mjedisi dhe gjithashtu polifille. Duket veçori më e ndërlikuar dhe e detajuar në krahasim me react ose vue.

.
├── README.md
├── angular.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

3. Drejtoni aplikacionin tuaj duke përdorur komandën e mëposhtme dhe shikoni ekranin e mëposhtëm në "localhost: 4200"

ng serve --open

Në rregull, le të krijojmë një aplikacion kundër.

4. Ndrysho "app.component.ts" si më poshtë. Në thelb, ju duhet të shkruani kodin JS këtu si komponent i klasës. Mund të shihni brenda @Component, duhet të regjistroni url-në dhe stilin e shabllonit (Ky është i paracaktuar, por nëse doni të krijoni një tjetër, duhet të krijoni një të re.)

5. Ndrysho "app.component.html" si më poshtë. Vini re, ju mund të injektoni gjendjen tuaj duke përdorur {{}}. dhe ju duhet të mbështillni për të lidhur klikoni me (). Stili është opsional, por ju mund të bëni si css të pastër. Në rastin tim, kam shkruar disa stilime bazë si më poshtë.

6. U krye! Më poshtë është ekrani im, dhe ky funksionon plotësisht.

konkluzioni

Angular është një nga kornizat më të njohura të JS i cili ka shumë paketa të dobishme të integruara. Nëse tashmë jeni njohur me JS dhe TS, ose dëshironi të krijoni një aplikacion relativisht të madh që ka shumë veçori, kjo bibliotekë është e dobishme për ju. Sipas mendimit tim, kompania që përdor qëllimin këndor për të shkruar kode më strukturore, elegante dhe të lexueshme në krahasim me kompaninë që zgjodhi çdo kornizë tjetër JS sepse këndorja është më pak e popullarizuar dhe ndonjëherë mund të jetë e vështirë për të gjetur një zgjidhje të duhur për shkak të pengesës. i njohur me tiparet TypeScript dhe build-in. Sidoqoftë, kjo bibliotekë ka një veçori të mirë për të shkruar mirëmbajtjen e lehtë për t'u bërë, kështu që është një zgjedhje e mirë për ta përdorur atë.

Referenca

Dokumenti zyrtar (Angular): https://angular.io/guide/setup-local

Dokumenti zyrtar (AngularJS): https://angularjs.org/

Dallimi midis Angular dhe AngularJS: https://www.geeksforgeeks.org/difference-between-angular-and-angularjs/

AngularJS vs. Angular 2 kundër Angular 4: Diferenca kryesore: https://www.simplilearn.com/angularjs-vs-angular-2-vs-angular-4-differences-article

Aventurë në Angular: https://code.likeagirl.io/adventures-in-angular-5f4722fda805

三大Javascriptフレームワーク「Angular, React, Vuejs」について: https://it-kyujin.jp/article/detail/1647/

【初心者必見】Angularとは? いまさら聞けない基礎を学ぼう: https://www.sejuku.net/blog/9019

Faleminderit qe lexuat!!