Əsas Açısal və Komponent Quruluş Quraşdırma (Açısal və Firebase Bulud Firestore istifadə edərək bir E-Ticarət Tətbiqi Qurma) - Hissə 1

Angular, Google-dakı Angular komandasının rəhbərlik etdiyi TypeScript əsaslı açıq mənbəli ön veb tətbiqetmə platformasıdır.

Açısal JS və Açısal tamamilə fərqlidir. Angular JS (və ya Angular 1.x) ilə yenisinizsə, narahat olmayın, heç vaxt onunla işləməmişəm. Angular 2 və əvvəlki versiyalar Angular 1.x kimi olduqca sadədir, biz hazırıq.

Yəqin ki, ehtiyacınız olanlar:

  • Node.js

Node.js-in quraşdırılıb-quraşdırılmadığını yoxlayın.

  • NPM

NPM (Node Package Manager) quraşdırıldığını yoxlayın

Node.js və NPM versiyasını yoxlayın:

Düyün -v
npm -v
  • Angular CLI (Command Line Interface) quraşdırın:
npm i -g @ angular / cli

Ən son versiyanı aldığınızdan əmin olun. Angular CLI haqqında daha çox məlumat əldə edin.

  • JavaScript əsasları.
  • Bootstrap əsasları.

Angular tamamilə TypeScript-də qurulmuş bir çərçivədir. Angular ilə TypeScript istifadə etmək problemsiz bir təcrübədir. Açısal sənədlərdə TypeScript yalnız əsas vətəndaş kimi dəstəklənmir, həm də əsas dil kimi istifadə olunur.

Ancaq narahat olmayın, TypeScript JavaScript ilə olduqca oxşardır. JavaScript ilə tanışsınızsa, doğru yere gəldiniz.

Artıq ətrafımız hazır olduğundan, davam edə bilərik.

Gəlin başlayaq

Açısal CLI komponentlər, xidmətlər, borular, marşrutlar və təlimatlar yaratmaq üçün istifadə olunur.

Komanda altında yeni bir açısal tətbiq növü necə yaradılır:

yeni ngCart - routing

Burada ngCart tətbiqetməmizin adıdır. Yuxarıdakı əmr ngCart adlı bir qovluq yaradacaq və ehtiyac duyduğumuz bütün sənədləri yaradır.

- marşrutlaşdırma bayrağı marşrutlar haqqında bütün məlumatları ehtiva edən app-routing.module.ts faylını yaratmaq üçün istifadə olunur.

".Ts" uzantısı TypeScript sənədləri üçün istifadə olunur.

Bu yuxarıdakı əmri işə saldıqdan sonra əldə etdiyimiz fayl quruluşudur

Qəribə olma, bilirəm ki, orada bir çox sənəd var. Ancaq daha çox src / app / qovluğunda işləyəcəyik.

app.component.css, tətbiq komponenti üçün bütün CSS-ləri ehtiva edir.

app.component.html tətbiq komponenti üçün bütün HTML-ləri ehtiva edir.

app.component.ts, tətbiq komponenti üçün bütün məntiqləri ehtiva edir.

app.module.ts tətbiqimizdə istifadə olunan bütün paketlərin qayğısına qalır.

Mükəmməl bir görünüş əldə etmək üçün Bootstrap 4-dən istifadə edəcəyik.

CSS üçün Bootstrap CDN hazırlayın index.html faylında