ინსტალაცია

ინსტალაცია

ანგულარს აქვს თავისი 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

ახლა მზად ვართ, რომ ანგულარზე ვიმუშაოთ.