ആംഗുലർ ജെ.എസ്. (പ്രോഗാമിംഗ് ഭാഷ)

ആംഗുലർ ജെ.എസ്.
വികസിപ്പിച്ചത്	ഗൂഗിൾ
ആദ്യപതിപ്പ്	ഒക്ടോബർ 20, 2010; 14 വർഷങ്ങൾക്ക് മുമ്പ്
Stable release	2.2.0 / നവംബർ 14, 2016; 8 വർഷങ്ങൾക്ക് മുമ്പ്
റെപോസിറ്ററി	github.com/angular/angular.js;
ഭാഷ	TypeScript, JavaScript
പ്ലാറ്റ്‌ഫോം	Cross-platform, see Legacy browser support
വലുപ്പം	144 KB production; 1 MB development
തരം	JavaScript, Single-page application Framework
അനുമതിപത്രം	MIT License
വെബ്‌സൈറ്റ്	angularjs.org; angular.io

ഇംഗ്ലീഷ് വിലാസം

https://ml.wikipedia.org/wiki/AngularJS

ജാവാസ്ക്രിപ്റ്റിൽ അധിഷ്‌ഠിതമായ ഒരു ഫ്രണ്ട് എന്റ് വെബ് സോഫ്റ്റ്‌വെയർ വികസന ചട്ടക്കൂടാണ് ആംഗുലർ ജെ.എസ് (English : AngularJS). ഒരു സ്വതന്ത്ര സോഫ്റ്റ്‌വെയർ പ്രൊജക്റ്റായ ഇത് പരിപാലിക്കുന്നത് ഗൂഗിളാണ്. എം.ഐ.ടി. ലൈസൻസിലാണ് ആംഗുലർ ജെ.എസ്. പുറത്തിറങ്ങുന്നത്. ഒറ്റ താളുള്ള വെബ് സോഫ്റ്റ്‌വെയറുകൾ വികസിപ്പിക്കുമ്പോൾ ഉണ്ടാവുന്ന പ്രതിബന്ധങ്ങൾ തരണം ചെയ്യലാണ് ആംഗുലർ ജെ.എസ്. പ്രൊജക്റ്റിന്റെ പ്രധാന ലക്ഷ്യം. ക്ലൈൻറ് സൈഡ് മോഡൽ വ്യൂ കൺട്രോളർ (എം.വി.സി) ഒരു ചട്ടക്കൂട് നൽകുന്നതിലൂടെ അത്തരം ആപ്ലിക്കേഷനുകളുടെ വികസനവും ടെസ്റ്റിംഗും ലഘൂകരിക്കാനാണ് ഇത് ലക്ഷ്യമിടുന്നത്, മോഡൽ-വ്യൂ-വ്യൂ മോഡേൺ (എം.വി.വി.എം) ആർക്കിറ്റക്ചറുകൾ, വെബ് ആപ്ലിക്കേഷനുകളിലും പ്രോഗ്രസ്സീവ് വെബ് ആപ്ലിക്കേഷനുകളിലും മറ്റും സാധാരണയായി കമ്പോണന്റ്സ് ഉപയോഗിക്കുന്നു.

മോങ്കോഡി.ബി.(MongoDB) ഡാറ്റാബേസ്, എക്സ്പ്രസ്സ്.ജെഎസ് വെബ് ആപ്ലിക്കേഷൻ സെർവർ ചട്ടക്കൂട്, കൂടാതെ നോഡ്.ജെഎസ്(Node.js) സെർവർ റൺടൈം എൻവയോൺമെൻറ് എന്നിവയുൾപ്പെടുന്ന മീൻ സ്റ്റാക്കിന്റെ ഫ്രണ്ട് എന്റായി ആംഗുലർ.ജെഎസ് ഉപയോഗിക്കുന്നു.

2021 ഡിസംബർ 31 വരെ ആംഗുലർ.ജെഎസ് ചട്ടക്കൂട് ദീർഘകാല പിന്തുണ ("LTS") നൽകുന്നു. ആ തീയതിക്ക് ശേഷം സുരക്ഷ, ബ്രൗസർ അനുയോജ്യത അല്ലെങ്കിൽ ജെക്വറി പ്രശ്നങ്ങൾ എന്നിവ പരിഹരിക്കുന്നതിന് ഗൂഗിൾ ഇനിമുതൽ ആംഗുലർ.ജെഎസ് അപ്‌ഡേറ്റ് ചെയ്യില്ല. മുന്നോട്ടുള്ള ഏറ്റവും നല്ല പാതയായി ആംഗുലർ(v2 +) ലേക്ക് അപ്‌ഗ്രേഡുചെയ്യാൻ ആംഗുലർ ടീം ശുപാർശ ചെയ്യുന്നു, എന്നാൽ അവ മറ്റ് ചില ഓപ്ഷനുകളും നൽകി.

അവലോകനം

എച്ച്.റ്റി.എം.എൽ പേജ് പ്രാരംഭ വായന നടത്തിക്കൊണ്ട് ആംഗുലർ ജെ.എസ് ഫ്രെയിംവർക്ക് പ്രവർത്തിക്കുന്നു, അതിൽ കൂടുതൽ ഇഷ്ടാനുസൃത ടാഗ് ആട്രിബ്യൂട്ടുകൾ അതിൽ ഉൾച്ചേർത്തിട്ടുണ്ട്. ആട്രിബ്യൂട്ടുകൾ പേജിന്റെ ഇൻപുട്ട് അല്ലെങ്കിൽ ഔട്ട്പുട്ട് ഭാഗങ്ങൾ സ്റ്റാൻഡേർഡ് ജാവാസ്ക്രിപ്റ്റ് വേരിയബിളുകൾ പ്രതിനിധാനം ചെയ്യുന്ന മാതൃകയിലേക്ക് നയിക്കുന്നു. ആ ജാവാസ്ക്രിപ്റ്റ് വേരിയബിളിന്റെ മൂല്യങ്ങൾ കോഡിനകത്ത് സ്വമേധയാ സജ്ജമാക്കാം, അല്ലെങ്കിൽ സ്റ്റാറ്റിക് അല്ലെങ്കിൽ ഡൈനാമിക് ജെസൺ(JSON) ഉറവിടങ്ങളിൽ നിന്നും തിരിച്ചെടുക്കാവുന്നതാണ്.

ജാവാസ്ക്രിപ്റ്റ് അനലിറ്റിക്സ് സർവീസായ ലിബ്സ്കോർ പറയുന്ന പ്രകാരം, വൂൾഫ്രം ആൽഫ, എൻബിസി, വാൽഗ്രീൻസ്, ഇൻറൽ, സ്പ്രിൻറ്, എബിസി ന്യൂസ്, 2016 ഒക്റ്റോബറിൽ പരീക്ഷിച്ച 1 ദശലക്ഷത്തിൽ 12,000 എണ്ണം^[3]മറ്റ് സൈറ്റുകൾ എന്നിവയുടെ വെബ്സൈറ്റുകളിൽ ആംഗുലർ ജെഎസ് ഉപയോഗിക്കുന്നു. ഗിറ്റ്ഹബ്ബിൽ ഏറ്റവുമധികം നക്ഷത്രമിട്ട പ്രൊജക്റ്റുകളിൽ ആദ്യ 100 എണ്ണം ആംഗുലർ ജെഎസ് ആണ്.^[4] ഉപയോക്തൃ ഇന്റർഫേസുകൾ സൃഷ്ടിക്കുന്നതിനും സോഫ്റ്റ്വെയർ കമ്പോണന്റുകളെ ബന്ധിപ്പിക്കുന്നതിനും ഡിക്ലറേറ്റീവ് പ്രോഗ്രാമിംഗ് ഉപയോഗിക്കണമെന്ന വിശ്വാസത്തിലാണ് ആംഗുലർ.ജെഎസ് നിർമ്മിച്ചിരിക്കുന്നത്, അതേസമയം ഒരു ആപ്ലിക്കേഷന്റെ ബിസിനസ് ലോജിക് നിർവചിക്കുന്നതിന് ഇമ്പറേറ്റീവ് പ്രോഗ്രാമിംഗ് നന്നായി യോജിക്കുന്നു.^[5] മോഡലുകളുടെയും കാഴ്‌ചകളുടെയും യാന്ത്രിക സമന്വയത്തെ അനുവദിക്കുന്ന ടു-വേ ഡാറ്റ-ബൈൻഡിംഗിലൂടെ ചലനാത്മക ഉള്ളടക്കം അവതരിപ്പിക്കുന്നതിന് പരമ്പരാഗതഎച്ച്.റ്റി.എം.എൽ-നെ ഈ ഫ്രെയിംവർക്ക് അനുയോജ്യമാക്കുകയും വിപുലീകരിക്കുകയും ചെയ്യുന്നു. തൽഫലമായി, പരീക്ഷണാത്മകതയും പ്രകടനവും മെച്ചപ്പെടുത്തുക എന്ന ലക്ഷ്യത്തോടെ ഡോക്യുമെന്റ് ഒബ്ജക്റ്റ് മോഡൽ (DOM) മാനിപ്പുലേഷന്റെ പ്രാധാന്യം ആംഗുലർ.ജെഎസ് കൂറയ്ക്കുകയും ചെയ്യുന്നു. ആംഗുലർ.ജെഎസിന്റെ രൂപകൽപ്പനയിൽ ഇനിപ്പറയുന്നവ ഉൾപ്പെടുന്നു:

ആപ്ലിക്കേഷൻ ലോജിക്കിൽ നിന്നും ഡോം(DOM)മാനിപുലേഷൻ വേർതിരിക്കുന്നു. ഇതുമൂലമുള്ള ബുദ്ധിമുട്ട് കോഡുകളെ ഘടനാപരമായ രീതിയിലാണ് ബാധിക്കുന്നത്.
സെർവറിന്റെ ഭാഗത്തു് ഒരു ആപ്ലിക്കേഷന്റെ ക്ലയൻറ് സൈറ്റിനെ വേർതിരിക്കുന്നു. ഇത് സമാന്തരമായി പുരോഗമനത്തിനായി പ്രവർത്തിക്കുന്നു, ഒപ്പം ഇരുവശങ്ങളിലും പുനരുപയോഗിക്കാൻ അനുവദിക്കുന്നു.
ഒരു ആപ്ലിക്കേഷൻ നിർമ്മിക്കാനുള്ള ഘടന നൽകുന്നു: ബിസിനസ്സ് യുക്തി എഴുതുന്നതിലൂടെയും, പരീക്ഷണത്തിലൂടെയും, യുഐ(UI) രൂപകൽപ്പന ചെയ്യുന്നു.

അവതരണം, ഡാറ്റ, ലോജിക്കൽ കമ്പോണൻസ് എന്നിവ വ്യത്യസ്തമാക്കുന്നതിന് ആംഗുലർ.ജെഎസ് എംവിസി(MVC) പാറ്റേൺ നടപ്പിലാക്കുന്നു.^[6] ഡിപൻഡൻസി ഇഞ്ചക്ഷൻ ഉപയോഗിച്ചാൽ, പരമ്പരാഗത സെർവർ സൈഡ് സേവനങ്ങളായ വ്യൂ-ഡിപെൻഡ് കൺട്രോളറുകൾ, ക്ലൈന്റ്-സൈഡ് വെബ് ആപ്ലിക്കേഷനുകൾ എന്നിവ നൽകുന്നു. തൽഫലമായി, സെർവറിലെ ഭാരം ഭൂരിഭാഗവും കുറയ്ക്കാൻ കഴിയും.

ലക്ഷ്യം(Scope)

കമ്പ്യൂട്ടർ സയൻസിൻറെ അടിസ്ഥാനഘടകങ്ങളെ പോലെ ആംഗുലർ ജെ.എസ്, "സ്കോപ്പ്" എന്ന പദം ഉപയോഗിക്കുന്നു.

പ്രോഗ്രാമിൽ ഒരു പ്രത്യേക ബിൻഡിങ്ങ് സാധുവാണെങ്കിൽ കമ്പ്യൂട്ടർ സയൻസിലെ സാധ്യത വിവരിക്കുന്നു. ഇ.സി.എം.എ-262 (ECMA-262) സ്പെസഫിക്കേഷൻ ഒരു പരിധി നിർവ്വചിക്കുന്നു:^[7]ക്ലൈൻറ്റ്-സൈഡ് വെബ് സ്ക്രിപ്റ്റുകളിലും ഒരു ഫങ്ഷൻ ഒബ്ജക്റ്റ് എക്സിക്യൂട്ട് ചെയ്യുന്ന ഒരു ലക്സിക്കൽ പരിസ്ഥിതി, ലാംഡ കാൽകുലസിൽ^[8] എങ്ങനെയാണ് സ്കോപ്പ്^[9] നിർവ്വചിക്കുന്നത് എന്ന് നോക്കാം.

"എം‌വി‌സി" വാസ്തുവിദ്യയുടെ ഭാഗമായി, സ്കോപ്പ് "മോഡൽ" ആയി മാറുന്നു, കൂടാതെ സ്കോപ്പിൽ നിർവചിച്ചിരിക്കുന്ന എല്ലാ വേരിയബിളുകളും "വ്യൂ" ഉം "കൺട്രോളർ" ഉം ആക്സസ് ചെയ്യാൻ കഴിയും. സ്കോപ്പ് ഒരു ഗ്ലൂവായി(glue) പ്രവർത്തിക്കുകയും "കാഴ്ച", "കൺട്രോളർ" എന്നിവ ബന്ധിപ്പിക്കുകയും ചെയ്യുന്നു.

ബൂട്ട്സ്ട്രാപ്പ്

DOM ലോഡ് ചെയ്തതിനുശേഷം ആഗുലർജെഎസ് ബൂട്ട്സ്ട്രാപ്പർ നിർവ്വഹിക്കുന്ന ചുമതല മൂന്ന് ഘട്ടങ്ങളായി ^[10] സംഭവിക്കുന്നു:

ഒരു പുതിയ ഇൻജക്റ്റർ ഉണ്ടാക്കുക.
ഡോം അലങ്കരിക്കുന്ന നിർദ്ദേശങ്ങളുടെ സമാഹാരം.
എല്ലാ നിർദ്ദേശങ്ങളും സ്കോപ്പിലേക്ക് ലിങ്കുചെയ്യുക.

ഡാറ്റാ ബൈൻഡിംഗുകളും അവതരണ കമ്പോണന്റുകളുടെ പെരുമാറ്റവും നിർവചിക്കുന്ന പതിവ്, വീണ്ടും ഉപയോഗിക്കാവുന്ന എച്ച്.ടി.എം.എൽ (HTML) പോലുള്ള ഘടകങ്ങളും ആട്രിബ്യൂട്ടുകളും നിർദ്ദേശിക്കാൻ ആംഗുലർജെഎസ് നിർദ്ദേശങ്ങൾ നൽകുന്നു. ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കുന്ന നിർദ്ദേശങ്ങൾ ഇവയാണ്:

ng-animate: നിലവിലുളള പ്രധാന, കസ്റ്റം ഡയറക്റ്റീവ്സുകളിലുള്ള ഒരു ജാവാസ്ക്രിപ്റ്റ്, സി.എസ്.എസ്3(CSS3) ട്രാൻസ്മിഷൻ, സി.എസ്.എസ്3 കീഫ്രെയിം, ആനിമേഷൻ ഹുക്കുകൾ എന്നിവ പിന്തുണയ്ക്കുന്നു.

എച്ച്.ടി.എം.എൽ ആട്രിബ്യൂട്ടുകൾക്ക് ng-* എച്ച്.ടി.എം.എൽ സവിശേഷതകളിൽ സാധുതയില്ലാത്തതിനാൽ, data-ng-* എന്നതും ഒരു പ്രിഫിക്സായി ഉപയോഗി ക്കാനാകും. ഉദാഹരണത്തിന്, ആംഗുലർ ജെഎസിൽ ng-app നും data-ng-app നും പ്രമാണികതയുണ്ട്.

ng-app: ഒരു ആംഗുലർ ജെഎസ് ആപ്ലിക്കേഷന്റെ റൂട്ട് എലമെൻറ് പ്രഖ്യാപിക്കുന്നു, അതിന് കീഴിൽ ബൈൻഡിംഗുകൾ പ്രഖ്യാപിക്കാനും സ്വഭാവം നിർവചിക്കാനും നിർദ്ദേശങ്ങൾ ഉപയോഗിക്കാം.
ng-aria: സാധാരണ അരിയ(ARIA) ആട്രിബ്യൂട്ടുകളുടെ പ്രവേശനപിന്തുണയ്ക്കുള്ള ഒരു മൊഡ്യൂൾ.
ng-bind

ഒരു ഡോം വാചകം ഒരു പദപ്രയോഗത്തിന്റെ മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കുന്നു. ഉദാഹരണത്തിനു്, സ്പാൻ(span)ഘടകത്തിനുള്ളിൽ 'പേര്' എന്നതിന്റെ മൂല്യം <span ng-bind="name"></span> കാണിക്കുന്നു. ആപ്ലിക്കേഷന്റെ സ്കോപ്പിലുള്ള വേരിയബിളിന്റെ 'പേരിന്' എന്തെങ്കിലും മാറ്റമുണ്ടാകുന്നത് ഡോമി(DOM)ൽ തൽക്ഷണം പ്രതിഫലിക്കും.

ng-class: ഒരു ബൂലിയെൻ(boolean)എക്സ്പ്രഷനുകളുടെ മൂല്യം അനുസരിച്ച് വ്യവസ്ഥാപിതമായി ഒരു ക്ലാസ് പ്രയോഗിക്കുന്നു.
ng-controller: എച്ച്.ടി.എം.എൽ എക്സ്പ്രഷനുകൾ മൂല്യനിർണ്ണയം ചെയ്യുന്നതിന് ഒരു ജാവസ്ക്രിപ്റ്റ് കൺട്രോളർ ക്ലാസ് വ്യക്തമാക്കുന്നു.
ng-if: കണ്ടീഷൻ ശരിയാണെങ്കിൽ, ഇനിപ്പറയുന്ന എലമെന്റിനെ ഇൻസ്റ്റന്റുചെയ്യുന്ന ബേസിക് എഫ്‌ സ്റ്റേറ്റ്മെൻറ് ഡയറക്റ്റീവ്. കണ്ടീഷൻ തെറ്റാണെങ്കിൽ, എലമെന്റിനെ ഡോമിൽ നിന്ന് നീക്കം ചെയ്യും. ശരിയായിരിക്കുമ്പോൾ, കംപൈൽ ചെയ്ത എലമെന്റിന്റെ ഒരു ക്ലോൺ വീണ്ടും ചേർക്കുന്നു.
ng-init: എലമെന്റുകൾ ആരംഭിക്കുമ്പോൾ ഒരിക്കൽ വിളിക്കുന്നു.
ng-model: ng-bind ന് സമാനമായ, എന്നാൽ വ്യൂവിനും സ്കോപ്പിനുമിടയിലുള്ള രണ്ട്-രീതിയിലുള്ള ഡാറ്റ ബിൻഡിംഗ് സ്ഥാപിക്കുന്നു.
ng-model-options: മോഡൽ അപ്‌ഡേറ്റുകൾ എങ്ങനെ ചെയ്യാമെന്നതിനുള്ള ട്യൂണിംഗ് നൽകുന്നു.
ng-repeat: ഒരു കളക്ഷനിൽ നിന്ന് ഒരെണ്ണം എടുത്ത് ഒരിക്കൽ ഒരു എലമെന്റ് സ്ഥാപിക്കുക.
ng-show & ng-hide: ബൂളിയൻ എക്സ്പ്രഷനുകളുടെ മൂല്യത്തെ അടിസ്ഥാനമാക്കി എലമെന്റിനെ പ്രദർശിപ്പിക്കുകയോ മറയ്ക്കുകയോ ചെയ്യുക. സി.എസ്.എസ്(CSS) ഡിസ്പ്ലേ ശൈലി ക്രമീകരിച്ചുകൊണ്ട് കാണിക്കുകയും മറയ്ക്കുകയും ചെയ്യുന്നു.
ng-switch: ഒരു സെലക്ഷൻ എക്സ്പ്രഷന്റെ മൂല്യത്തെ ആശ്രയിച്ച് ഒരു കൂട്ടം ചോയിസുകളിൽ നിന്ന് ഒരു ടെംപ്ലേറ്റ് സോപാധികമായി ഇൻസ്റ്റാൾ ചെയ്യുക.
ng-view: നിർദ്ദിഷ്ട കൺട്രോളറുകൾ പ്രവർത്തിപ്പിക്കുന്ന ടെം‌പ്ലേറ്റുകൾ റെൻഡർ ചെയ്യുന്നതിന് മുമ്പ് ജെസൺ(JSON)വഴി പരിഹരിക്കുന്ന റൂട്ടുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള അടിസ്ഥാന നിർദ്ദേശം.^[11]

ടു-വേ ഡാറ്റാ ബൈൻഡിംഗ്

ആംഗുലർ ജെ.എസിന്റെ ടു-വേ ഡാറ്റ ഡാറ്റാ ബൈൻഡിംഗ് ആണ് ഏറ്റവും ശ്രദ്ധേയമായ സവിശേഷത. ഇത് ബാക്ക് എൻഡ് ഫലകങ്ങളുടെ(templates) ഉത്തരവാദിത്തത്തിൽ നിന്നും മോചനം നൽകുന്നു. പകരം, മോഡലിൽ നിർവചിച്ചിരിക്കുന്ന സ്കോപ്പിൽ അടങ്ങിയിരിക്കുന്ന ഡാറ്റ അനുസരിച്ച് ടെം‌പ്ലേറ്റുകൾ പ്ലെയിൻ എച്ച്ടിഎംഎൽ റെൻഡർ ചെയ്യുന്നു. ആംഗുലർ $scope സർവീസ് മോഡൽ ഭാഗത്ത് മാറ്റങ്ങൾ കണ്ടെത്തുകയും ഒരു കൺട്രോളർ മുഖേന വ്യൂവിൽ എച്ച്ടിഎംഎൽ എക്സ്പ്രഷനുകളെ പരിഷ്ക്കരിക്കുകയും ചെയ്യുന്നു. അതുപോലെ, കാഴ്ചയിലെ ഏത് മാറ്റങ്ങളും മോഡലിൽ പ്രതിഫലിക്കുന്നു. ഇത് ഡോം(DOM) മാനിപുലേഷൻ കൈകാര്യം ചെയ്യേണ്ടതിന്റെ ആവശ്യകതയെ മറികടക്കുകയും വെബ് ആപ്ലിക്കേഷനുകളുടെ ബൂട്ട് സ്ട്രാപ്പിംഗും ദ്രുത പ്രോട്ടോടൈപ്പിംഗും പ്രോത്സാഹിപ്പിക്കുകയും ചെയ്യുന്നു.^[12] ആംഗുലർ ജെ.എസ് നിലവിലെ മൂല്യങ്ങൾ താരതമ്യപ്പെടുത്തി കൊണ്ട് മോഡലുകളിലുണ്ടാകുന്ന മാറ്റങ്ങൾ തിരിച്ചറിയുന്നു, എംബർ.ജെഎസ്(Ember.js) കൂടാതെ ബാക്ബോൺ.ജെഎസ്(Backbone.js)-ൽ നിന്നും വ്യത്യസ്തമായി, അശുദ്ധ-പരിശോധനാ(dirty-checking)പ്രക്രിയയിൽ മുമ്പ് മൂല്യങ്ങൾ സംഭരിച്ചുകൊണ്ട്, മോഡൽ മൂല്യങ്ങൾ മാറിക്കഴിയുമ്പോൾ ശ്രോതാക്കൾ (listeners) പ്രേരിപ്പിക്കപ്പെടുന്നു.^[13]

$watch

$watch ഡെർട്ടി ചെക്കിംഗ്(dirty checking) ആംഗുലർ രീതിയാണ്. $scope ഏതെങ്കിലും വേരിയബിൾ അല്ലെങ്കിൽ എക്സ്പ്രഷൻ ഓട്ടോമാറ്റിക്കായി ഒരു $watchExpression ആംഗുലറായി സജ്ജീകരിക്കുന്നു. അങ്ങനെ $scope ഒരു വേരിയബിളിനെ അല്ലെങ്കിൽ ഡയറക്ടീവിസിനെ ഉപയോഗപ്പെടുത്തുന്നു, ng-if, ng-show, ng-repeat മുതലയാവ. എല്ലാം യാന്ത്രികമായി ആംഗുലർ സ്കോപ്പുകളിൽ വാച്ചുകൾ സൃഷ്ടിക്കുന്നു. $scope ഓബ്ജറ്റുകളിൽ ആംഗുലറിലുള്ള ലളിതമായ ഒരു ശ്രേണി $$watchers-നെ പരിപാലിക്കുന്നു.

ആംഗുലർ ജെ.എസിൽ ഒരു വാച്ചർ നിർവ്വചിക്കാനുള്ള വിവിധ മാർഗ്ഗങ്ങൾ.

$scope ഒരു ആട്രിബ്യൂട്ട് $watch സ്പഷ്ടമായി കാണുക.

$scope.$watch('person.username', validateUnique);

നിങ്ങളുടെ ടെംപ്ലേറ്റിൽ ഒരു ഇന്റർപോളേഷൻ(interpolation)സ്ഥാപിക്കുക (നിലവിലെ $scope-ൽ ഒരു വാച്ചർ സൃഷ്ടിക്കും).
നിങ്ങൾക്കായി വാച്ചർ നിർവചിക്കാൻ ng-model പോലുള്ള ഡിറക്ടീവിസിനെ ആവശ്യപ്പെടുക.

<input ng-model="person.username" />

$digest

$digest() ആംഗുലർ മെത്തേഡാണ്, ആവർത്തനമായി ആംഗുലർ ജെ.എസ് നിരന്തരം ഇടവേളകളിൽ കൊണ്ടുവരുന്നു. $digest മെത്തേഡിൽ, ആംഗുലർ ലിറ്റരിൽ അതിന്റെ സ്കോപ്പ് / ചൈൽഡ് സ്കോപ്പിൽ മൊത്തം $watches ആവർത്തിക്കുന്നു.

$apply

$apply() ഒരു ആംഗുലർ മെത്തേഡാണ്, ആന്തരികമായി $digest ആവാഹിക്കുന്നു. നിങ്ങൾ ആംഗുലർ മാനുവലായി ഡെർട്ടി ചെക്കിംഗ് ആരംഭിക്കാൻ ആവശ്യപ്പെടുമ്പോൾ ഈ മെത്തേഡ് ഉപയോഗിക്കുന്നു (എല്ലാ $watches-ഉം പ്രവർത്തിപ്പിക്കുക)

$destroy

$destroy എന്നത് ആംഗുലർ ജെ.എസിൽ ഒരു മെത്തേഡും ഇവന്റുമാണ്. $destroy() മെത്തേഡ്, ഡെർട്ടി ചെക്കിൽ നിന്നും ഒരു സ്കോപ്പും എല്ലാ ചിൽഡ്രൻസിനെയും നീക്കം ചെയ്യുന്നു. ഒരു $scope അല്ലെങ്കിൽ $controller നശിപ്പിക്കപ്പെടുമ്പോൾ $destroy ഇവൻറ് ആംഗുലറാണ് വിളിക്കുന്നു.

വികസന ചരിത്രം

ഓൺലൈൻ ജെസൺ(JSON) സ്റ്റോറേജ് സേവനത്തിനു പിന്നിലുള്ള സോഫ്റ്റ് വെയർ എന്ന നിലയിൽ ബ്രാറ്റ്ടെക് എൽ.സി.സിയിലെ മിസ്കോ ഹെവിറി(Miško Hevery)^[14] 2009 ൽ ആംഗുലർ ജെ.എസ് വികസിപ്പിച്ചെടുത്തു, എന്റർപ്രൈസിനായി എളുപ്പത്തിൽ നിർമ്മിക്കാൻ കഴിയുന്ന അപ്ലിക്കേഷനുകൾക്ക് മെഗാബൈറ്റ് വില നിശ്ചയിക്കുമായിരുന്നു.^[15] ഈ സംരംഭം "GetAngular.com" എന്ന വെബ് സൈറ്റിൽ സ്ഥിതിചെയ്യുന്നു, കൂടാതെ ഏതാനും സബ്സ്ക്രൈബർമാരുണ്ടായിരുന്നു, ബിസിനസ് ആശയത്തെ ഉപേക്ഷിച്ച് ഓപ്പൺ സോഴ്സ് ലൈബ്രറിയായി ആംഗുലർ പുറത്തിറക്കാൻ തീരുമാനിക്കുന്നതിനു മുൻപായിരുന്നു അത്.

1.6 പതിപ്പ് ആംഗുലർ അധിഷ്ഠിത ആപ്ലിക്കേഷൻ ആർക്കിടെക്ചർ എന്ന ആശയം ഉൾപ്പെടെ ആംഗുലർജെഎസിലേക്ക് ആംഗുലറിന്റെ പല ആശയങ്ങളും ചേർത്തു.^[16] മറ്റുള്ളവയിൽ ഈ റിലീസ് സാൻഡ്ബോക്സ് നീക്കം ചെയ്തു..^[17]സാൻ‌ഡ്‌ബോക്സിനെ മറികടക്കുന്ന നിരവധി വൾനറബിലിറ്റികൾ കണ്ടെത്തിയിട്ടും അധിക സുരക്ഷ നൽകുമെന്ന് പല ഡവലപ്പർമാരും വിശ്വസിച്ചു. നിലവിലെ (2020 മാർച്ച് വരെ) ആംഗുലർജെഎസിന്റെ സ്ഥിരമായ റിലീസ് 1.7.9 ആണ്.^[18]

ഘട്ടംഘട്ടമായി ആംഗുലർജെഎസിനായി ഒരു ഷെഡ്യൂൾ 2018 ജനുവരിയിൽ പ്രഖ്യാപിച്ചു: 1.7.0 പുറത്തിറക്കിയ ശേഷം, ആംഗുലർജെഎസിന്റെ സജീവ വികസനം 2018 ജൂൺ 30 വരെ തുടരും. അതിനുശേഷം, 1.7 ന് 2021 ഡിസംബർ 31 വരെ ദീർഘകാല പിന്തുണ നൽകും.

ലെഗസി ബ്രൗസർ സപ്പോർട്ട്

ആംഗുലർജെഎസിന്റെ 1.3 ഉം അതിനുശേഷമുള്ള പതിപ്പുകളും ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 8 അല്ലെങ്കിൽ അതിനു മുമ്പുള്ളവയെ പിന്തുണയ്ക്കുന്നില്ല. ആംഗുലർജെഎസ് 1.2 ഐഇ8(IE8) നെ പിന്തുണയ്ക്കുമ്പോൾ, അതിന്റെ ടീം പിന്തുണയ്ക്കുന്നില്ല.^[19]^[20]

ആംഗുലറും ആംഗുലർ ഡാർട്ടും

ആംഗുലർജെഎസിന്റെ തുടർന്നുള്ള പതിപ്പുകളെ ആംഗുലറെന്ന് വിളിക്കുന്നു. ഇത് ടൈപ്പ്സ്ക്രിപ്റ്റ്(TypeScript)അടിസ്ഥാനത്തിപ്പെടുത്തിയുള്ള ഓപ്പൺ സോഴ്സ് ഫ്രണ്ട് എൻഡ് ആപ്ലിക്കേഷൻ പ്ലാറ്റ്ഫോമാണ്. 2016 ഡിസംബർ 13 ന് ആംഗുലർ 4 പ്രഖ്യാപിക്കപ്പെട്ടു. റൂട്ട് പാക്കേജിന്റെ പതിപ്പ് തെറ്റായി കണക്കാക്കുന്നത് മൂലം ആശയക്കുഴപ്പം ഇല്ലാതാക്കാൻ 3-നെ ഒഴിവാക്കി. ഇതിനകം തന്നെ v3.3.0 ആയി വിതരണം ചെയ്തിരുന്നു.^[21]

സി സ്റ്റൈൽ സിന്റാക്സ് ഉപയോഗിക്കുന്ന ഒബ്ജക്റ്റ്-ഓറിയന്റഡ്, ക്ലാസ് ഡിഫൈൻഡ്, സിംഗിൾ ഇൻഹെറിറ്റൻസ് പ്രോഗ്രാമിംഗ് ഭാഷയായ ഡാർട്ടിൽ ആംഗുലാർഡാർട്ട് പ്രവർത്തിക്കുന്നു, ഇത് ആംഗുലർജെഎസ് (ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നു), ആംഗുലർ 2 / ആംഗുലർ 4 (ടൈപ്പ്സ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നു) എന്നിവയിൽ നിന്ന് വ്യത്യസ്തമാണ്. ഫ്രെയിംവർക്കിന്റെ പതിപ്പ് അത് ഉപയോഗിച്ച റൗട്ടറിന്റെ പതിപ്പ് നമ്പറുമായി വിന്യസിച്ചുകൊണ്ട് ആംഗുലർ 4 മാർച്ച് 2017 ൽ പുറത്തിറക്കി. ആംഗുലർ 5 2017 നവംബർ 1 ന് പുറത്തിറങ്ങി.^[22] ആംഗുലറിലുള്ള 5 ലെ വ്യാഖ്യാന മെച്ചപ്പെടുത്തലുകൾ പ്രോഗ്രസ്സീവ് വെബ് ആപ്ലിക്കേഷനുകൾ, ബിൽഡ് ഒപ്റ്റിമൈസ്, മെറ്റീരിയൽ ഡിസൈനുമായി ബന്ധപ്പെട്ട മെച്ചപ്പെടുത്തലുകൾ എന്നിവ ഉൾപ്പെടുന്നു.^[23] ആംഗുലർ 6 2018 മെയ് 3 ന് പുറത്തിറങ്ങി, ആംഗുലർ 7 2018 ഒക്ടോബർ 18നും^[24] ആംഗുലർ 8 2019 മെയ് 28നും പുറത്തിറങ്ങി. ആംഗുലർ സെമാന്റിക് വെർഷനിംഗ് മാനദണ്ഡങ്ങൾ പിന്തുടരുന്നു, ഓരോ പ്രധാന പതിപ്പ് നമ്പറുകളും ബ്രേക്കിംഗ് ചേയ്ഞ്ചിംഗിനെ സൂചിപ്പിക്കുന്നു. ഓരോ പ്രധാന പതിപ്പിനും 6 മാസത്തെ സജീവ പിന്തുണ നൽകുന്നതിന് ആംഗുലർ പ്രതിജ്ഞാബദ്ധമാണ്, തുടർന്ന് 12 മാസത്തെ ദീർഘകാല പിന്തുണയും. എല്ലാ പ്രധാന റിലീസിനും 1 മുതൽ 3 വരെ ചെറിയ റിലീസുകൾ നൽകുകയും, പ്രധാന റിലീസുകൾ ഓരോ രണ്ട് വർഷം കൂടുമ്പോൾ ഉണ്ടാകുന്നു.^[25]

ആംഗുലർ യൂണിവേഴ്സൽ

ഒരു സാധാരണ ആംഗുലർ ആപ്ലിക്കേഷൻ ബ്രൗസറിൽ എക്സിക്യൂട്ട് ചെയ്യുന്നു, സെർവർ സൈഡ് റെൻഡറിംഗ് (എസ്എസ്ആർ) വഴി ആംഗുലർ യൂണിവേഴ്സൽ സെർവറിൽ സ്റ്റാറ്റിക് ആപ്ലിക്കേഷൻ പേജുകൾ സൃഷ്ടിക്കുന്നു.^[26]

ലൈബ്രറികൾ

ആംഗുലർജെഎസ് മെറ്റീരിയൽ

ആംഗുലർജെഎസിൽ^[27]^[28]മെറ്റീരിയൽ ഡിസൈൻ നടപ്പിലാക്കുന്ന ഒരു യുഐ(UI) കമ്പോണന്റ് ലൈബ്രറിയാണ് ആംഗുലർജെഎസ് മെറ്റീരിയൽ.^[29] പുനരുപയോഗിക്കാൻ‌ കഴിയുന്നതും നന്നായി ടെസ്റ്റ് ചെയ്തതും(well-tested) ആക്‌സസ് ചെയ്യാവുന്നതുമായ യുഐ കമ്പോണന്റുകളുടെ ഒരു കൂട്ടം ഈ ലൈബ്രറി നൽകുന്നു.

ക്രോം എക്സ്റ്റഷൻ

ജൂലായ് 2012 ൽ, ആംഗുലർ നിർമ്മിച്ച വെബ് ആപ്ലിക്കേഷനുകളുടെ ഡീബഗ്ഗിംഗ് അനുഭവം മെച്ചപ്പെടുത്താൻ ഗൂഗിൾ ക്രോം ബതരാംഗ് എന്ന എക്സ്റ്റഷനു രൂപം നൽകി.^[30] പെർഫോമൻസ് ബോട്ടിൽനെക്ക്(Performance bottlenecks-ഒരു പ്രവർത്തനക്ഷമമായ കമ്പ്യൂട്ടറിനെയോ സെർവറിനെയോ മന്ദഗതിയിലാക്കുന്നു. “ബോട്ടിൽനെക്ക്” എന്ന പദം ഓവർലോഡ് ചെയ്ത നെറ്റ്‌വർക്കിനെയും ഒരു കമ്പ്യൂട്ടിംഗ് ഉപകരണത്തിന്റെ അവസ്ഥയെയും സൂചിപ്പിക്കുന്നു, അതിൽ ഏത് കമ്പോണന്റാണോ ഉപയോഗിക്കുന്നത് അത് ബാക്കി ഭാഗങ്ങളുമായി ചേർന്ന് വേഗത നിലനിർത്താൻ കഴിയാത്തതിനാൽ മൊത്തത്തിലുള്ള പ്രകടനം മന്ദഗതിയിലാകുന്നു.) എളുപ്പത്തിൽ കണ്ടെത്തുന്നതിന് വേണ്ടിയാണ് ഈ എക്സറ്റൻഷൻ രൂപകൽപന ചെയ്തത്, ഒപ്പം ഡീബഗ്ഗിംഗ് അപ്ലിക്കേഷനുകൾക്കായി ഒരു ജിയുഐ(GUI) വാഗ്ദാനം ചെയ്യുന്നു.^[31] 2014 അവസാനത്തിലും 2015 ന്റെ തുടക്കത്തിലും ഈ എക്സറ്റൻഷൻ ആംഗുലറിന്റെ സമീപകാല പതിപ്പുകളുമായി (v1.2.x ന് ശേഷം) പൊരുത്തപ്പെടുന്നില്ല.^[32] ഈ എക്സറ്റൻഷനായി അവസാനമായി അപ്‌ഡേറ്റ് ചെയ്തത് 2017 ഏപ്രിൽ 4 നായിരുന്നു.

പ്രകടനം

ആംഗുലർ ജെഎസ് ഒരു ഡൈജസ്റ്റ് സൈക്കിളിന്റെ മാതൃക നൽകുന്നു. ഈ സൈക്കിൾ ഒരു ലൂപ്പായി കണക്കാക്കാം, എല്ലാ$scopeകളും എല്ലാ വേരിയബിളുകളിലും മാറ്റമുണ്ടെങ്കിൽ ആംഗുലർ പരിശോധിക്കുന്നു. അങ്ങനെ, $scope.myVar ഒരു കണ്ട്രോളറിൽ നിർവചിച്ചിട്ടുണ്ടെങ്കിൽ ഈ വേരിയബിളിനെ നിരീക്ഷിക്കാനായി, ഓരോ ലൂപ്പ് ആവർത്തനത്തിലും MyVar-ലുള്ള മാറ്റങ്ങൾ ആംഗുലർ നിരീക്ഷിക്കും.

ഓരോ സൈക്കിളിലും $scope-ലെ നിരവധി വേരിയബിളുകൾ ആംഗുലർ ജെഎസ് പരിശോധിക്കുമ്പോൾ ഈ സമീപനം മന്ദഗതിയിലുള്ള റെൻഡറിംഗിലേക്ക് നയിക്കുന്നു. ഏതൊരു പേജിലും 2000-ൽ താഴെ വാച്ചർമാരെ വീതം സൂക്ഷിക്കാൻ മിക്കോ ഹെവറി നിർദ്ദേശിക്കുന്നു.^[13]

അവലംബം

↑ Earliest known releases
↑ "Release 2.2.0". GitHub. Retrieved 2016-11-16.
↑ "Libscore". libscore.com. Retrieved 2016-10-17.
↑ "GitHub search results sorted by number of stars".
↑ "What Is Angular?". Retrieved 12 February 2013.{{cite web}}: CS1 maint: url-status (link)
↑ Understanding Components
↑ "Annotated ECMAScript 5.1, Section 10.2 Lexical Environments". Retrieved 2015-01-03.
↑ name="BarendregtBarendsen">Barendregt, Henk; Barendsen, Erik (March 2000), Introduction to Lambda Calculus (PDF){{citation}}: CS1 maint: year (link)^{[പ്രവർത്തിക്കാത്ത കണ്ണി]}
↑ "AngularJS: Developer Guide: Scopes". Retrieved 2015-01-03.
↑ "Writing Directives". angularjs.org. November 28, 2012. Retrieved 2013-07-21.
↑ Component Router
↑ "5 Awesome AngularJS Features". Retrieved 13 February 2013.{{cite web}}: CS1 maint: url-status (link)
↑ ^13.0 ^13.1 Misko Hevery. "Databinding in angularjs". Retrieved 2014-03-09.
↑ "Hello World, <angular/> is here". Retrieved 2014-10-12.
↑ "GetAngular". Angular / BRAT Tech. LLC. Archived from the original on 2010-04-13. Retrieved 2014-10-12.
↑ "AngularJS: Developer Guide for v1.5.8: Components". Retrieved 2017-09-26.
↑ "angular.js". GitHub. Retrieved 2017-09-26.
↑ "Release v1.7.9 · angular/angular.js". GitHub. Retrieved April 9, 2021.
↑ "Internet Explorer Compatibility". Angular JS 1.7.7 Developer Guide. Retrieved 12 Feb 2019. AngularJS 1.3 has dropped support for IE8. Read more about it on our blog. AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.
↑ Minar, Igor. "AngularJS 1.3: a new release approaches". AngularJS Blog. Archived from the original on 2014-12-08. Retrieved 2014-10-12.
↑ "Ok... let me explain: it's going to be Angular 4.0". angularjs.blogspot.kr. Archived from the original on 2017-10-16. Retrieved 2016-12-14.
↑ Fluin, Stephen (April 26, 2018). "Version 5.0.0 of Angular Now Available". Medium. Retrieved April 9, 2021.
↑ Krill, Paul (September 18, 2017). "AngularJS 5 JavaScript framework delayed". InfoWorld. Retrieved April 9, 2021.
↑ Fluin, Stephen (3 May 2018). "Version 6 of Angular Now Available – Angular Blog". Angular Blog. Retrieved 8 June 2018.
↑ "Angular versioning and releases". angular.io. Retrieved 8 June 2018.
↑ Pieszak, Mark (January 7, 2020). "Angular Universal & Server-side rendering Deep-Dive". Medium. Retrieved April 9, 2021.
↑ "angular/material (GitHub)". Retrieved 2020-12-24.
↑ "AngularJS Material Documentation". Retrieved 2020-12-24.
↑ Kotaru, V. Keerti (2016-08-25). Material Design Implementation with AngularJS: UI Component Framework (in ഇംഗ്ലീഷ്). Apress. p. 4. ISBN 9781484221907.
↑ "angular/angularjs-batarang (GitHub)". Retrieved 2014-10-12.
↑ Ford, Brian. "Introducing the AngularJS Batarang". AngularJS Blog. Retrieved 2014-10-12.
↑ "batarang Chrome extension for AngularJS appears broken".

[1] Earliest known releases

[2] "Release 2.2.0". GitHub. Retrieved 2016-11-16.

[3] "Libscore". libscore.com. Retrieved 2016-10-17.

[4] "GitHub search results sorted by number of stars".

[5] "What Is Angular?". Retrieved 12 February 2013.{{cite web}}: CS1 maint: url-status (link)

[6] Understanding Components

[es5-x10.2-7] "Annotated ECMAScript 5.1, Section 10.2 Lexical Environments". Retrieved 2015-01-03.

[8] ="BarendregtBarendsen">Barendregt, Henk; Barendsen, Erik (March 2000), Introduction to Lambda Calculus (PDF){{citation}}: CS1 maint: year (link)^{[പ്രവർത്തിക്കാത്ത കണ്ണി]}

[angular-scope-9] "AngularJS: Developer Guide: Scopes". Retrieved 2015-01-03.

[Writing_Directives-10] "Writing Directives". angularjs.org. November 28, 2012. Retrieved 2013-07-21.

[11] Component Router

[12] "5 Awesome AngularJS Features". Retrieved 13 February 2013.{{cite web}}: CS1 maint: url-status (link)

[Misko_Hevery-13] 13.0 ^13.1 Misko Hevery. "Databinding in angularjs". Retrieved 2014-03-09.

[angularishere-14] "Hello World, <angular/> is here". Retrieved 2014-10-12.

[getangular-archive.org-15] "GetAngular". Angular / BRAT Tech. LLC. Archived from the original on 2010-04-13. Retrieved 2014-10-12.

[angularjs-158-dev-guide-components-16] "AngularJS: Developer Guide for v1.5.8: Components". Retrieved 2017-09-26.

[angularjs-github-changelog-17] "angular.js". GitHub. Retrieved 2017-09-26.

[18] "Release v1.7.9 · angular/angular.js". GitHub. Retrieved April 9, 2021.

[angularjs-ie-compat-19] "Internet Explorer Compatibility". Angular JS 1.7.7 Developer Guide. Retrieved 12 Feb 2019. AngularJS 1.3 has dropped support for IE8. Read more about it on our blog. AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.

[angularjs-13-20] Minar, Igor. "AngularJS 1.3: a new release approaches". AngularJS Blog. Archived from the original on 2014-12-08. Retrieved 2014-10-12.

[21] "Ok... let me explain: it's going to be Angular 4.0". angularjs.blogspot.kr. Archived from the original on 2017-10-16. Retrieved 2016-12-14.

[22] Fluin, Stephen (April 26, 2018). "Version 5.0.0 of Angular Now Available". Medium. Retrieved April 9, 2021.

[23] Krill, Paul (September 18, 2017). "AngularJS 5 JavaScript framework delayed". InfoWorld. Retrieved April 9, 2021.

[24] Fluin, Stephen (3 May 2018). "Version 6 of Angular Now Available – Angular Blog". Angular Blog. Retrieved 8 June 2018.

[25] "Angular versioning and releases". angular.io. Retrieved 8 June 2018.

[26] Pieszak, Mark (January 7, 2020). "Angular Universal & Server-side rendering Deep-Dive". Medium. Retrieved April 9, 2021.

[angularjs-material-github-27] "angular/material (GitHub)". Retrieved 2020-12-24.

[angularjs-material-documentation-28] "AngularJS Material Documentation". Retrieved 2020-12-24.

[29] Kotaru, V. Keerti (2016-08-25). Material Design Implementation with AngularJS: UI Component Framework (in ഇംഗ്ലീഷ്). Apress. p. 4. ISBN 9781484221907.

[batarang-github-30] "angular/angularjs-batarang (GitHub)". Retrieved 2014-10-12.

[introbatarang-31] Ford, Brian. "Introducing the AngularJS Batarang". AngularJS Blog. Retrieved 2014-10-12.

[32] "batarang Chrome extension for AngularJS appears broken".

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

[24]

[25]

[26]

[27]

[28]

[29]

[30]

[31]

[32]