ინსტალაცია
ინსტალაცია
ანგულარს აქვს თავისი CLI, რომლის დასაინსტალირებლად და გამოსაყენებლად საჭიროა Node-ის პაკეტების მენეჯერი - npm, რომელიც Nodejs-ს მოყვება:
npm install -g @angular/cli
ინსტალაციის შემდეგ შეგვიძლია შევამოწმოთ CLI-ის ვერსია, რათა დავრწმუნდეთ რომ ის დაინსტალირდა.
ng v
CLI ანგულარის ერთ-ერთი უმძლავრესი ხელსაწყოა, რომლითაც ყველა სხვა ფრეიმვორქს აღემატება. CLI-ს საშუალებით შეგვიძლია საწყისი აპლიკაციების შექმნა ან აპლიკაციების კონკრეტული ნაწილების შექმნა, მოდიფიკაცია, კონფიგურაცია და ა.შ. ეს არ ამოწურავს ანგულარის CLI-ს შესაძლებლობებს, მაგრამ ყველაზე ხშირად ის ასეთი საქმეებისთვის დაგვჭირდება.
პირველი აპლიკაცია
საწყისი აპლიკაციის შესაქმნელად ჩვენ ტერმინალში უნდა გადავინაცვლოთ ჩვენთვის სასურველ დირექტორიაში და გავუშვათ ბრძანება:
ng new my-app
my-app შეგიძლიათ ნებისმიერი სახელით ჩაანაცვლოთ - ეს ჩვენი პროექტის სახელი იქნება. ანგულარი რამდენიმე შეკითხვას დაგვისვამს, ამჯერად რას ვუპასუხებთ არსებითი მნიშვნელობა არ აქვს, თუმცა შეგვიძლია SSR-სა და რაუტინგზე უარი ვთქვათ, ხოლო სტილებისთვის ავირჩიოთ CSS.
ანგულარი შეგვიქმნის ახალი პროექტის ფოლდერს, შიგნით ყველა საჭირო ფაილით. გავხსნათ პროექტი ჩვენს ედიტორში და თვალი შევავლოთ მის სტრუქტურას:
angular.json
- ანგულარის კონფიგურაციაnode_modules
- პაკეტები (კოდი), რომელიც ჩვენ აპლიკაციას და ანგუალრს სჭირდებაpackage.json
- ინფორმაცია საჭირო პაკეტების და მათი ვერსიების შესახებpackage-lock.json
- პაკეტების ვერსიებს შორის ურთიერთდამოკიდებულების შესახებ ინფორმაციაREADME.md
- ფაილი, სადაც შეგვიძლია ჩვენი პროექტი აღვწეროთ სხვების დასანახადsrc
- ფოლდერი, სადაც აპლიკაციაზე სამუშაო კოდიაapp
- მთავარი აპლიკაციის საშენი ბლოკების ფოლდერიapp.component.css
- მთავარი კომპონენტის სტილების ფაილიapp.component.html
- მთავარი კომპონენტის მარკაპის ფაილიapp.component.spec.ts
- მთავარი კომპონენტის ავტომატიზირებული ტესტების ფაილიapp.component.ts
- მთავარი აპლიკაციის კომპონენტის ფაილიapp.config.ts
- აპლიკაციის კონფიგურაციის ფაილიapp.routes.ts
- აპლიკაციის რაუთინგის ფაილი
assets
- ფოლდერი ისეთი რესურსებისთვის, როგორიცაა სურათები, აიქონები, JSON ფაილები და ა.შfavicon.ico
- აპლიკაციის აიქონი რაც ტაბებზე ჩნდებაindex.html
- აპლიკაციის მთავარი ამოსავალი წერტილი. მთლიანი აპლიკაცია ამ ერთ ფაილში იმუშავებსmain.ts
- ქმნის აპლიკაციასapp.config.ts
-ში არსებული კონფიგურაციის მიხედვით და მას სვამსindex.html
-შიstyles.css
- გლობალური სტილების ფაილი
tsconfig.app.json
- ტაიპსკრიპტის კონფიგურაცია, რომელსაც ანგულარის ქომფაილერი გამოიყენებსtsconfig.json
- ტაიპსკრიპტის კონფიგურაცია, რომლითაც ჩვენ ვიხელმძღვანელებთ კოდის წერისასtsconfig.spec.json
- ტაიპსკრიპტის კონფიგურაცია, რომელსაც ტესტის ფაილები გამოიყენებენ
სადეველოპმენტო სერვერის გასაშვებად გავცეთ ბრძანება
npm run start
ან
ng serve
ბრაუზერი გავხსნათ localhost:4200
-ზე. აქ ვხედავთ ზუსტად იმ მარკაპს, რომელიც app.component.html
-შია დაწერილი.
შეგვიძლია იქ ყველაფერი წავშალოთ და უბრალოდ დავწეროთ <h1>Hello world!<h1>
რათა დავრწმუნდეთ, რომ ყველაფერი
მუშაობს.
რეკომენდირებული ექსთენშენები
visual studio code-ში რეკომენდირებულია რომ დააყენოთ შემდეგი ექსთენშენები:
- Angular Language Service
- angular2-inline
- ESLint
- Material Icon Theme
- Prettier - Code formatter
ახლა მზად ვართ, რომ ანგულარზე ვიმუშაოთ.