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

JavaScript-ის საკითხები

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

მაგრამ არის თუ არა პრობლემა მხოლოდ პროფესიონალების ნაკლებობაში? ბოლოს და ბოლოს, ადრე თუ გვიან, მწვანე ახალგაზრდებმა, რომლებიც მხრებიდან ჭრიან, უნდა მიიღონ გამოცდილება და გადაიქცნენ თავიანთი ხელობის მოწინავე მასწავლებლებად. რა თქმა უნდა არა. მიზეზები თავად ენასა და მის არქიტექტურულ პრობლემებშია. განვითარება JavaScriptშეიძლება შევადაროთ ფორმულა 1-ის რბოლას - სპორტული მანქანები ავითარებენ რეაქტიულ სიჩქარეს, მაგრამ უკიდურესად არასანდო. უპატიებლად ცოტა დრო დაიხარჯა ენის შექმნაზე. აქ დავამატოთ პროექტის კონცეფციის უეცარი ცვლილება (თავდაპირველად JavaScriptდაიგეგმა, როგორც ფუნქციური ენა) და საბოლოოდ ვიღებთ იმას, რაც მივიღეთ. სინტაქსი ადგილებზე დამაბნეველია, ზოგიერთი ოპერატორის არაპროგნოზირებადობა, გაუთავებელი ნიუანსი სუსტი აკრეფით, პრობლემები ცვლადების მასშტაბთან და მრავალი სხვა დეფექტი, რამაც შეიძლება დაარღვიოს ნორმალურ ენებთან მუშაობას მიჩვეული ადამიანების ფსიქიკა.

პირველმა, ვინც გაბედა ჭეშმარიტად მოუხერხებელი განლაგება JavaScript, გახდა ჯონ რეზიგი. მან დაინახა უხილავი მადლი მახინჯ იხვის ჭუკში და გაბედა იმდროინდელი ერთ-ერთი ყველაზე მნიშვნელოვანი პრობლემის გადაჭრა: იმავე კოდის გაუთავებელ გადაწერას წერტილი დაუსვა. ამ დროს ის ავითარებდა ვებსაიტს კომპანია Brand Logic-ისთვის და უშუალოდ განიცდიდა JavaScript-ის ნიუანსებს.

მისი მონდომების შედეგი იყო ბიბლიოთეკის პირველი გამოშვება jQuery. მას უნდა გადაეჭრა არა მხოლოდ ერთჯერადი კოდის პრობლემა, არამედ მიაღწიოს მინიმუმ ბრაუზერის თავსებადობას. JavaScript სინტაქსი არ დარჩენილა უყურადღებოდ. ბიბლიოთეკამ შესაძლებელი გახადა მრავალი ამაზრზენი კონსტრუქციის შემცირება და გახდა სინტაქსური შაქრის ერთგვარი ნაჭერი. ყოველი ახალი გამოშვებით, ბიბლიოთეკა უმჯობესდებოდა და აერთიანებდა ახალ ფუნქციებს. დღეს jQuery განუყოფელი ინსტრუმენტია ნებისმიერი ვებ დეველოპერისთვის და უკვე პრობლემატურია თანამედროვე ვებსაიტის წარმოდგენა მისი გამოყენების (ან ალტერნატივების) გარეშე.

ისე, მაშინ გართობა დაიწყო. jQuery-მ აჩვენა, რომ JavaScript-ს ბევრი რამის უნარი აქვს და, ალბათ, ეს იყო ერთგვარი დარტყმა მრავალი ვებ მოთამაშისთვის. დაიწყეს ენის უფრო ლმობიერად მოპყრობა და ყველანაირად ცდილობდნენ მის განვითარებას. უბრალოდ გადახედეთ Google-ის მაგალითს, რომელმაც მოგვცა ყველაზე სწრაფი JavaScript ძრავა V8. მისი წყალობით შესაძლებელი გახდა მძიმე js აპლიკაციების შექმნა. ახლად გახსნილი პერსპექტივები გახდა სიკეთე JavaScript-ზე დაფუძნებული ფუნდამენტურად ახალი ტექნოლოგიების შესაქმნელად. საკმარისია დასახელება კვანძი.JSდა მაშინვე ცხადი ხდება, რომ დღეს JavaScriptბევრად მეტი ვიდრე სკრიპტის ენა. დღეს ის მზადაა განახორციელოს აპლიკაციის შექმნის ყველა ეტაპი (კლიენტი და სერვერის ნაწილები) დამხმარე ინსტრუმენტების გამოყენების გარეშე.

JavaScript ჩარჩოები

ბიბლიოთეკების ჩანაცვლება, როგორიცაა jQueryმსოფლიოს JavaScriptდაიწყეს ფრეიმორების მოსვლა, რომლებიც ახორციელებენ პოპულარულ MVC შაბლონს (MVVM, MVP და ა.შ.). Framework-მა დაიწყო განვითარების ახალი კულტურისა და ალტერნატიული შეხედულებების შემოტანა დეველოპერების გონებაში დამკვიდრებულ საკითხებზე. უფრო და უფრო მეტი კითხვა ჩნდებოდა იმ შაბლონების გამოყენებასთან დაკავშირებით, რომლებმაც თავი დაამტკიცეს უფრო დიდი პროგრამირების სამყაროში, და ბოლოს აქსიომა ჯდება js დეველოპერების გონებაში: ”თქვენ არ შეგიძლიათ ლოგიკას აურიოთ პრეზენტაცია”.

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

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

MVC დიზაინის ნიმუში, რომელიც საფუძვლად უდევს ყველაზე თანამედროვე ჩარჩოებს, კარგად დაამტკიცა და ახლა ხელმისაწვდომი გახდა JavaScript სამყაროსთვის. რა თქმა უნდა, ამ მოვლენაში განსაკუთრებული სიახლე ან რევოლუცია არ არის. ნებისმიერ მოწინავე დეველოპერს შეუძლია შეიმუშაოს აპლიკაცია ამ ნიმუშის მიხედვით ყოველგვარი ჩარჩოების გარეშე. თუმცა, „შეიძლება“ და „მოთხოვნა“ განსხვავებული რამ არის. იმის გათვალისწინებით, რომ JS საზოგადოებაში ყველა დიდი ხანია აყენებს მოწინავე ტექნიკას რკინის ჭანჭიკს, ჩარჩოს მხრიდან ნიმუშის გამოყენების მოთხოვნა ძალიან სასარგებლო იქნება.

კუთხოვანი JS

პროექტი შედარებით ახალია. ის პირველად 2009 წელს დაინერგა. ამ დროის განმავლობაში გამოვიდა რამდენიმე ვერსია და პროდუქტის გარშემო მკვრივი საზოგადოება ჩამოყალიბდა. პროექტის წარმატება დიდწილად განსაზღვრა მისმა მშობელმა, Google-მა. გეიკები განსაკუთრებული მოწიწებით ეპყრობიან კარგი კორპორაციის გამოშვებებს, განსაკუთრებით მაშინ, როდესაც საქმე ეხება დეველოპერების ინსტრუმენტებს. იგივე მოხდა ამჯერადაც. ტექნიკურ დეტალებში არ შევალ, არამედ მაშინვე გეტყვით, რატომ მიმიზიდა პროექტმა პირადად.

ძალიან მარტივია

მას აქვს საკმაოდ დაბალი ბარიერი შესვლისთვის ბევრ მსგავს გადაწყვეტასთან შედარებით. დოკუმენტაცია ოდნავ შეუსაბამოა. როგორც ჩანს, კარგად არის სტრუქტურირებული, არის კოდის მაგალითები, მაგრამ ზოგიერთი რამ უკიდურესად ცუდად არის დაფარული. თქვენ თავად მოგიწევთ მათთან გამკლავება წყაროს კოდის ან სემინარის კოლეგების კომენტარების შესწავლით. მაგალითად, სირთულეებს იმის გაგება, თუ როგორ მუშაობს ფარგლები მიშკო ჰევერის კომენტარებით StackOverflow-ზე და ვიდეოს ყურებით. AngularJS. საუკეთესო პრაქტიკა"(http://goo.gl/UYG6Q).

დეკლარაციული მიდგომა

დეველოპერები ჩამოშორდნენ ტრადიციულ იდეას: ” HTML არის მტერი და ჩვენ უნდა ვებრძოლოთ მას" ამის ნაცვლად, მათ გადაწყვიტეს ბუნებრივად გაეფართოებინათ მარკირების ენა დამატებითი დირექტივების შემოღებით.

ტესტირება

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

გამონათქვამები

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

2 + 1 = {{2+1}}

იქნება „2+1=3“.

Angular.JS დირექტივები

დირექტივები ერთ-ერთი მთავარი მახასიათებელია. ისინი საშუალებას აძლევს დეველოპერს აღწეროს ცალკეული ელემენტების ქცევა და გააფართოვოს HTML სინტაქსი. Angular-ს გააჩნია მხოლოდ ძირითადი დირექტივების ნაკრები. თუმცა, არავინ გვიშლის ხელს მის გაფართოებაში საკუთარი განვითარებით. სწორად შექმნილი დირექტივები შეიძლება გამოყენებულ იქნას სხვა პროექტებში. ზოგიერთი დეველოპერი პრაქტიკაშიც კი აკეთებს, რომ მათი კომპონენტების კოლექციები საჯაროდ იყოს ხელმისაწვდომი. ამის ნათელი მაგალითია AngularUI გუნდი, რომელმაც გამოუშვა და ინახავს ოცამდე მზა კომპონენტს.

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

ფარგლები, შესრულება და მითები

თქვენ შეგიძლიათ იპოვოთ ბევრი უარყოფითი მოსაზრება Angular-ის შესრულებაზე. ზოგიერთი განცხადების თანახმად, ჩარჩოს შესრულება არ არის საკმარისად კარგი და არ არის შესაფერისი სერიოზული აპლიკაციებისთვის. მაგალითად, ხშირად შეგიძლიათ იპოვოთ მაგალითები, რომელთა ავტორები აჩვენებენ ჩარჩოს შეუსაბამობას რამდენიმე ათეული ათასი ობიექტის დასამუშავებლად. " თქვენი კუთხოვანი ანელებს თავისი მოწინავე შეკვრით!” - ყვირიან მგზნებარე მოწინააღმდეგეები. მაგალითების უფრო დაწვრილებით შესწავლის შემდეგ აშკარა ხდება, რომ პრობლემა შორს არის და მათ ავტორებს არ შეუწუხებიათ სრულად წაიკითხონ დოკუმენტაცია და დამხმარე მასალები ოფიციალური ბლოგიდან.

შესრულების შესახებ მითების ერთხელ და სამუდამოდ გასაქარწყლებლად, მოდით გადავხედოთ იდუმალ არსს. Scope არ არის მოდელი და აზრი არ აქვს მისგან ერთის შექმნას. ამისგან კარგი არაფერი გამოვა. Angular სახელმძღვანელოში ნათლად წერია, რომ მოდელი ნიშნავს მონაცემთა ნებისმიერ მასივს და ფარგლები შეიძლება შეიცავდეს მითითებას მოდელზე. არ არის საჭირო მოდელის ყველა მონაცემის არეალში გადატანა. დიახ, ასეთ კონტექსტში მოსახერხებელია მათი მანიპულირება, მაგრამ მუხრუჭების გარდა ვერავითარ სარგებელს ვერ მიიღებთ. ყოველივე ზემოთქმული არ უნდა ჩაითვალოს Angular-ის დეველოპერების ბანალურ გამოსავალად და საბაბად. ეს არის არქიტექტურა და გასათვალისწინებელია. უფრო მეტიც, არ დაივიწყოთ ნიმუში MVVM. ტრადიციული „მოდელის“ ერთეულის გარდა, ის განასხვავებს „model-view“-ს და ამ შემთხვევაში, scope არის მოდელი-view, რაც იმას ნიშნავს, რომ ის უნდა შეიცავდეს მონაცემებს, რომლებიც უნდა იყოს ნაჩვენები.

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

რატომ შეიძლება გამოიწვიოს რამდენიმე ათასმა ელემენტმა მუშაობის სერიოზული პრობლემები? ღმერთო, რომელ საუკუნეში ვცხოვრობთ? შეიძლება რამდენიმე ათასი ობიექტი მართლაც გახდეს სერიოზული პრობლემა თანამედროვე კომპიუტერისთვის? სინამდვილეში, ყველაფერი გარკვეულწილად უფრო რთულია, ვიდრე უბრალოდ ობიექტების დიდი რაოდენობა. მიზეზი მდგომარეობს იმაში, თუ როგორ მუშაობს შეკვრა. შაბლონის განლაგების დროს დირექტივები ქმნიან ე.წ. $ Watch). დამკვირვებლები აცნობებენ დირექტივებს ქონების ცვლილებების შესახებ, რათა მათ, თავის მხრივ, დროულად განაახლონ DOM-ში ელემენტების მნიშვნელობები. ეს ოპერაცია ხშირად ტარდება, ასე რომ, თუ ობიექტის დიდი რაოდენობაა, შენელება გარდაუვალი იქნება.

კუთხოვანი აპლიკაციის ჩატვირთვა

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

იქმნება ინჟექტორი (მიმწოდებლის მიერ მოწოდებული ობიექტების ეგზემპლარების მისაღებად მექანიზმი; დატვირთვის მოდულები და ა.შ.), რომელიც გამოყენებული იქნება აპლიკაციის შიგნით დამოკიდებულების ინექციისთვის;

ინჟექტორი, შექმნის გლობალურ ფარგლებს ჩვენი აპლიკაციის მოდელის კონტექსტში;

angular დაიწყებს DOM ხის დამუშავებას, დაწყებული ელემენტიდან, რომელშიც გამოცხადდა ngApp დირექტივა. ამ პროცესის დროს შეიქმნება ყველა ნაპოვნი ბმული და აღმოჩენილი დირექტივები შესრულდება.

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

სამუშაოს ფურცელი. ჩვენ ვასრულებთ დავალებებს მჭიდრო მეთვალყურეობის ქვეშ

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

პირველ რიგში, მოდით ჩამოვაყალიბოთ პრობლემა. რა არის ტიპიური ToDo ფურცელი? უპირველეს ყოვლისა, ეს არის დავალებების ჩამონათვალი, რომლებიც უნდა დასრულდეს გარკვეულ დროს. თითოეული დავალება არის ცალკე ელემენტი, რომელსაც აქვს მინიმუმ ორი თვისება: სახელი (დავალების აღწერა) და მდგომარეობა.

შესრულება

მე მივაწოდე პრეზენტაციის კოდის ნაწილი პირველ ჩამონათვალში და თქვენ ყოველთვის შეგიძლიათ მიიღოთ სრული ვერსია ჩვენი დისკიდან. ნებისმიერი კუთხური აპლიკაცია იწყება დირექტივის დეკლარირებით ngApp. გთხოვთ გაითვალისწინოთ, რომ კოდში დირექტივების სახელი იწერება ტირეთი, მაგრამ დახმარებაში და ტექსტში ისინი ერთად ჩანს. ngApp დირექტივისთვის შეგიძლიათ მიუთითოთ დამატებითი ატრიბუტი - მოდულის სახელი, რომელიც იტვირთება აპლიკაციის ინიციალიზაციისას. ამ დროისთვის, მოდით დავტოვოთ ეს კითხვა ღიად და მიუთითოთ მოდულის სახელი todomvc. ქვემოთ მე ვაძლევ ფორმის აღწერას ერთი ველით. მომხმარებელი შეიყვანს მასში ახალ დავალებას და როდესაც დააჭერს ღილაკს „გაგზავნა“, ის გაიგზავნება ზოგად სიაში.

დირექტივა ხელს შეუწყობს ფორმაში შეყვანილი მონაცემების გაგზავნის მოვლენის დამუშავებას ngგაგზავნა. ის საშუალებას გაძლევთ დააკავშიროთ მოქმედება, რომელიც შესრულდება ფორმიდან მონაცემების გაგზავნისას. ჩვენს შემთხვევაში, ეს მოქმედება იქნება კონტროლერის მეთოდი addTodo(). მეთოდის ძირითადი ნაწილი აღწერს კოდს, რომელიც ამატებს ახალ დავალებას მოდელს. თავად ამოცანის ტექსტი შეიტანება შეყვანის ველში, რომლისთვისაც მე ვაზუსტებ დირექტივას ngModel, რითაც დამყარდება ორმხრივი კავშირი დისპლეის მოდელთან.

ახლა მოდით შევხედოთ მოდელის გამომუშავებას. ყოველი ახალი დავალება ჩარჩოშია ჩასმული ტეგით ლი, რომელიც მოიცავს კონტროლს: მდგომარეობის შეცვლას, რედაქტირებას ან წაშლას. ამ ღილაკების ფუნქციონირება ხორციელდება ისევე, როგორც ახალი ამოცანების დასამატებლად გამოიყენეს. მხოლოდ ერთი განსხვავებით, ngSubmit დირექტივის ნაცვლად, ის გამოიყენება ngდააწკაპუნეთ(ჩვენ ვამუშავებთ ღილაკზე დაწკაპუნებას) ან ngDblClick(ორმაგი დაწკაპუნებით).

ვინაიდან ყველა შეყვანილი დავალება ინახება მასივში, ჩვენ უნდა გადავხედოთ მას თანმიმდევრულად. ეს ოპერაცია არ საჭიროებს მარყუჟების გამოყენებას, საკმარისია გამოიყენოთ ngRepeat დირექტივა. როგორც ატრიბუტები, მან უნდა მიუთითოს კრებული, რომელიც უნდა გადაკვეთოთ და ცვლადი, რომელიც ყოველი გამეორებისას მიიღებს მაჩვენებელს მომდევნო ელემენტზე.

იმისათვის, რომ ყველაფერი კიდევ უფრო ლამაზი იყოს, ჩვენ უნდა ვიზრუნოთ შესრულებული ამოცანების ალტერნატიულ ფორმატირებაზე. დიზაინის მიხედვით, "გადაკვეთილი" სტილი უნდა იქნას გამოყენებული ყველა დასრულებულ დავალებაზე. დირექტივა დაეხმარება ამ პრობლემის ეფექტურად გადაჭრას ngClass. იგი ადგენს დიზაინის კლასს კონკრეტული html ელემენტისთვის, რაც დამოკიდებულია გამოხატვის შეფასების შედეგზე.

ბოლო, რაც ახსნას საჭიროებს, არის filter:statusFilter კონსტრუქცია. აქ ფილტრი არის ჩაშენებული ფუნქცია, რომელიც საშუალებას გაძლევთ გაფილტროთ მონაცემები todos მასივიდან, რომელიც შეესაბამება statusFilter ცვლადის მნიშვნელობას (მისი მნიშვნელობა შეიცვლება კონტროლერში).

კონტროლერი

მეორე ჩამონათვალში მე მივაწოდე კონტროლერის აღწერა, ჩვენი მაგალითის ძირითადი ნაწილი. კუთხოვანი კონტროლერი შექმნილია როგორც რეგულარული JavaScript- ფუნქციები. მაგალითად: ფუნქცია MyController().

ჩვენ შეგვიძლია გამოვაცხადოთ კონტროლერი როგორც თავად გვერდის სხეულში (სადაც გვაქვს ხედი), ასევე ცალკე ფაილში. მეორე მეთოდი სასურველია, რადგან საშუალებას გაძლევთ განასხვავოთ ლოგიკა პრეზენტაციისგან (გაიხსენეთ MVC ნიმუშის თეორია) და გაამარტივოთ აპლიკაციის მხარდაჭერა მომავალში.

მართალია, კონტროლერის ცალკე ფაილში მოთავსებისას, როგორმე უნდა შევატყობინოთ კუთხოვანი, რომ ჩვენი აპლიკაციის კონტექსტში აუცილებელია ამ კონკრეტული კონტროლერის გამოყენება. ngApp დირექტივა ეხება ამ საკითხს. როგორც დამატებითი ატრიბუტი, ის იღებს მოდულის სახელს, რომელიც ჩაიტვირთება განაცხადის ინიციალიზაციისას. Angular-ში მოდული ნიშნავს სერვისების, დირექტივების, ფილტრების და სხვადასხვა დამხმარე ინფორმაციის კრებულს, რომელიც შეიძლება გამოყენებულ იქნას კონფიგურაციისთვის. ინჟექტორი. ჩვენი მაგალითისთვის, მე ვაკონკრეტებ „todomvc“-ს, როგორც მოდულს და აღვწერ მის შექმნას app.js ფაილში:

Var todomvc = კუთხური.module("todomvc", );

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

Todomvc.controller("TodoCtrl", ფუნქცია TodoCtrl($scope, $location, todoStorage)

მოდით დავყოთ ის ნაწილებად:

todomvc– მოდულის სახელი (გახსოვდეთ ngApp დირექტივა და app.js ფაილი);

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

ფუნქცია TodoCtrl($scope, $location, todoStorage) – ფუნქცია, რომელიც განსაზღვრავს კონტროლერს, როგორც პარამეტრებს:

$ ფარგლები. დირექტივის გამოცხადების დროს შექმნილი სფერო ngკონტროლერი;

$ მდებარეობა. სერვისი, რომელიც შექმნილია ბრაუზერის მისამართის ზოლში შეყვანილ URL-თან მუშაობისთვის;

todoStorage. თვითნაწერი სერვისი, რომელიც შექმნილია ადგილობრივ მეხსიერებასთან ურთიერთობისთვის.

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

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

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

დასაკვირვებელი მნიშვნელობა;

ფუნქცია, რომელიც გამოიძახება პირველი პარამეტრის ცვლილებისას მნიშვნელობის გადაცემისას;

ობიექტის შედარების აუცილებლობის ნიშანი;

იმ ფუნქციის სხეულში, რომელიც გამოიძახება მოდელის შიგთავსის შეცვლისას, მე განვსაზღვრავ მხოლოდ ერთ მეთოდს - todoStorage.put(todos) . ის პასუხისმგებელია ამოცანების სიის ადგილობრივ საცავში შენახვაზე.

მეორე ჩამონათვალის ტექსტში ოდნავ დაბლა შეგიძლიათ იხილოთ მსგავსი ხრიკი. მხოლოდ ამჯერად თქვენ უნდა დააკვირდეთ ცვლილებებს მისამართების ზოლში. "აქტიური" პარამეტრის გამოჩენა ნიშნავს, რომ აუცილებელია ფილტრის დაყენება, რომელიც მხოლოდ დაუსრულებელ დავალებებს აჩვენებს მომხმარებლისთვის. კარგად, თუ url შეიცავს პარამეტრს " დასრულდა“, შემდეგ ვაკეთებთ საპირისპირო ოპერაციას - ვამალავთ დაუსრულებელ დავალებებს და ვაჩვენებთ დასრულებულს.

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

ტესტირება

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

დასკვნის ნაცვლად

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

ჩამონათვალი 1. ნახვა

…

((todo.title))

…

ჩამონათვალი 2. კონტროლერი Angular.JS-ში

todomvc.controller("TodoCtrl", ფუნქცია TodoCtrl($scope, $location, todoStorage) ( var todos = $scope.todos = todoStorage.get(); $scope.$watch("todos", ფუნქცია () ( todoStorage. put(todos true) $scope.$watch("location.path()", ფუნქცია (გზა) ($scope.statusFilter = (გზა === "/active") : (დასრულებული: false ) ; გზა === "/დასრულებულია") ? $scope.newTodo, დასრულებულია: false ) $scope.newTodo = "");

ჩამონათვალი 3. კონტროლერის კოდის ტესტირება

//აღწერეთ ტესტების ნაკრები (შეიძლება იყოს ჩასმული) //პირველი პარამეტრი არის ტესტის ჯგუფის სახელი, ხოლო მეორე //ფუნქცია ტესტებით describe("კონტროლერის ტესტირება", ფუნქცია () ( // ცვლადები ურთიერთქმედებისთვის კონტროლერით //და scope var ctrl , scope //ტესტის შესრულებამდე ჩატვირთეთ // todomvc მოდული ადრეEach(module("todomvc") //initialize controller beforeEach(inject(function ($controller, $). rootScope) ( scope = $rootScope.$new(); ctrl = $controller("TodoCtrl", ($scope: scope)) //განსაზღვრეთ ახალი ტესტი ფუნქციის გამოყენებით //გარდა საშუალებას გაძლევთ განსაზღვროთ მოლოდინები რომელიც მოწმდება //ტესტში it('მნიშვნელობა უნდა იყოს null', function () ( expect(scope.editedTodo).toBeNull(); )); (მოლოდინი (ფარგლები.todos.length).toBe(0); ));

როგორ ვისწავლოთ Angular.JS

ოფიციალური დოკუმენტაცია (http://goo.gl/uLYIh). მის შედგენაში დიდი ძალისხმევა დახარჯეს და საკმარისზე მეტი იქნება პირველი მარტივი ცურვისთვის;

უფასო ვიდეო კურსი egghead-ისგან (http://www.egghead.io/). წერის დროს, ეს იყო ალბათ ყველაზე დიდი ვიდეო კურსი Angular.JS-ის გამოყენების შესახებ. ავტორი მოიცავს სავალდებულო თემებს, კონტროლერების/ფილტრების გამოყენებას, ტესტირებას და ბევრ სხვას. და ა.შ. არის 42 ვიდეო გაკვეთილი.

შესავალი გაკვეთილები CodeSchool-ზე (http://goo.gl/YXBGA). კოდირების სხვადასხვა დისციპლინებზე ვიდეო გაკვეთილების დიდი რაოდენობის მიუხედავად, Angular.JS თითქმის არ არის შეხებული. მხოლოდ ორი ვიდეოა, მაგრამ მათი ყურება ნამდვილად ღირს.

ვიკი პროექტზე docs.angularjs.ru (http://goo.gl/20lCB). პროექტი მიმდინარე წლის აპრილის ბოლოს დაიწყო და მიზნად ისახავს ოფიციალური დოკუმენტაციის კოლექტიური თარგმნას. ბიჭებს ჯერ არ აქვთ სრულფასოვანი ვებსაიტი, ამიტომ ისინი აქვეყნებენ თარგმანის დასრულებულ ნაწილებს პოპულარული პროექტის ჰოსტინგის საიტის GitHub-ის ვიკიზე. ამ სტრიქონების დაწერის დროს ნათარგმნი მასალის პროცენტმა 22%-ს მიაღწია. სავსებით შესაძლებელია, რომ ჟურნალის გამოქვეყნებამდე დოკუმენტაციის თარგმანი მზად იყოს.

სტატია „AngularJS სემინარი - ადმინისტრაციული პანელის განვითარება“, გამოქვეყნებული Habré-ზე (http://goo.gl/BLSvA, http://goo.gl/eSpBk);

ოფიციალური Twitter ანგარიში (http://goo.gl/TyLM0). აქ ყოველთვის შეგიძლიათ გაიგოთ უახლესი ამბები და იპოვოთ უახლესი სახელმძღვანელოების ბმულები.

შესანიშნავი სტატია მოდელების შესახებ angular.js-ში (http://goo.gl/V0U2C)

სულით ძმები

ფრენა(http://goo.gl/kf5dV) არის ახალი პროექტი Twitter-ის გუნდისგან. მათი წინა პროექტი (Twitter Bootstrap) კვლავ სარგებლობს თავისი დაფებით და, როგორც ჩანს, Flight ადრე თუ გვიან შეუერთდება. უფრო მეტიც, მასში არის რაღაც საყვარელი: მისი შემადგენელი მიდგომა; არ საჭიროებს კონკრეტული მიდგომის არჩევას მონაცემების ჩვენებისთვის; იგი ეფუძნება მოვლენის მოდელს (კომპონენტებს შორის კომუნიკაციისთვის), ფუნქციური მიქსინების მხარდაჭერას და სხვა სასარგებლო სიკეთეებს.

ხერხემალი(http://backbonejs.org) - ბიბლიოთეკა დააინტერესებს jQuery-ის მოყვარულებს, რომლებიც დაიღალნენ უამრავი არასტრუქტურირებული js კოდით. ხერხემალი ხელს შეუწყობს წესრიგის აღდგენას და ხელოვნურად რთული გადაწყვეტილებების შემსუბუქებას.

CanJS(http://canjs.com/) არის ერთ-ერთი ყველაზე მსუბუქი და მარტივი js ჩარჩო, რომელიც აღიარებულია ვებ აპლიკაციების განვითარების გასამარტივებლად. გარეთ, CanJS კარგად მუშაობს პოპულარულ JS ბიბლიოთეკებთან jQuery, Zepto, Mootols, Yui, Dojo.

ემბერი(http://emberjs.com/) – mvc ჩარჩო შესვლის დაბალი ბარიერით. ფუნქციონალობა უფრო ღარიბია, ვიდრე Backbone-ის, მაგრამ დამწყებთათვის მისი გაგება ბევრად უფრო ადვილია. მთავარ უპირატესობებს შორის, აღსანიშნავია ფუნქციონირების არსებობა, რომელიც ამარტივებს რუტინულ ოპერაციებს. ბევრ რამეს სჭირდება ნაკლები კოდი დასაწერად, ვიდრე, ვთქვათ, Backbone.

KnockoutJS(http://knockoutjs.com/) – ხელს უწყობს MVVM მოდელს, ამაყობს საკინძების შესანიშნავი განხორციელებით, კარგი შესრულებით და დაბალი მოთხოვნებით მესამე მხარის ბიბლიოთეკებისთვის.

როგორ გავასწოროთ Angular აპლიკაცია

Angular-ში განვითარებისას აუცილებლად დაგჭირდებათ დამატებითი გამართვის ინსტრუმენტი. საბედნიეროდ, ასეთი ინსტრუმენტი უკვე შეიქმნა და ხელმისაწვდომია როგორც გაფართოება Google Chrome-ისთვის. მას ჰქვია Angular JS Batarag და Google Play-დან ინსტალაციის შემდეგ, გაფართოება ჩაშენებულია Developers Tools-ში, როგორც დამატებითი გაჯეტი. Batarag საშუალებას მოგცემთ ნახოთ იერარქია, მათი შინაარსი და, სურვილის შემთხვევაში, შეცვალოთ მნიშვნელობები პირდაპირ კონსოლიდან. უფრო დეტალური ინფორმაციის მიღება შეგიძლიათ Google Play-ს გაფართოების გვერდზე არსებული ვიდეოდან.

Angular 4/6, AngularJS JavaScript ჩარჩოს სრულიად გადამუშავებული გაგრძელება. Google-ის მიერ თავიდანვე შექმნილი, Angular 2/4/6 გთავაზობთ გაფართოებულ ფუნქციებს ერთგვერდიანი აპლიკაციების შესაქმნელად, როგორიცაა დეკლარაციული შაბლონები, მონაცემთა ორმხრივი დაკავშირება, TypeScript მხარდაჭერა და დამოკიდებულების ინექცია. MVC არქიტექტურისთვის დამახასიათებელი კონტროლერების ნაცვლად, Angular 2/4 ახლა იყენებს კომპონენტებს. ეს განახლება შესაფერისია როგორც მობილური, ასევე ვებ დეველოპერებისთვის.

აუდიტორია:სახელმძღვანელო განკუთვნილია დეველოპერებისთვის, რომლებსაც სურთ გაეცნონ Angular 6-ის საფუძვლებს და მისი პროგრამირების კონცეფციებს, ასევე მათთვის, ვინც ეძებს „რამე ახალს“ საკუთარი თავისთვის. აღწერს Angular 6 კომპონენტს მაგალითებით.

მინიმალური უნარები: JavaSctipt-ის საბაზისო ცოდნა. ასევე, კარგი იქნება იცოდეთ HTML, CSS, AJAX, AngularJS და ა.შ. დაკავშირებული ტექნოლოგიები.

რა არის Angular?

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

Angular 6 გაკვეთილის სტრუქტურა რუსულ ენაზე (angular.io):

1. სახელმძღვანელო
   1. "გმირის რედაქტორი"
   2. სიის ჩვენება
   3. ძირითადი/დეტალური კომპონენტები
   4. სერვისები
   5. მარშრუტიზაცია
2. საფუძვლები
   1. არქიტექტურა
   2. კომპონენტები და შაბლონები
   3. ფორმები
   4. დამკვირვებლები და RxJS
   5. მოდულები (NgModules)
   6. დამოკიდებულების ინექცია
   7. HTTP კლიენტი
   8. მარშრუტიზაცია და ნავიგაცია
   9. ანიმაცია
   10. ტესტირება
   11. მოტყუების ფურცელი
3. ტექნიკოსები
   1. ინტერნაციონალიზაცია (i18n)
   2. კუთხური ენის სერვისები
   3. კუთხოვანი აპლიკაციების უსაფრთხოება/დაცვა
   4. ინსტალაცია და განლაგება
   5. მომსახურე მუშები
   6. სერვერის გვერდითი რენდერი (კუთხოვანი SSR)

Angular 2 გაკვეთილის სტრუქტურა რუსულ ენაზე (სამეურვეო პუნქტი):

• თემა: კუთხოვანი 4
• ვიდეოს დრო: 21:58
• სირთულე: სინათლე

ამ გაკვეთილზე თქვენ გაეცნობით Angular 4-ს. პირველ რიგში, თქვენ გაიგებთ, თუ როგორ განსხვავდება Angular 1, Angular 2 და Angular 4 და რა ღირს სწავლა.

გაკვეთილი 2: კომპონენტის შექმნა Angular 4-ში

• თემა: კუთხოვანი 4
• ვიდეოს დრო: 16:23
• სირთულე: სინათლე

ამ გაკვეთილზე თქვენ შეისწავლით თუ როგორ იქმნება კომპონენტები Angular 4-ში და როგორ ურთიერთქმედებენ ისინი ერთმანეთთან.

გაკვეთილი 3. ელემენტების ჩამოთვლა Angular 4-ში

• თემა: კუთხოვანი 4
• ვიდეოს დრო: 10:46
• სირთულე: სინათლე

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

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

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

გაკვეთილი 4. სერვერი და სერვისები Angular 4-ში

• თემა: კუთხოვანი 4
• ვიდეოს დრო: 23:16
• სირთულე: სინათლე

ამ გაკვეთილზე თქვენ გაეცნობით Angular 4-ის 2 ერთეულს - სერვისებს და კლასს ajax მოთხოვნებთან მუშაობისთვის.

თქვენ ნახავთ, როგორ იქმნება სერვისები და როგორ უნდა დარეგისტრირდეთ. შემდეგი, ჩვენ გავაფართოვებთ სერვისის ფუნქციონირებას მასში HTTP კლასის დამატების გზით, რაც საშუალებას მოგვცემს ასინქრონული მოთხოვნები გავაკეთოთ დისტანციურ სერვერზე მომხმარებელთა სიის მისაღებად.

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

გაკვეთილი 5. კუთხური 4 დირექტივები

• თემა: კუთხოვანი 4
• ვიდეოს დრო: 15:25
• სირთულე: სინათლე

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

შემდეგ ნახავთ, როგორ იქმნება და რეგისტრირდება თქვენი საკუთარი დირექტივები. მასში ჩვენ მოვუსმენთ მაუსის გადაადგილების მოვლენას ელემენტზე და დავამატებთ კლასს ელემენტის ლამაზად გამოსაჩენად, მაგრამ ამას გავაკეთებთ ყველაზე ეფექტური გზით Angular 4-დან, რომელიც რადიკალურად განსხვავდება ჩვეულებრივი javascript იმპლემენტაციისგან.

გაკვეთილი 6. მილები Angular 4-ში: ფილტრის შექმნა

• თემა: კუთხოვანი 4
• ვიდეოს დრო: 11:24
• სირთულე: სინათლე

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

ამისათვის ჩვენ დაგვჭირდება შემდგომი შესწავლა კუთხური მოდელის გამოყენებით „მონაცემთა ორმხრივი დაკავშირების“ კონცეფციის შესახებ.

გაკვეთილი 7. მარშრუტიზაცია Angular 4-ში: გვერდების შექმნა

• თემა: კუთხოვანი 4
• ვიდეოს დრო: 15:33
• სირთულე: სინათლე

ამ ბოლო გაკვეთილზე თქვენ შეისწავლით თუ როგორ შეგიძლიათ შექმნათ სხვადასხვა გვერდები Angular 4-ის გამოყენებით.

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

ამის შემდეგ ჩვენ შევქმნით ნავიგაციის ზოლს გვერდების მყისიერად გადართვისთვის.

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

სასარგებლო რესურსების დიდი არჩევანი, რომელიც დაგეხმარებათ Angular 2-ის სწავლის გეგმის შედგენაში.

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

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

Egghead Screencasts

როგორც ჩანს, Egghead არის იმ რამდენიმე სასწავლო რესურსიდან, რომელიც დეტალურად მოიცავს Angular2 აპლიკაციის შემუშავებას. ამ დაწერის მომენტისთვის, Egghead გთავაზობთ 29 სხვადასხვა Angular2 ეკრანიზაციას და მათგან მხოლოდ 3 არის ფასიანი. დაახლოებით 26 უფასო Angular2 ეკრანიზაცია Egghead-ზე.

ღირს თემის შესწავლის დაწყება ბევრი უფასო მასალით. შეამოწმეთ Angular2 Egghead გვერდი სკრინკასტებისთვის, რომლებიც მოიცავს საფუძვლებს.

YouTube ვიდეო

საიდუმლო არ არის, რომ იუთუბზე ბევრი ნაგავია. მაგრამ იქ ბევრი წარმოუდგენელი მასალაა. მთავარია ვიცოდეთ როგორ იპოვოთ იგი. Angular2 საზოგადოებამ შეადგინა შესანიშნავი ვიდეო გაკვეთილები Angular 2-ის ნულიდან შესასწავლად.

თუ უპირატესობას ანიჭებთ ვიზუალურ სწავლებას და არ გსურთ გადახდა, მოძებნეთ ვიდეო გაკვეთილები YouTube-ზე.

აქ არის რამდენიმე საინტერესო ვიდეო დასაწყებად:

თუ არცერთი ეს რესურსი არ არის შესაფერისი, გირჩევთ შეამოწმოთ რეკომენდებული რესურსების სია. ჩემი ფავორიტი არის Angular2 Learning, დაყოფილია წიგნებად/ვიდეოებად და თემებად/საგნებებად, როგორიცაა ავთენტიფიკაცია და მარშრუტიზაცია.

ჯეფ კანინგჰემის მიერ შენახული GitHub გვერდი შეიცავს ბევრ Angular2 სასწავლო რესურსს. იგი შეიქმნა Angular 1.x-ისთვის, მაგრამ შემდეგ შეიცვალა მიმართულება Angular2-ზე.

კიდევ ერთი უფასო რეკომენდებული სია არის Angular Education, რომელიც მდებარეობს GitHub-ზე. ეს სია დაყოფილია თემებად, რომლებიც შეიცავს ბმულებს ვიდეოებსა და სტატიებზე. ის ხშირად განახლდება, მათ შორის ახალი წიგნები, როგორიცაა Angular2 in Action, რომელიც გამოქვეყნდება 2017 წელს.

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

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