Ի՞նչ սպասել Angular-ի հետ աշխատելիս: Շրջանակային ուղեցույց

Angular-ը JavaScript-ի շրջանակ է, որն օգտագործվում է վեբ հավելվածներ մշակելու համար, այն ստեղծվել է Google-ի կողմից 2009 թվականին և այդ ժամանակվանից ընդլայնվում է: Angular-ի վրա հիմնված նախագծերը կապված են Frontend-ի զարգացման հետ, այլ կերպ ասած՝ այս շրջանակում զարգացումը կապված է հաճախորդի կողմից (վեբ բրաուզերի) գործողությունների հետ: Այն ի սկզբանե հիմնված էր MVC-ի (Model-View-Controller) վրա, բայց ամեն հաջորդ թարմացումով այն ավելի ու ավելի է նմանվում MVVM-ին (Model-View View-Model):

Angular-ի հիմնական ենթադրությունները.

• Հավելվածի տրամաբանությունը առանձնացված է DOM-ում մանիպուլյացիաներից (Փաստաթղթի օբյեկտի մոդել)
• Ծրագրի հաճախորդի կողմը բաժանված է սերվերից
• Թեստավորումը նույնքան կարևոր է, որքան ստեղծումը գործընթացի հավելվածների մշակման մեջ
• Հիմնական HTML գործառույթները ընդլայնվում են այնպես, որ թույլ է տալիս պահպանել դիտման և մոդելի միջև շարունակական համաժամացումը

Ինչպես է դա աշխատում?

Angular-ի հիմնական մասերը՝

1. Controller
   Angular-ի մոդուլը, որն օգտագործվում է հավելվածի բիզնես տրամաբանությունը կոդավորելու համար: Վերահսկիչի օգտագործած տվյալները կապված են որոշակի մոդելի հետ: Կարգավորիչը գործարկվում է ng-controller-ի հրահանգով
2. Կաղապար
   Կաղապարում օգտագործվում է HTML-ը, որը ընդլայնված է հատուկ հրահանգներով: Մենք որոշում ենք, թե որ փոփոխականները պետք է կապված լինեն որոշակի մոդելների հետ
3. Ծառայություն
   Ծառայությունը պահպանում է ծածկագիրը, որը մենք նախատեսում ենք օգտագործել մեկից ավելի անգամ
4. Directive
   Ստեղծվել է HTML-ի հիմնական տարբերակները ընդլայնելու նպատակով, հրահանգները ներառում են DOM-ի վրա հիմնված բոլոր գործողությունները: Դրանք կարող են ավելացվել կաղապարներին որպես ատրիբուտներ, դասեր կամ որպես առանձին տարրեր: Նրանք որոշում են DOM-ի վարքագիծը
5. Scope
   Scope-ը անկյունային օբյեկտ է, որը պարունակում է մոդելի տվյալներ: Մեկ դիմումը կարող է ունենալ մի քանի շրջանակ: Կարգավորիչները, հրահանգները և ծառայությունները ներբեռնում են մոդելի տվյալները շրջանակներից
6. Դիտել
   Այն ամենը, ինչ կարող է տեսնել օգտվողը (DOM): Երբ Angular հավելվածը բեռնվում է, կոմպլիերը վերլուծում է բոլոր ձևանմուշները դիտումների
7. Մոդուլ
   Դա կոնտեյներ է հավելվածի հատվածի համար: Մի քանի մոդուլներ, որոնք օգտագործում է Angular-ը.
8. Կախվածությունների ներարկում
   Angular-ի մոդուլյարության շնորհիվ հնարավոր է մոդուլներ ներարկել միմյանց միջև
9. Երկկողմանի տվյալների կապում
   Կաղապարը կազմված է տեսքի մեջ: Փոփոխականի յուրաքանչյուր փոփոխություն տեսքում հանգեցնում է համապատասխան փոփոխականի փոփոխության մոդելում և հակառակը

Հիմնական հրահանգներ Angular-ում.

1. ng-app
   Այս հրահանգը սահմանում է հավելվածի մայր պիտակը: Կազմումը սկսվում է տարրով, որի վրա ավելացվել է այս հրամանը
2. ng-bind
   Այս հրամանը սահմանում է, որ որոշակի տարրի արժեքը կապված է այն մոդելի հետ, որի անունը ունի ng-bind արժեք:
3. ng-if
   Սահմանում է այս հրամանում ներառված տարրերը DOM-ում ավելացնելու պահանջը
4. ng-repeat
   Կաղապարի օղակը, որը նման է ծրագրավորման հիմնական օղակին
5. ng-class
   Սահմանել տվյալ դասի հետ տարրերը փոփոխելու պահանջները

Ինչպե՞ս է Angular-ը հեշտացնում աշխատանքը:

Angular-ը թույլ է տալիս մեկ էջի տիպի հավելվածների արագ զարգացում.

• Մշակողները չպետք է անհանգստանան մոդելի տվյալների թարմացման մասին. Երկկողմանի տվյալների կապը դա նրանց համար է դարձնում
• Շրջանակի մոդուլյարությունը շատ ավելի հեշտ է դարձնում փորձարկումը: BDD մոտեցումը խնդիր չէ Ժասմինի և Կարմայի շնորհիվ: Նախընտրում եք E2E (End-to-End) թեստավորում: Խնդիր չէ, օգտագործեք անկյունաչափ:
• Ներկառուցված հրահանգները թույլ են տալիս կատարել հիմնական առաջադրանքները՝ առանց երկար կոդ գրելու անհրաժեշտության
• Կոդը կարգի բերելը և հավելվածի մշակումը DRY (Don’t Repeat Yourself) սկզբունքին համապատասխան հեշտ է Angular-ի ճարտարապետության և մոդուլյարության շնորհիվ:
• Այս շրջանակը կատարյալ ընտրություն է այն հավելվածների դեպքում, որոնք հիմնված են օգտվողից ստացվող տվյալների մեծ մասի վրա

Angular-ի տեղադրում

Կան ձեր նախագծում Angular ավելացնելու բազմաթիվ եղանակներ, բայց դրանցից ոչ մեկը ձեզ որևէ խնդիր չի առաջացնի:

1. Առաջին օրինակն այն մեթոդն է, որը հիմնված է Անկյունային փաթեթի ներբեռնման և այն հիմնական HTML ֆայլում script թեգով ներառելու վրա:
2. Մյուս մեթոդը, որը ես ուզում եմ ընդգծել, հիմնված է Բաուերի վրա: Տեղադրում.

• Տեղադրեք Bower-ը ամբողջ աշխարհում
• Տեղադրեք Angular-ը նախագծի թղթապանակում՝ օգտագործելով Bower
• Ավելացրեք ներբեռնված Angular մոդուլը հիմնական HTML ֆայլում՝ օգտագործելով script tag-ը

3. Տեղադրում NPM-ով (Node Package Manager):

• Տեղադրեք NPM
• Տեղադրեք Angular-ը NPM-ի օգտագործմամբ ձեր հավելվածի գրացուցակում
• Ավելացրեք ներբեռնված Angular մոդուլը հիմնական HTML ֆայլում՝ օգտագործելով script tag-ը

Angular-ի օգտագործման օրինակ

• Փոփոխականի արժեքի տպում կարգավորիչից

ՕրինակCtrl

Կաղապար

p պիտակը ցույց կտա ExampleCtrl վերահսկիչում հայտարարված անձի փոփոխականի արժեքը:

• Մոդելի թարմացում View-ի միջոցով

ՕրինակCtrl

Կաղապար

P պիտակը ցույց կտա այն արժեքը, որը վերագրված է անձի փոփոխականի անվան օբյեկտին, որը հայտարարված է ExampleCtrl կարգավորիչում: Այս անգամ արժեքը նույնպես կներառվի մուտքային տարրի մեջ: Բացի այդ, յուրաքանչյուր փոփոխություն, որը տեղի է ունենում մուտքային տարրում, ավտոմատ կերպով տեսանելի կլինի p տարրում և կթարմացվի վերահսկիչի օբյեկտում:

Անկյունային այլընտրանքներ

Կան մի քանի Angular փոխարինողներ, որոնք արժե նշել.

1. Backbone.js. Angular-ի նման, Backbone-ը հիմնված է MVC-ի վրա և օգտագործվում է Single Page հավելվածներ ստեղծելու համար: Այն հիմնված է չորս հիմնական դասերի վրա.

• Մոդել. պարունակում է հավելվածի հիմնական տվյալներ, այն կարող է ընդլայնվել լրացուցիչ գործառույթներով (ինչպես սկզբնավորումը), որոնք կատարվում են ամեն անգամ, երբ այդպիսի մոդելը ստեղծվում է:
• Հավաքածու՝ մոդելների զանգված
• Դիտել. դա DOM-ի և մոդելների իրադարձությունների ունկնդիր է: Այն օգտատիրոջը ներկայացնում է հավելվածի ներկա վիճակը
• Կարգավորիչ. օգտագործվում է պետական ​​վրա հիմնված հավելվածներ ստեղծելու համար

2. Ember.jsայնպես, ինչպես նախկինում նշված շրջանակները, այն հիմնված է MVC-ի վրա: Ember-ը ներկայացնում է այնպիսի տարրեր, ինչպիսիք են.

• Կաղապար. նման է Angular-ից, կարող է ներառել այնպիսի արտահայտություններ, ինչպիսիք են՝ {{name}}, որտեղ փոփոխականի արժեքը բխում է բաղադրիչից կամ կարգավորիչից:
• Բաղադրիչ. բաղկացած է երկու մասից՝ ձևանմուշ և JavaScript կոդը, որը նկարագրում է իր վարքը, օգտատիրոջ միջերեսի մի մասն է:
• Կարգավորիչ. աշխատում է բաղադրիչների նման: Ember-ի ապագա տարբերակները, հավանաբար, այն կփոխարինեն բաղադրիչներով
• Մոդել. ներկայացնում է հավելվածի ընտրված վիճակը

Համեմատություն

Անկյունային 2.0

Google-ը հայտարարեց Angular 2.0-ի մշակման մասին 2014 թվականի հոկտեմբերին: Այն խախտում է նախորդ տարբերակի կանոնները և ներկայացնում է նոր ենթադրություններ.

• Որպես կատարողականության չափման սանդղակ ընտրված են բջջայինները. Եթե հավելվածը կաշխատի շարժական սարքերի վրա, ապա այլ սարքերում որևէ խնդիր չի լինի։
• Որոշ մոդուլներ կբացառվեն նոր տարբերակից, ինչը կբերի ավելի լավ կատարողականության: Ծրագրավորողները մշակված հավելվածում կընտրեն միայն այն մոդուլները, որոնք իրենց անհրաժեշտ են
• Angular 2.0-ը կենտրոնանում է արդիականության վրա. մշակողը կարող է օգտագործել EcmaScript6 (ES6)

Ամփոփում

Չնայած Angular-ի ստեղծողների քննադատությանը մեծ քանակությամբ փոփոխությունների պատճառով, ես դա համարում եմ լավ շրջանակ, որի հետ հաճելի է աշխատել: Կարծես թե Angular-ի նոր տարբերակը ավելի լավն է լինելու՝ նախորդ տարբերակների թերությունների վերացման դեպքում այն ​​կօգտագործվի առանց անհանգստանալու մշակման ժամանակի մասին: Այս շրջանակը, իհարկե, ստեղծված է հատուկ տեսակի հավելվածի համար և հարմար չէ ամեն ինչի համար, ուստի այն միացնելը ձեր հավելվածին պետք է ուշադիր դիտարկել: Մենք ընտրեցինք Angular-ը Touch&Go նախագծի վրա աշխատելու ժամանակ — տեսեք, թե ինչպես է այն ստացվել:

Սկզբնապես հրապարակվել է www.merixstudio.com-ում: