კუთხის CLI დანერგვა

ამ პოსტში, ჩვენ გავეცნობით Angular CLI და ვნახავთ როგორ გამოვიყენოთ იგი ახალი Angular პროექტის ინიციალიზაციისთვის.

რა არის კუთხური CLI?

Angular CLI არის ოფიციალური ინსტრუმენტი, რომლის ინიციალიზაციისა და მუშაობისთვის საჭიროა Angular პროექტები. ეს გიხსნის რთული კონფიგურაციების შეფერხებისგან და ააშენებთ ინსტრუმენტებს, როგორიცაა TypeScript, Webpack და ა.შ.

Angular CLI ინსტალაციის შემდეგ, თქვენ უნდა აწარმოოთ ერთი ბრძანება, რომ შექმნათ პროექტი, ხოლო მეორე, რომ მოემსახუროთ იგი, ადგილობრივი განვითარების სერვერის გამოყენებით, თქვენი აპლიკაციის შესასრულებლად.

ისევე როგორც თანამედროვე თანამედროვე ხელსაწყოების ამ დღეების მსგავსად, Angular CLI აშენებულია კვანძის თავზე.

Node.js არის სერვერის ტექნოლოგია, რომელიც საშუალებას გაძლევთ აწარმოოთ JavaScript სერვერზე და ააწყოთ სერვერზე ვებ – პროგრამები. ამასთან, Angular არის წინა სისტემის ტექნოლოგია, ასე რომ, მაშინაც კი, თუ თქვენ გჭირდებათ Node.js დაყენება თქვენს განვითარების მანქანაზე, ის მხოლოდ CLI გაშვებისთვის არის საჭირო.

მას შემდეგ რაც შექმნით თქვენს აპს წარმოებისთვის, აღარ დაგჭირდებათ Node.js, რადგან საბოლოო ჩანართები მხოლოდ სტატიკური HTML, CSS და JavaScript არის, რომელსაც ნებისმიერი სერვერის ან CDN- ის სერვისი შეუძლია.

ეს რომ ითქვას, თუ Angular– ით აშენებთ სრულ სტრიქონის ვებ პროგრამას, შეიძლება დაგჭირდეთ Node.js უკანა ნაწილის შესაქმნელად, თუ გსურთ JavaScript– ის გამოყენება წინა და უკანა ბოლოსთვის.

შეამოწმეთ MEAN stack - ეს არის არქიტექტურა, რომელიც მოიცავს MongoDB, Express (ვებ სერვერზე და REST API ჩარჩოზე, რომელიც აშენდა Node.js– ის თავზე) და Angular. თქვენ შეგიძლიათ წაიკითხოთ ეს სტატია, თუ გსურთ ეტაპობრივად გაკვეთილი, რომ დაიწყოთ.

ამ შემთხვევაში, Node.js გამოიყენება თქვენი აპლიკაციის უკანა ნაწილის შესაქმნელად და შეიძლება შეიცვალოს ნებისმიერი სერვერის მხარის ტექნოლოგიით, რომელიც გსურთ, მაგალითად, PHP, Ruby ან Python. მაგრამ Angular არ არის დამოკიდებული Node.js– ზე, გარდა მისი CLI ინსტრუმენტისა და npm– ზე პაკეტების დაყენების შესახებ.

NPM არის Node Package Manager. ეს არის Node პაკეტების მასპინძლობის რეესტრი. ბოლო წლებში ის ასევე გამოიყენებოდა წინა ბოლოს პაკეტების და ბიბლიოთეკების გამოქვეყნებისათვის, როგორიცაა Angular, React, Vue.js და Bootstrap.

შენიშვნა: შეგიძლიათ ჩამოტვირთოთ ჩვენი კუთხური წიგნი: აშენეთ თქვენი პირველი ვებ – პროგრამები Angular– ით უფასოდ.

კუთხის CLI ინსტალაცია

პირველ რიგში, თქვენ გჭირდებათ Node და npm დამონტაჟებული თქვენს განვითარების მანქანაზე. ამის გაკეთების მრავალი გზა არსებობს, მაგალითად:

  • თქვენს სისტემაში კვანძის მრავალი ვერსიის ინსტალაციისა და მუშაობისთვის NVM (Node Version Manager) გამოყენებით
  • თქვენი ოპერაციული სისტემის ოფიციალური პაკეტის მენეჯერის გამოყენებით
  • მისი დაყენება ოფიციალური ვებ – გვერდიდან.

მოდით, ეს მარტივი იყოს და გამოვიყენოთ ოფიციალური ვებ – გვერდი. უბრალოდ ეწვიეთ ჩამოტვირთვა გვერდს და აითვისეთ binaries for Windows, შემდეგ მიჰყევით დაყენების ოსტატს.

შეგიძლიათ დარწმუნდეთ, რომ კვანძი დაინსტალირებულია თქვენს სისტემაში შემდეგი ბრძანების ბრძანებით გაშვებით, რომელშიც უნდა იყოს გამოსახული კვანძის დაყენებული ვერსია:

$ კვანძი –v

შემდეგი, აწარმოეთ შემდეგი ბრძანება, რომ დააინსტალიროთ Angular CLI:

$ npm დააინსტალირეთ @ კუთხოვანი / კლი

ამ წერის დროს დაინსტალირდება კუთხოვანი 8.3.

თუ გსურთ დააყენოთ Angular 9, უბრალოდ დაამატეთ შემდეგი ჩანართი შემდეგნაირად:

$ npm დააინსტალირეთ @ კუთხოვანი / cli @ შემდეგ

ბრძანების წარმატებით დასრულების შემდეგ, თქვენ უნდა დააყენოთ Angular CLI.

სწრაფი სახელმძღვანელო Angular CLI

Angular CLI– ის ინსტალაციის შემდეგ შეგიძლიათ მრავალი ბრძანება გაუშვათ. დავიწყოთ დაინსტალირებული CLI ვერსიის შემოწმებით:

$ ნგ ვერსია

მეორე ბრძანება, რომელიც შეიძლება დაგჭირდეთ გაშვება არის დახმარების ბრძანება სრული გამოყენების დახმარების მისაღებად:

$ ნგ დახმარება

CLI გთავაზობთ შემდეგ ბრძანებებს:

დაამატეთ: თქვენს პროექტს უმატებს გარე ბიბლიოთეკის მხარდაჭერას.

build (b): Angular app ადგენს გამომავალი კატალოგს, სახელწოდებით dist / at მოცემული გამომავალი გზაზე. უნდა შესრულდეს სამუშაო სივრცეში დირექტორია.

კონფიგურაცია: ამოიღებს ან ადგენს კუთხის კონფიგურაციის მნიშვნელობებს.

doc (d): ბრაუზერში ხსნის ოფიციალური კუთხის დოკუმენტაციას (angular.io) და ეძებს მოცემულ საკვანძო სიტყვას.

e2e (e): აშენებს და ემსახურება Angular app- ს, შემდეგ აწარმოებს end-to-end ტესტებს Protractor– ის გამოყენებით.

გენერირება (ზ): ქმნის და / ან შეცვლის ფაილებს სქემატური საფუძველზე.

დახმარება: ჩამოთვლის ხელმისაწვდომი ბრძანებები და მათი მოკლე აღწერილობები.

lint (l): აწარმოებს უგულებელყოფის ხელსაწყოებს Angular app კოდიზე მოცემულ პროექტის საქაღალდეში.

new (n): ქმნის ახალ სამუშაო ადგილს და პირველადი Angular აპს.

გაშვება: ასრულებს თქვენს პროექტში განსაზღვრულ პერსონალურ მიზანს.

service (s): აშენებს და ემსახურება თქვენს აპს, ფაილის ცვლილებების აღდგენას.

ტესტი (t): აწარმოებს ერთეულის ტესტებს პროექტში.

განახლება: განაახლებს თქვენს აპლიკაციას და მის დამოკიდებულებებს. იხილეთ https://update.angular.io/

ვერსია (v): გამოაქვს კუთხური CLI ვერსია.

xi18n: ამონაწერი i18n შეტყობინებები საწყისი კოდიდან.

პროექტის შექმნა

თქვენ შეგიძლიათ გამოიყენოთ Angular CLI თქვენი Angular პროექტის სწრაფად წარმოქმნისთვის, ბრძანების ინტერფეისში შემდეგი ბრძანების შესრულებით:

$ ნგ ახალი ფორთოხალი

შენიშვნა: frontend არის პროექტის სახელწოდება. თქვენ, რა თქმა უნდა, შეგიძლიათ აირჩიოთ ნებისმიერი ნამდვილი სახელი თქვენი პროექტისათვის. მას შემდეგ, რაც ჩვენ შევქმნით სრულ დასტის პროგრამას, მე frontend- ს ვიყენებ, როგორც პირველადი პროგრამის სახელს.

როგორც ზემოთ უკვე აღვნიშნეთ, CLI გკითხავთ თქვენ გსურთ დაამატოთ კუთხის მარშრუტიზაცია? და თქვენ შეგიძლიათ პასუხი გასცეს y (დიახ) ან n (არა) შესვლას, რაც ნაგულისხმევი ვარიანტია. ის ასევე გკითხავთ სტილის ფორმატის შესახებ, რომლის გამოყენება გსურთ (მაგალითად, CSS). აირჩიეთ თქვენი პარამეტრები და დააჭირეთ Enter- ს გასაგრძელებლად.

ამის შემდეგ, თქვენ შექმნით თქვენს პროექტს დირექტორია სტრუქტურაში და კონფიგურაციებისა და კოდის ფაილების რამოდენიმე ვარიანტით. ის ძირითადად TypeScript და JSON ფორმატებში იქნება. ვნახოთ თითოეული ფაილის როლი:

  • / e2e /: შეიცავს ვებ – გვერდის დასრულების (მომხმარებლის ქცევის სიმულაციას) ტესტებს
  • / node_modules /: მე -3 მხარის ყველა ბიბლიოთეკა დამონტაჟებულია ამ საქაღალდეში npm ინსტალაციის გამოყენებით
  • / src /: შეიცავს განაცხადის წყაროს კოდი. აქ უმეტესი სამუშაოები შესრულდება
  • / app /: შეიცავს მოდულებს და კომპონენტებს
  • / აქტივობები /: შეიცავს სტატიკურ აქტივებს, როგორიცაა სურათები, ხატები და სტილი
  • / გარემო /: შეიცავს გარემოს (წარმოებას და განვითარებას) სპეციფიკური კონფიგურაციის ფაილებს
  • ბრაუზერების სია: საჭიროა autoprefixer- ის მიერ CSS მხარდაჭერისთვის
  • favicon.ico: ფავკონი
  • index.html: მთავარი HTML ფაილი
  • karma.conf.js: კონფიგურაციის ფაილი კარმასთვის (ტესტირების ხელსაწყო)
  • main.ts: მთავარი საწყისი ფაილი, საიდანაც ხდება AppModule ჩატვირთვა
  • polyfills.ts: Angular- ისთვის საჭირო მრავალფეროვნება
  • styles.css: პროექტის გლობალური ცხრილების ფაილი
  • test.ts: ეს არის კარმის კონფიგურაციის ფაილი
  • tsconfig. *. json: კონფიგურაციის ფაილები TypeScript- ისთვის
  • angular.json: შეიცავს კონფიგურაციებს CLI- სთვის
  • pack.json: შეიცავს პროექტის ძირითად ინფორმაციას (სახელი, აღწერა და დამოკიდებულებები)
  • README.md: მარკირების ფაილი, რომელიც შეიცავს პროექტის აღწერილობას
  • tsconfig.json: კონფიგურაციის ფაილი TypeScript- ისთვის
  • tslint.json: კონფიგურაციის ფაილი TSlint (სტატიკური ანალიზის ინსტრუმენტი)

თქვენს პროექტს ემსახურება

კუთხური CLI უზრუნველყოფს სრულ ინსტრუმენტულ ქსელს თქვენს ადგილობრივ აპარატზე წინა პროგრამების შესამუშავებლად. როგორც ასეთი, თქვენ არ გჭირდებათ ადგილობრივი სერვერის დაყენება, რომელიც თქვენს პროექტს მოემსახურება - შეგიძლიათ, უბრალოდ გამოიყენოთ ტერმინალიდან ng სერვისის ბრძანება, რომ თქვენს პროექტს ადგილობრივად მოემსახუროს.

პირველი, ნავიგაცია თქვენი პროექტის საქაღალდეში და განახორციელეთ შემდეგი ბრძანებები:

$ cd frontend $ ng ემსახურება

ახლა შეგიძლიათ გადახვიდეთ ამ საიტზე: http: // localhost: 4200 / მისამართი, რომ დაიწყოთ თქვენი წინა პროგრამის თამაში. ეს გვერდი ავტომატურად გადის გადატვირთვით, თუ შეცვლით რაიმე წყაროს ფაილს.

კუთხის არტეფაქტების წარმოქმნა

Angular CLI უზრუნველყოფს ng generate ბრძანებას, რომელიც ეხმარება დეველოპერებს წარმოქმნან კუთხოვანი ძირითადი ნიმუშები, როგორიცაა მოდულები, კომპონენტები, დირექტივები, მილები და მომსახურება:

$ ng წარმოქმნის კომპონენტს my- კომპონენტი

my- კომპონენტი არის კომპონენტის სახელი. კუთხის CLI ავტომატურად დაამატებთ მითითებას კომპონენტებს, დირექტივებს და მილებს src / app.module.ts ფაილში.

თუ გსურთ თქვენი კომპონენტის, დირექტივის ან მილის სხვა მოდულის დამატება (გარდა ძირითადი პროგრამის მოდულის, app.module.ts), შეგიძლიათ უბრალოდ შეადგინოთ კომპონენტის სახელი მოდულის სახელთან და სლაზით:

$ ng g კომპონენტი / მოდული / ჩემი კომპონენტი

my-module არის არსებული მოდულის სახელი.

დასკვნა

ამ პოსტში, ჩვენ ვნახეთ, თუ როგორ უნდა დააყენოთ Angular CLI ჩვენს განვითარების მანქანაზე და გამოვიყენეთ, რომ ახალი კუთხის პროექტი ნულიდან დავიწყოთ.

ჩვენ ასევე ვნახეთ სხვადასხვა ბრძანებები, რომელთა საშუალებითაც შეგიძლიათ გამოიყენოთ თქვენი პროექტის განმავლობაში, კუთხოვანი ნივთების წარმოქმნისთვის, როგორიცაა მოდულები, კომპონენტები და სერვისები.

თქვენ შეგიძლიათ გაეცნოთ მას ან მიჰყევით ავტორს მისი პირადი ვებსაიტის, Twitter- ის, LinkedIn- სა და Github- ის მეშვეობით.