මම සේවාදායකයා-පැත්තේ අයදුම්පත් සංවර්ධනය හුරු ඉන්නේ සිතන්න jQuery , නමුත් දැන් මම භාවිතා ආරම්භ කිරීමට කැමති AngularJS . අවශ්‍ය වන පරමාදර්ශී මාරුව ඔබට විස්තර කළ හැකිද? පිළිතුරක් සැකසීමට ඔබට උදව් විය හැකි ප්‍රශ්න කිහිපයක් මෙන්න:

• ග්‍රාහක පාර්ශවීය වෙබ් යෙදුම් වෙනස් ආකාරයකින් නිර්මාණය කරන්නේ කෙසේද? විශාලතම වෙනස කුමක්ද?
• මා කිරීම / භාවිතා කිරීම නැවැත්විය යුත්තේ කුමක් ද; ඒ වෙනුවට මා කුමක් කිරීමට / භාවිතා කිරීමට පටන් ගත යුතුද?
• සේවාදායක පාර්ශවයේ සලකා බැලීම් / සීමාවන් තිබේද?

jQueryසහ අතර සවිස්තර සැසඳීමක් මම සොයන්නේ නැත AngularJS.

1. ඔබේ පිටුව සැලසුම් නොකරන්න, පසුව එය DOM හැසිරවීම් සමඟ වෙනස් කරන්න

JQuery හි, ඔබ පිටුවක් නිර්මාණය කරයි, පසුව ඔබ එය ගතික කරයි. මෙයට හේතුව jQuery වැඩි දියුණු කිරීම සඳහා නිර්මාණය කර ඇති අතර එම සරල පරිශ්‍රයෙන් ඇදහිය නොහැකි තරම් වර්ධනය වී තිබීමයි.

නමුත් AngularJS හි, ඔබ ඔබේ ගෘහ නිර්මාණ ශිල්පය මනසේ තබාගෙන බිම් මට්ටමේ සිට ආරම්භ කළ යුතුය. "මට මෙම ඩොම් කැබැල්ල ඇති අතර එය එක්ස් කිරීමට මට අවශ්‍යය" යැයි සිතීම වෙනුවට ආරම්භ කිරීම වෙනුවට, ඔබට ඉටු කර ගැනීමට අවශ්‍ය දේ සමඟ ආරම්භ කළ යුතුය, ඉන්පසු ඔබේ යෙදුම සැලසුම් කිරීම ගැන යන්න, පසුව ඔබේ දැක්ම සැලසුම් කිරීම ගැන යන්න.

2. AngularJS සමඟ jQuery වැඩි නොකරන්න

ඒ හා සමානව, jQuery X, Y, සහ Z යන අදහස සමඟ ආරම්භ නොකරන්න, එබැවින් මාදිලි සහ පාලකයන් සඳහා මම ඉහළින් AngularJS එකතු කරමි. ඔබ ආරම්භ කරන විට මෙය සැබවින්ම පෙළඹවීමක් වන අතර, ඒ නිසා මම නිතරම නිර්දේශ කරන්නේ නව AngularJS සංවර්ධකයින් jQuery කිසිසේත් භාවිතා නොකරන ලෙසයි, අවම වශයෙන් ඔවුන් “කෝණික මාර්ගය” කිරීමට පුරුදු වන තුරු.

බොහෝ සංවර්ධකයින් මෙහි සහ තැපැල් ලැයිස්තුවේ jQuery ප්ලගීන සමඟ කේත පේළි 150 ක් හෝ 200 ක් සමඟ මෙම විස්තීර්ණ විසඳුම් නිර්මාණය කරන බව මම දැක ඇත්තෙමි. ඉන්පසු ඔවුන් කෝණික ජේඑස් වෙත මැලියම් කර ඇති අතර $applyඒවා ව්‍යාකූල සහ කැළඹිලි සහිත ඇමතුම් ආපසු ලබා ගත හැකිය . නමුත් අවසානයේදී ඔවුන් එය ක්‍රියාත්මක කරයි! ගැටළුව වන්නේ බොහෝ විට jQuery ප්ලගිනය කේතයේ භාගයකින් AngularJS හි නැවත ලිවිය හැකි වීමයි, එහිදී හදිසියේම සියල්ල තේරුම් ගත හැකි සහ සරල වේ.

අවසාන කරුණ මෙයයි: විසඳන විට, පළමුව "AngularJS හි සිතන්න"; ඔබට විසඳුමක් ගැන සිතිය නොහැකි නම්, ප්‍රජාවගෙන් විමසන්න; මේ සියල්ලෙන් පසු පහසු විසඳුමක් නොමැති නම් , jQuery වෙත ළඟා වීමට නිදහස් වන්න. නමුත් jQuery කිහිලිකරුවෙකු වීමට ඉඩ නොදෙන්න, නැතහොත් ඔබ කිසි විටෙකත් AngularJS ප්‍රගුණ නොකරනු ඇත.

3. ගෘහ නිර්මාණ ශිල්පය අනුව සැමවිටම සිතන්න

පළමු බව දැන -පිටු තනි අයදුම්පත් වේ අයදුම්පත් . ඒවා වෙබ් පිටු නොවේ . එබැවින් අපි සේවාදායක පාර්ශවීය සංවර්ධකයෙකු ලෙස සිතීමට අමතරව සේවාදායක පාර්ශවීය සංවර්ධකයෙකු ලෙස සිතිය යුතුය . අපගේ යෙදුම තනි, විස්තීරණ, පරීක්ෂා කළ හැකි සංරචක වලට බෙදන්නේ කෙසේද යන්න ගැන අප සිතා බැලිය යුතුය.

එබැවින් ආකාරය ඔබ කරන්නේ? ඔබ "AngularJS හි සිතන්නේ කෙසේද"? JQuery හා සැසඳීමේදී පොදු මූලධර්ම කිහිපයක් මෙන්න.

දැක්ම "නිල වාර්තාව" වේ

JQuery හි, අපි ක්‍රමලේඛයෙන් දැක්ම වෙනස් කරමු. අපට පහත වැටෙන මෙනුවක් ඒ ulහා සමාන ලෙස අර්ථ දැක්විය හැකිය :

<ul class="main-menu">
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

JQuery හි, අපගේ යෙදුම් තර්කනයේ දී, අපි එය වැනි දෙයක් සමඟ එය සක්‍රීය කරමු:

$('.main-menu').dropdownMenu();

අපි දර්ශනය දෙස බලන විට, මෙහි කිසියම් ක්‍රියාකාරීත්වයක් ඇති බව ක්ෂණිකව නොපෙනේ. කුඩා යෙදුම් සඳහා, එය හොඳයි. නමුත් සුළු නොවන යෙදුම් සඳහා, දේවල් ඉක්මනින් ව්‍යාකූල වන අතර නඩත්තු කිරීමට අපහසු වේ.

AngularJS හි, දර්ශනය යනු දෘෂ්ටිය පදනම් කරගත් ක්‍රියාකාරීත්වයේ නිල වාර්තාවයි. අපගේ ulප්‍රකාශය ඒ වෙනුවට පෙනෙනු ඇත:

<ul class="main-menu" dropdown-menu>
    ...
</ul>

මේ දෙදෙනා එකම දේ කරති, නමුත් AngularJS අනුවාදයේ අච්චුව දෙස බලන ඕනෑම කෙනෙකුට සිදුවිය යුතු දේ දනී. සංවර්ධන කණ්ඩායමේ නව සාමාජිකයෙකු පැමිණෙන සෑම අවස්ථාවකම ඇයට මේ දෙස බලා එය ක්‍රියාත්මක කිරීම යනුවෙන් නියෝගයක් ඇති බව දැන ගත හැකිය dropdownMenu. ඇයට නිවැරදි පිළිතුරක් ලබා දීමට හෝ කිසිදු කේතයක් හරහා ගමන් කිරීමට අවශ්‍ය නැත. සිදුවිය යුතු දේ දර්ශනය අපට පැවසුවා. බොහෝ පිරිසිදුයි.

AngularJS වෙත නව සංවර්ධකයින් බොහෝ විට මෙවැනි ප්‍රශ්නයක් අසයි: විශේෂිත වර්ගයක සියලුම සබැඳි සොයා ගන්නේ කෙසේද සහ ඒවාට නියෝගයක් එක් කරන්නේ කෙසේද? අප පිළිතුරු දෙන විට සංවර්ධකයා සැමවිටම අවුල් සහගතය: ඔබ එසේ නොකරයි. නමුත් ඔබ එසේ නොකිරීමට හේතුව මෙය අර්ධ jQuery, අර්ධ කෝණික ජේඑස් හා සමාන නොවේ. මෙහි ඇති ගැටළුව නම්, සංවර්ධකයා AngularJS හි සන්දර්භය තුළ "jQuery" කිරීමට උත්සාහ කිරීමයි. එය කිසි විටෙකත් හොඳින් ක්‍රියාත්මක නොවේ. මෙම දැක්ම වේ නිල වාර්තාවට. විධානයකට පිටතින් (මේ පිළිබඳ වැඩි විස්තර පහතින්), ඔබ කිසි විටෙකත්, කිසි විටෙකත් DOM වෙනස් නොකරයි . දෘෂ්ටියෙහි නියමයන් ක්‍රියාත්මක වන බැවින් අභිප්‍රාය පැහැදිලිය.

මතක තබා ගන්න: සැලසුම් නොකරන්න, පසුව සලකුණු කරන්න. ඔබ ගෘහ නිර්මාණ ශිල්පියා විය යුතුය, පසුව සැලසුම් කළ යුතුය.

දත්ත බන්ධනය

මෙය බොහෝ දුරට AngularJS හි අතිවිශිෂ්ට අංගයන්ගෙන් එකක් වන අතර මා කලින් කොටසේ සඳහන් කළ ආකාරයේ DOM හැසිරවීම් සිදු කිරීමේ අවශ්‍යතාවය කපා හැරේ. AngularJS ස්වයංක්‍රීයව ඔබගේ දැක්ම යාවත්කාලීන කරන බැවින් ඔබට එය අවශ්‍ය නොවේ! JQuery හි, අපි සිදුවීම් වලට ප්‍රතිචාර දක්වන අතර පසුව අන්තර්ගතය යාවත්කාලීන කරමු. වැනි දෙයක්:

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

මේ වගේ පෙනුමක් සඳහා:

<ul class="messages" id="log">
</ul>

උත්සුකයන් මිශ්‍ර කිරීම හැරුණු විට, මා කලින් සඳහන් කළ අභිප්‍රාය සංකේතවත් කිරීමේ ගැටළු ද අපට ඇත. නමුත් වඩා වැදගත් දෙය නම්, අපට DOM නෝඩයක් අතින් යොමු කර යාවත්කාලීන කිරීමට සිදු විය. අපට ලොග් සටහනක් මකා දැමීමට අවශ්‍ය නම්, ඒ සඳහා ද අපි DOM ට එරෙහිව කේත කළ යුතුය. DOM හැරුණු විට අපි තර්කනය පරීක්ෂා කරන්නේ කෙසේද? ඉදිරිපත් කිරීම වෙනස් කිරීමට අපට අවශ්‍ය නම් කුමක් කළ යුතුද?

මේක ටිකක් අවුල් සහගතයි. නමුත් AngularJS හි අපට මෙය කළ හැකිය:

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

අපගේ දැක්ම මේ වගේ විය හැකිය:

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

නමුත් එම කාරණය සඳහා අපගේ දැක්ම මේ ආකාරයට විය හැකිය:

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

දැන් ඇණවුම් නොකළ ලැයිස්තුවක් භාවිතා කරනවා වෙනුවට, අපි භාවිතා කරන්නේ බූට්ස්ට්‍රැප් ඇඟවීම් පෙට්ටි ය. අපට කිසි විටෙක පාලක කේතය වෙනස් කිරීමට සිදු නොවීය! නමුත් වඩා වැදගත් දෙය නම්, ලොගය යාවත්කාලීන වන්නේ කොතැනක හෝ කෙසේද යන්න නොසලකා දර්ශනය ද වෙනස් වනු ඇත. ස්වයංක්‍රීයව. පිළිවෙළකට!

මම එය මෙහි පෙන්වූයේ නැතත්, දත්ත බන්ධනය දෙයාකාරයකි. එම නිසා මෙම ලොග් පණිවිඩ ද දර්ශනයෙන් සංස්කරණය කළ හැකිය : <input ng-model="entry.msg" />. බොහෝ ප්‍රීති විය.

පැහැදිලි ආකෘති ස්ථරය

JQuery හි, DOM යනු ආකෘතියට සමාන ය. නමුත් AngularJS හි, අපට වෙනම ආදර්ශ ස්ථරයක් ඇති අතර අපට අවශ්‍ය ඕනෑම ආකාරයකින් කළමනාකරණය කළ හැකිය. මෙය ඉහත දත්ත බන්ධනයට උපකාරී වේ, උත්සුකයන් වෙන් කිරීම පවත්වා ගෙන යයි , සහ වඩා විශාල පරීක්ෂණ හැකියාව හඳුන්වා දෙයි. වෙනත් පිළිතුරු වල මෙම කරුණ සඳහන් කර ඇත, එබැවින් මම එය අතහැර දමමි.

උත්සුකයන් වෙන් කිරීම

ඉහත සඳහන් සියල්ලම මෙම අධික තේමාවට සම්බන්ධ වේ: ඔබේ ගැටළු වෙන වෙනම තබා ගන්න. ඔබගේ දැක්ම සිදුවීමට නියමිත දේ පිළිබඳ නිල වාර්තාව ලෙස ක්‍රියා කරයි (බොහෝ දුරට); ඔබේ ආකෘතිය ඔබේ දත්ත නියෝජනය කරයි; නැවත භාවිතා කළ හැකි කාර්යයන් ඉටු කිරීම සඳහා ඔබට සේවා ස්ථරයක් ඇත; ඔබ DOM හැසිරවීම සිදු කරන අතර විධානයන් සමඟ ඔබේ දැක්ම වැඩි කරයි; ඔබ ඒ සියල්ල පාලකයන් සමඟ මැලියම් කරයි. මෙය වෙනත් පිළිතුරු වලද සඳහන් කර ඇති අතර, මම එකතු කරන එකම දෙය වන්නේ පරීක්ෂණ හැකියාවයි, මම පහත තවත් කොටසක සාකච්ඡා කරමි.

යැපුම් එන්නත් කිරීම

උත්සුකයන් වෙන් කිරීම සඳහා අපට උපකාර කිරීම පරායත්ත එන්නත් කිරීම (DI) වේ. ඔබ සර්වර්-සයිඩ් භාෂාව (සිට පැමිණෙන නම් ජාවා කිරීමට PHP ) ඔබ මේ වන විටත් බොහෝ විට මෙම සංකල්පය හුරු ඉන්නේ, නමුත් ඔබ jQuery වෙතින් පැමිණෙන සේවාදායකයා-පැත්තේ කෙනා නම්, මෙම සංකල්පය මෝඩ සිට අනවශ්ය කිරීමට හිපි කිසිවක් කිරීමට නොහැකි . නමුත් එය එසේ නොවේ. :-)

පුළුල් දෘෂ්ටි කෝණයකින්, DI යන්නෙන් අදහස් කරන්නේ ඔබට සංරචක ඉතා නිදහසේ ප්‍රකාශ කළ හැකි අතර පසුව වෙනත් ඕනෑම අංගයකින්, ඒ සඳහා උදාහරණයක් ඉල්ලන්න, එවිට එය ලබා දෙනු ඇත. පැටවීමේ ඇණවුම, හෝ ගොනු ස්ථාන හෝ එවැනි කිසිවක් ගැන ඔබ දැන සිටිය යුතු නැත. බලය ක්ෂණිකව නොපෙනේ, නමුත් මම එක් (පොදු) උදාහරණයක් පමණක් දෙන්නෙමි: පරීක්ෂා කිරීම.

අපගේ යෙදුමේ කියමු, අපට REST API හරහා සේවාදායක පාර්ශවීය ආචයනය ක්‍රියාත්මක කරන සේවාවක් අවශ්‍ය වන අතර , යෙදුම් තත්වය, දේශීය ආචයනය මත පදනම්ව. අපගේ පාලකයන් මත පරීක්ෂණ ක්‍රියාත්මක කරන විට, අපට සේවාදායකයා සමඟ සන්නිවේදනය කිරීමට අවශ්‍ය නැත - අපි පාලකය පරීක්ෂා කරන්නෙමු . අපට අපගේ මුල් සංරචකය ලෙස එකම නමේ ව්‍යාජ සේවාවක් එක් කළ හැකි අතර, ඉන්ජෙක්ටර් විසින් අපගේ පාලකය ස්වයංක්‍රීයව ව්‍යාජ එකක් ලබා ගන්නා බවට සහතික කරනු ඇත - අපගේ පාලකය වෙනස නොදන්නා අතර අවශ්‍ය නොවේ.

පරීක්ෂණ ගැන කතා කරමින් ...

4. පරීක්ෂණ මගින් මෙහෙයවන සංවර්ධනය - සෑම විටම

මෙය සැබවින්ම ගෘහ නිර්මාණ ශිල්පය පිළිබඳ 3 වන කොටසේ කොටසකි, නමුත් එය ඉතා වැදගත් බැවින් මම එය එහි ඉහළ මට්ටමේ අංශයක් ලෙස තබමි.

ඔබ දැක ඇති, භාවිතා කළ හෝ ලියා ඇති බොහෝ jQuery ප්ලගීන අතුරින්, ඒවායින් කීයක් සමඟ පරීක්ෂණ කට්ටලයක් තිබේද? JQuery ඒ සඳහා එතරම් සුදුසු නොවන නිසා බොහෝ නොවේ. නමුත් AngularJS වේ.

JQuery හි, පරීක්ෂා කිරීමට ඇති එකම ක්‍රමය බොහෝ විට අපගේ පරීක්ෂණ මගින් DOM හැසිරවීම සිදු කළ හැකි නියැදි / නිරූපණ පිටුවක් සමඟ ස්වාධීනව සංරචකය නිර්මාණය කිරීමයි. ඒ නිසා ඉන් පසුව අපි අංගයක්, ෙවන් ෙවන් වශෙයන් සංවර්ධනය හා ඇති නම් අපගේ අයදුම්පත් බවට ඒකාබද්ධ. කොතරම් අපහසුද! බොහෝ විට, jQuery සමඟ සංවර්ධනය කරන විට, අපි පරීක්‍ෂණයෙන් මෙහෙයවන සංවර්ධනය වෙනුවට ක්‍රියාකාරීත්වය තෝරා ගනිමු. කාටද අපට දොස් කියන්න පුළුවන්?

නමුත් අපට උත්සුකයන් වෙන් කර ඇති හෙයින්, අපට AngularJS හි නැවත නැවත පරීක්ෂණ මගින් කළ හැකි සංවර්ධනයක් කළ හැකිය! උදාහරණයක් ලෙස, අපගේ වර්තමාන මාර්ගය කුමක්දැයි අපගේ මෙනුවේ දැක්වීමට සුපිරි සරල නියෝගයක් අවශ්‍ය යැයි කියමු. අපගේ යෙදුම අනුව අපට අවශ්‍ය දේ ප්‍රකාශ කළ හැකිය:

<a href="/hello" when-active>Hello</a>

හරි, දැන් අපට නොපවතින when-activeනියෝගය සඳහා පරීක්ෂණයක් ලිවිය හැකිය :

it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="https://stackoverflow.com/hello" when-active>Hello</a>' )( $scope );

    $location.path('/not-matching');
    expect( elm.hasClass('active') ).toBeFalsey();

    $location.path( '/hello' );
    expect( elm.hasClass('active') ).toBeTruthy();
}));

අපි අපගේ පරීක්ෂණය ක්‍රියාත්මක කරන විට, එය අසමත් වන බව අපට තහවුරු කළ හැකිය. අපගේ නියෝගය නිර්මාණය කළ යුත්තේ දැන් පමණි:

.directive( 'whenActive', function ( $location ) {
    return {
        scope: true,
        link: function ( scope, element, attrs ) {
            scope.$on( '$routeChangeSuccess', function () {
                if ( $location.path() == element.attr( 'href' ) ) {
                    element.addClass( 'active' );
                }
                else {
                    element.removeClass( 'active' );
                }
            });
        }
    };
});

අපගේ පරීක්ෂණය දැන් සමත් වන අතර අපේ මෙනුව ඉල්ලූ පරිදි ක්‍රියාත්මක වේ. අපේ සංවර්ධනයේ දෙකම වැඩිපුර සහ ටෙස්ට් මෙහෙයවෙන. දුෂ්ට-සිසිල්.

5. සංකල්පමය වශයෙන්, විධානයන් ඇසුරුම් කර නැත jQuery

ඔබට බොහෝ විට අසන්නට ලැබෙන්නේ “විධානයකින් DOM හැසිරවීම පමණක් කරන්න” යන්නයි. මෙය අවශ්‍යතාවයකි. නිසි ගෞරවයෙන් සලකන්න!

නමුත් අපි ටිකක් ගැඹුරට කිමිදෙමු ...

සමහර විධානයන් දැනටමත් දර්ශනයේ ඇති දේ අලංකාර කරයි (සිතන්න ngClass) එබැවින් සමහර විට DOM හැසිරවීම කෙලින්ම කර පසුව මූලික වශයෙන් සිදු කරනු ලැබේ. උපදෙස් සඳහා "විජට්" වැනි වන අතර, සැකිල්ල ඇත නම්, එය කළ යුතු ද අවධානය වෙන් ගරු කරනවා. ඒ සැකිල්ල, වේ ද මෙම සබැඳිය හා පාලක කාර්යයන් එය ක්රියාත්මක කිරීම බොහෝ දුරට ස්වාධීන විය යුතුය.

AngularJS මෙය ඉතා පහසු කිරීම සඳහා සම්පූර්ණ මෙවලම් සමූහයක් සමඟ පැමිණේ; සමග ngClassඅප ගතිකව පන්ති යාවත්කාලීන හැක; ngModelද්වි-මාර්ග දත්ත බන්ධනයට ඉඩ දෙයි; ngShowසහ ngHideක්‍රමානුකූලව මූලද්‍රව්‍යයක් පෙන්වීම හෝ සැඟවීම; සහ තවත් බොහෝ දේ - අප විසින්ම ලියන ඒවා ඇතුළුව. වෙනත් වචන වලින් කිවහොත්, අපට DOM හැසිරවීමකින් තොරව සියලු ආකාරයේ විශ්මය ජනක දේ කළ හැකිය . අඩු DOM හැසිරවීම, පරීක්ෂා කිරීමට පහසු උපදෙස්, ඒවා විලාසිතාවට පහසුය, අනාගතයේ දී ඒවා වෙනස් කිරීම පහසුය, ඒවා නැවත භාවිතා කළ හැකි හා බෙදා හැරිය හැකි ය.

JQuery පොකුරක් විසි කිරීමේ ස්ථානය ලෙස විධානයන් භාවිතා කරමින් AngularJS වෙත නව සංවර්ධකයින් විශාල ප්‍රමාණයක් මම දකිමි. වෙනත් වචන වලින් කිවහොත්, ඔවුන් සිතන්නේ "මට පාලකයේ DOM හැසිරවීම කළ නොහැකි බැවින්, මම එම කේතය විධානයකට දමමි". එය නිසැකවම වඩා හොඳ වුවත්, එය බොහෝ විට තවමත් වැරදිය .

අපි 3 වන කොටසේ වැඩසටහන්ගත කළ ලොගර් ගැන සිතන්න. අපි එය විධානයකට දැමුවද, අපට එය තවමත් අවශ්‍ය වන්නේ “කෝණික මාර්ගය” ලෙසිනි. එය තවමත් කිසිදු DOM හැසිරවීමක් නොකරයි! DOM හැසිරවීම අවශ්‍ය වන අවස්ථා බොහෝමයක් ඇත , නමුත් එය ඔබ සිතනවාට වඩා දුර්ලභ ය! ඔබගේ යෙදුමේ ඕනෑම තැනක DOM හැසිරවීම කිරීමට පෙර , ඔබට ඇත්තටම අවශ්‍යදැයි ඔබගෙන්ම විමසන්න. මීට වඩා හොඳ ක්‍රමයක් තිබිය හැකිය.

මෙන්න මම නිතර දකින රටාව පෙන්වන ඉක්මන් උදාහරණයක්. අපට ටොගල කළ හැකි බොත්තමක් අවශ්‍යයි. (සටහන: මෙම උදාහරණය මඳක් ව්‍යාකූල වන අතර හරියටම එකම ආකාරයකින් විසඳනු ලබන වඩාත් සංකීර්ණ අවස්ථා නිරූපණය කිරීම සඳහා වන වාචික වාචික වචනයකි.)

.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;

            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

මෙහි වැරදි කිහිපයක් තිබේ:

1. පළමුව, jQuery කිසි විටෙකත් අවශ්‍ය නොවීය. අපි මෙහි කිසිවක් කර නැත.
2. දෙවනුව, අපගේ පිටුවේ දැනටමත් jQuery තිබුණත්, එය මෙහි භාවිතා කිරීමට හේතුවක් නැත; අපට සරලව භාවිතා කළ හැකි angular.elementඅතර jQuery නොමැති ව්‍යාපෘතියකට දැමූ විට අපගේ සංරචකය තවමත් ක්‍රියාත්මක වේ.
3. තෙවන පවා jQuery උපකල්පනය කරන ලදී වැඩ, jqLite (මෙම නියෝගය සඳහා අවශ්ය angular.element) ඇත හැම විටම එය පටවා ගත් නම් jQuery භාවිතා කරන්න! එබැවින් අපට භාවිතා කළ යුතු නොවේ $- අපට භාවිතා කළ හැකිය angular.element.
4. හතරවනුව, තුන්වැන්න සමඟ සමීපව සම්බන්ධ වන්නේ, jqLite මූලද්‍රව්‍යයන් ඔතා තැබිය යුතු නැත $- ශ්‍රිතයට elementලබා දෙන දෙය දැනටමත් jQuery අංගයක් වනු ඇත!link
5. පස්වනුව, අප කලින් කොටස්වල සඳහන් කර ඇති අතර, අපගේ තර්කනයට අච්චු දේවල් මිශ්‍ර කරන්නේ ඇයි?

මෙම නියෝගය නැවත ලිවිය හැකිය (ඉතා සංකීර්ණ අවස්ථාවන් සඳහා පවා!) වඩාත් සරලව එසේ ය:

.directive( 'myDirective', function () {
    return {
        scope: true,
        template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            scope.on = false;

            scope.toggle = function () {
                scope.on = !scope.on;
            };
        }
    };
});

නැවතත්, අච්චු දේවල් අච්චුවේ ඇත, එබැවින් ඔබට (හෝ ඔබේ පරිශීලකයින්ට) අවශ්‍ය ඕනෑම ශෛලියක් සපුරාලන කෙනෙකුට පහසුවෙන් එය මාරු කළ හැකි අතර තර්කනය කිසි විටෙකත් ස්පර්ශ නොකළ යුතුය. නැවත භාවිතා කිරීමේ හැකියාව - උත්පාතය!

පරීක්ෂා කිරීම වැනි අනෙකුත් සියලුම ප්‍රතිලාභ තවමත් තිබේ - එය පහසුය! අච්චුවේ ඇති දේ කුමක් වුවත්, විධානයෙහි අභ්‍යන්තර API කිසි විටෙකත් ස්පර්ශ නොවන බැවින් ප්‍රතිනිර්මාණය කිරීම පහසුය. විධානය ස්පර්ශ නොකර ඔබට අවශ්‍ය පරිදි අච්චුව වෙනස් කළ හැකිය. ඔබ කුමක් වෙනස් කළත් ඔබගේ පරීක්ෂණ තවමත් සමත් වේ.

w00t!

එබැවින් විධානයන් යනු jQuery වැනි ශ්‍රිත එකතුවක් නොවේ නම්, ඒවා මොනවාද? විධානයන් ඇත්ත වශයෙන්ම HTML හි දිගු වේ . HTML ඔබට එය කිරීමට අවශ්‍ය දෙයක් නොකරන්නේ නම්, ඔබ වෙනුවෙන් එය කිරීමට නියෝගයක් ලියන්න, ඉන්පසු එය HTML හි කොටසක් ලෙස භාවිතා කරන්න.

තවත් ක්රමයක්, රාමුවෙන් පිටත AngularJS යමක් නොවේ නම්, මෙම කණ්ඩායම දකුණු සමග ගැලපෙන පරිදි ඉටු කරන ආකාරය සිතා දමා ngClick, ngClasset al.

සාරාංශය

JQuery පවා භාවිතා නොකරන්න. එය ඇතුළත් නොකරන්න. එය ඔබව වළක්වයි. ඔබ දැනටමත් jQuery හි විසඳා ගන්නේ කෙසේදැයි ඔබ සිතන ගැටලුවකට පැමිණි විට, ඔබ වෙත ළඟා වීමට පෙර $, AngularJS සීමාව තුළ එය කරන්නේ කෙසේද යන්න ගැන සිතා බැලීමට උත්සාහ කරන්න. ඔබ නොදන්නේ නම්, විමසන්න! 20 න් 19 වතාවක්, එය කිරීමට හොඳම ක්‍රමය jQuery අවශ්‍ය නොවන අතර jQuery ප්‍රති with ල සමඟ එය විසඳීමට උත්සාහ කිරීමෙන් ඔබට වැඩි වැඩ කොටසක් ලැබෙනු ඇත.

අත්‍යවශ්‍ය ප්‍රකාශන

JQuery හි, තේරීම් කාරක භාවිතා කරනුයේ DOM මූලද්‍රව්‍ය සොයා ගැනීමට සහ පසුව සිදුවීම් හසුරුවන්නන් බැඳීමට / ලියාපදිංචි කිරීමට ය. සිදුවීමක් අවුලුවන විට, එම (අත්‍යවශ්‍ය) කේතය ක්‍රියාත්මක වන්නේ DOM යාවත්කාලීන කිරීමට / වෙනස් කිරීමට ය.

AngularJS හි, ඔබට DOM මූලද්‍රව්‍යවලට වඩා අදහස් ගැන සිතීමට අවශ්‍යය . දර්ශන යනු AngularJS විධානයන් අඩංගු (ප්‍රකාශන) HTML ය . මඟ පෙන්වීම් මඟින් තිරය පිටුපස සිදුවීම් හසුරුවන්නන් අප වෙනුවෙන් සකස් කර ගතික දත්ත සමුදායක් ලබා දේ. තේරීම් කරන්නන් කලාතුරකින් භාවිතා වන බැවින් හැඳුනුම්පත් (සහ සමහර වර්ගවල පන්ති) සඳහා අවශ්‍යතාවය බෙහෙවින් අඩු වී ඇත. දර්ශන ආකෘති සමඟ බැඳී ඇත (විෂය පථ හරහා). දර්ශන යනු ආකෘතියේ ප්‍රක්ෂේපණයකි. සිදුවීම් ආකෘති වෙනස් කරයි (එනම් දත්ත, විෂය පථයේ ගුණාංග), සහ එම ආකෘති ප්‍රක්ෂේපණය කරන අදහස් “ස්වයංක්‍රීයව” යාවත්කාලීන වේ.

AngularJS හි, ඔබේ දත්ත රඳවා තබා ගන්නා jQuery තෝරාගත් DOM මූලද්‍රව්‍යවලට වඩා ආකෘති ගැන සිතන්න. පරිශීලකයා දකින දේ හැසිරවීමට ඇමතුම් ලබා ගැනීම වෙනුවට, එම ආකෘතිවල ප්‍රක්ෂේපණ ලෙස අදහස් ගැන සිතන්න.

උත්සුකයන් වෙන් කිරීම

jQuery විසින් බාධා රහිත ජාවාස්ක්‍රිප්ට් භාවිතා කරයි - හැසිරීම (ජාවාස්ක්‍රිප්ට්) ව්‍යුහයෙන් (HTML) වෙන් කරනු ලැබේ.

දෘෂ් / ි / ව්‍යුහයෙන් (HTML) හැසිරීම ඉවත් කිරීම සඳහා AngularJS විසින් පාලකයන් සහ විධානයන් (ඒ සෑම එකක්ම තමන්ගේම පාලකයක් තිබිය හැකි අතර / හෝ කාර්යයන් සම්පාදනය කිරීම හා සම්බන්ධ කිරීම) භාවිතා කරයි. ඔබේ යෙදුම වෙන් කිරීමට / සංවිධානය කිරීමට කෝණිකයට සේවා සහ පෙරහන් ද ඇත .

Https://stackoverflow.com/a/14346528/215945 ද බලන්න

යෙදුම් නිර්මාණය

AngularJS යෙදුමක් සැලසුම් කිරීම සඳහා එක් ප්‍රවේශයක්:

1. ඔබේ ආකෘති ගැන සිතන්න. එම ආකෘති සඳහා සේවා හෝ ඔබේම ජාවාස්ක්‍රිප්ට් වස්තු සාදන්න.
2. ඔබේ ආකෘති ඉදිරිපත් කිරීමට ඔබට අවශ්‍ය ආකාරය ගැන සිතන්න - ඔබේ අදහස්. ගතික දත්ත සමුදාය ලබා ගැනීම සඳහා අවශ්‍ය උපදෙස් භාවිතා කරමින් එක් එක් දර්ශනය සඳහා HTML සැකිලි සාදන්න.
3. සෑම දර්ශනයකටම පාලකයක් අමුණන්න (ng-view සහ routing, හෝ ng-controller භාවිතා කිරීම). පාලකයාට එහි කාර්යය කිරීමට අවශ්‍ය ඕනෑම ආදර්ශ දත්ත පමණක් සොයා ගැනීමට / ලබා ගැනීමට පාලකයාට ඉඩ දෙන්න. පාලකයන් හැකි තරම් තුනී කරන්න.

මූලාකෘති උරුමය

ජාවාස්ක්‍රිප්ට් මූලාකෘති උරුමය ක්‍රියාත්මක වන්නේ කෙසේදැයි නොදැන ඔබට jQuery සමඟ බොහෝ දේ කළ හැකිය. AngularJS යෙදුම් සංවර්ධනය කිරීමේදී, ඔබට ජාවාස්ක්‍රිප්ට් උරුමය පිළිබඳ හොඳ අවබෝධයක් තිබේ නම්, ඔබ පොදු අන්තරායන් මඟහරවා ගනු ඇත. නිර්දේශිත කියවීම: AngularJS හි විෂය පථයේ මූලාකෘති / මූලාකෘති උරුමයේ සූක්ෂ්මතා මොනවාද?

AngularJS එදිරිව jQuery

AngularJS සහ jQuery එකිනෙකට වෙනස් මතවාදයන් අනුගමනය කරයි. ඔබ jQuery වෙතින් පැමිණෙන්නේ නම් සමහර වෙනස්කම් පුදුම සහගත විය හැකිය. කෝණික නිසා ඔබ කෝප විය හැකිය.

මෙය සාමාන්‍ය දෙයකි, ඔබ ඉදිරියට යා යුතුය. කෝණික එය වටිනවා.

විශාල වෙනස (TLDR)

jQuery මඟින් ඔබට DOM හි අත්තනෝමතික බිටු තෝරා ගැනීමට සහ ඒවාට තාවකාලික වෙනස්කම් කිරීමට මෙවලම් කට්ටලයක් ලබා දේ. කෑලි කෑලිවලට ඔබ කැමති ඕනෑම දෙයක් ඔබට කළ හැකිය.

AngularJS ඒ වෙනුවට ඔබට සම්පාදකයක් ලබා දෙයි .

මෙයින් අදහස් කරන්නේ AngularJS ඔබේ මුළු DOM ඉහළ සිට පහළට කියවා එය කේතයක් ලෙස සලකන බවයි, වචනාර්ථයෙන් සම්පාදකයාට උපදෙස් ලෙස. එය DOM හරහා ගමන් කරන විට, එය AngularJS සම්පාදකයාට හැසිරෙන ආකාරය සහ කළ යුතු දේ පවසන නිශ්චිත විධානයන් (සම්පාදක නියෝග) සොයයි . විධානයන් යනු ජාවාස්ක්‍රිප්ට් වලින් පිරී ඇති කුඩා වස්තූන් වන අතර ඒවා ගුණාංග, ටැග්, පන්ති හෝ අදහස් සමඟ සැසඳිය හැකිය.

DOM හි කොටසක් නිශ්චිත විධානයකට ගැලපෙන බව කෝණික සම්පාදකයා විසින් තීරණය කරන විට, එය DOM මූලද්‍රව්‍යය, ඕනෑම ගුණාංගයක්, වත්මන් $ විෂය පථය (එය දේශීය විචල්‍ය ගබඩාවක්) සහ තවත් ප්‍රයෝජනවත් බිටු පසුකරමින් එය මෙහෙයවන ශ්‍රිතය ලෙස හැඳින්වේ. මෙම ගුණාංගවල විධානය මඟින් අර්ථ නිරූපණය කළ හැකි ප්‍රකාශන අඩංගු විය හැකි අතර, එය විදැහුම්කරණය කරන්නේ කෙසේද සහ එය නැවත ඇඳිය ​​යුත්තේ කවදාද යන්න පවසයි.

පාලක, සේවා වැනි අතිරේක කෝණික සංරචක වලට මඟ පෙන්වීම් ලබා ගත හැකිය. සම්පාදකයාගේ පතුලෙන් එළියට එන්නේ සම්පුර්ණයෙන්ම සැකසූ වෙබ් යෙදුමක් වන අතර රැහැන්ගත වී යාමට සූදානම්ය.

මෙයින් අදහස් කරන්නේ කෝණික යනු අච්චු ධාවනය වන බවයි. ඔබගේ අච්චුව ජාවාස්ක්‍රිප්ට් ධාවනය කරයි, අනෙක් පැත්තෙන් නොවේ. මෙය භූමිකාවන් රැඩිකල් ලෙස ආපසු හැරවීමක් වන අතර, පසුගිය අවුරුදු 10 හෝ ඊට වැඩි කාලයක් තිස්සේ අප විසින් ලියන ලද නොවරදින ජාවාස්ක්‍රිප්ට්හි සම්පූර්ණ ප්‍රතිවිරුද්ධයයි. මේ සඳහා ටිකක් පුරුදු විය හැකිය.

මෙය අධික ලෙස නියම කළ හැකි හා සීමා කළ හැකි යැයි හැඟේ නම්, සත්‍යයට වඩා කිසිවක් කළ නොහැකිය. AngularJS ඔබේ HTML කේතයක් ලෙස සලකන හෙයින්, ඔබේ වෙබ් යෙදුම තුළ ඔබට HTML මට්ටමේ කැටි ගැසීමක් ලැබේ . සෑම දෙයක්ම කළ හැකි අතර, ඔබ සංකල්පීය පිම්මක් කිහිපයක් කළ පසු බොහෝ දේ පුදුම සහගත ලෙස පහසුය.

අපි නිට්ටි රළුබවට වැටෙමු.

පළමුවෙන්ම, කෝණික jQuery වෙනුවට ආදේශ නොකරයි

කෝණික සහ jQuery විවිධ දේ කරයි. AngularJS ඔබට වෙබ් යෙදුම් නිෂ්පාදනය සඳහා මෙවලම් කට්ටලයක් ලබා දෙයි. jQuery ප්‍රධාන වශයෙන් ඔබට DOM වෙනස් කිරීම සඳහා මෙවලම් ලබා දෙයි. ඔබගේ පිටුවේ jQuery තිබේ නම්, AngularJS එය ස්වයංක්‍රීයව භාවිතා කරයි. එය එසේ නොවේ නම්, කෝණික ජේඑස් jQuery ලයිට් සමඟ නැව්ගත කරයි, එය කප්පාදුවකි, නමුත් තවමත් පරිපූර්ණ ලෙස භාවිතා කළ හැකි jQuery සංස්කරණයකි.

මිස්කෝ jQuery වලට කැමති අතර එය භාවිතා කිරීමට ඔබ විරුද්ධ වන්නේ නැත. කෙසේ වෙතත්, ඔබ ඉදිරියට යන විට ඔබේ සියලු කාර්යයන් විෂය පථය, සැකිලි සහ විධානයන්ගෙන් ලබා ගත හැකි බව ඔබට පෙනී යනු ඇති අතර, ඔබේ කේතය වඩාත් විවික්ත, වඩා වින්‍යාසගත කළ හැකි සහ තවත් බොහෝ දේ ඇති බැවින් හැකි සෑම විටම මෙම කාර්ය ප්‍රවාහයට ඔබ කැමති විය යුතුය. කෝණික.

ඔබ jQuery භාවිතා කරන්නේ නම්, ඔබ එය සෑම තැනම ඉසිය යුතු නොවේ. AngularJS හි DOM හැසිරවීම සඳහා නිවැරදි ස්ථානය නියෝගයක ඇත. මේවා ගැන වැඩි විස්තර පසුව.

තේරීම් කාරක එදිරිව ප්‍රකාශන ආකෘති සමඟ නොනවතින ජාවාස්ක්‍රිප්ට්

jQuery සාමාන්‍යයෙන් බාධාවකින් තොරව යොදනු ලැබේ. ඔබගේ ජාවාස්ක්‍රිප්ට් කේතය ශීර්ෂකයේ (හෝ පාදකයේ) සම්බන්ධ කර ඇති අතර එය සඳහන් කර ඇති එකම ස්ථානය මෙයයි. පිටුවේ බිටු තෝරා ගැනීමට සහ එම කොටස් වෙනස් කිරීමට ප්ලගීන ලිවීමට අපි තේරීම් කාරක භාවිතා කරමු.

ජාවාස්ක්‍රිප්ට් පාලනය කරයි. HTML සම්පූර්ණයෙන්ම ස්වාධීන පැවැත්මක් ඇත. ජාවාස්ක්‍රිප්ට් නොමැතිව වුවද ඔබේ HTML අර්ථ නිරූපණය කරයි. ඔන්ක්ලික් ගුණාංග ඉතා නරක පුරුද්දකි.

AngularJS ගැන ඔබ දකින පළමු දෙය නම් අභිරුචි ගුණාංග සෑම තැනකම තිබීමයි. ඔබේ HTML, ng ගුණාංග වලින් පිරී ඉතිරී යනු ඇත, ඒවා අත්‍යවශ්‍යයෙන්ම ස්ටෙරොයිඩ් මත ක්ලික් කරන්න. මේවා විධානයන් (සම්පාදක විධානයන්) වන අතර, අච්චුව ආකෘතියට සම්බන්ධ කර ඇති ප්‍රධාන ක්‍රමවලින් එකකි.

ඔබ මෙය මුලින්ම දුටු විට AngularJS පැරණි පාසල් ආක්‍රමණශීලී ජාවාස්ක්‍රිප්ට් ලෙස ලිවීමට ඔබ පෙළඹෙනු ඇත (මා මුලින් කළාක් මෙන්). ඇත්ත වශයෙන්ම, AngularJS එම නීති රීති අනුව ක්‍රියා නොකරයි. AngularJS හි, ඔබේ HTML5 අච්චුවකි. ඔබේ වෙබ් පිටුව නිෂ්පාදනය කිරීම සඳහා එය AngularJS විසින් සම්පාදනය කර ඇත.

පළමු විශාල වෙනස මෙයයි. JQuery සඳහා, ඔබේ වෙබ් පිටුව හැසිරවිය යුතු DOM ය. AngularJS වෙත, ඔබේ HTML යනු සම්පාදනය කළ යුතු කේතයයි. AngularJS ඔබේ මුළු වෙබ් පිටුවේම කියවන අතර එය වචනාර්ථයෙන් නව වෙබ් පිටුවකට සම්පාදනය කරයි.

ඔබේ අච්චුව ප්‍රකාශන විය යුතුය; එහි තේරුම සරලව කියවිය යුතුය. අර්ථවත් නම් සහිත අභිරුචි ගුණාංග අපි භාවිතා කරමු. අපි නව HTML අංග සාදන්නෙමු, නැවතත් අර්ථවත් නම් වලින්. අවම HTML දැනුමක් සහ කේතීකරණ හැකියාවක් නොමැති නිර්මාණකරුවෙකුට ඔබේ AngularJS අච්චුව කියවා එය කරන්නේ කුමක්ද යන්න තේරුම් ගත හැකිය. ඔහුට හෝ ඇයට වෙනස් කිරීම් කළ හැකිය. කෝණික ක්‍රමය මෙයයි.

අච්චුව රියදුරු අසුනේ ඇත.

AngularJS ආරම්භ කර නිබන්ධන හරහා ධාවනය වන විට මා මගෙන්ම ඇසූ පළමු ප්‍රශ්නය වන්නේ "මගේ කේතය කොහේද?" . මම ජාවාස්ක්‍රිප්ට් කිසිවක් ලියා නැත, නමුත් මට මේ සියල්ලම තිබේ. පිළිතුර පැහැදිලිය. AngularJS DOM සම්පාදනය කරන නිසා, AngularJS ඔබේ HTML කේතයක් ලෙස සලකයි. බොහෝ සරල අවස්ථා සඳහා බොහෝ විට අච්චුවක් ලිවීමට ප්‍රමාණවත් වන අතර එය ඔබ සඳහා යෙදුමක් ලෙස සම්පාදනය කිරීමට AngularJS ට ඉඩ දෙන්න.

ඔබගේ අච්චුව ඔබගේ යෙදුම මෙහෙයවයි. එය ඩී.එස්.එල් . ඔබ AngularJS සංරචක ලියන අතර, ඔබේ අච්චුවේ ව්‍යුහය මත පදනම්ව ඒවා ඇදගෙන නිසි වේලාවට ලබා ගැනීමට AngularJS බලා ගනී. මෙය සම්මත MVC රටාවකට බෙහෙවින් වෙනස් ය , එහිදී අච්චුව ප්‍රතිදානය සඳහා පමණි.

උදාහරණයක් ලෙස රූබි ඔන් රේල්ස් වලට වඩා එය XSLT ට සමාන ය .

මෙය පාලනයේ රැඩිකල් ප්‍රතිලෝමයකි.

ඔබගේ ජාවාස්ක්‍රිප්ට් වෙතින් ඔබගේ යෙදුම ධාවනය කිරීමට උත්සාහ කිරීම නවත්වන්න. අච්චුව යෙදුම ධාවනය කිරීමට ඉඩ දෙන්න, සහ සංරචක එකට රැහැන්ගත කිරීම ගැන AngularJS හට සැලකිලිමත් වීමට ඉඩ දෙන්න. මෙයද කෝණික ක්‍රමයයි.

අර්ථකථන HTML එදිරිව අර්ථකථන ආකෘති

JQuery සමඟ ඔබේ HTML පිටුවේ අර්ථාන්විත අර්ථවත් අන්තර්ගතයක් තිබිය යුතුය. ජාවාස්ක්‍රිප්ට් අක්‍රිය කර ඇත්නම් (පරිශීලකයෙකු හෝ සෙවුම් යන්ත්‍රයක් මඟින්) ඔබේ අන්තර්ගතයට ප්‍රවේශ විය හැකිය.

AngularJS ඔබේ HTML පිටුව අච්චුවක් ලෙස සලකන බැවිනි. ඔබේ අන්තර්ගතය සාමාන්‍යයෙන් ඔබේ ආකෘතියේ ගබඩා කර ඇති බැවින් අච්චුව අර්ථාන්විත නොවිය යුතුය. AngularJS ඔබේ DOM ආකෘතිය සමඟ සංයුක්ත කර අර්ථකථන වෙබ් පිටුවක් නිෂ්පාදනය කරයි.

ඔබේ HTML ප්‍රභවය තවදුරටත් අර්ථකථන නොවේ, ඒ වෙනුවට, ඔබේ API සහ සම්පාදනය කරන ලද DOM අර්ථකථන වේ.

AngularJS හි, ආකෘතියේ ජීවීන් යන්නෙහි අර්ථය, HTML යනු ප්‍රදර්ශනය සඳහා පමණි.

මෙම අවස්ථාවෙහිදී ඔබට SEO සහ ප්‍රවේශ්‍යතාව පිළිබඳ සියලු ආකාරයේ ප්‍රශ්න තිබිය හැකි අතර එය එසේය. මෙහි විවෘත ගැටළු තිබේ. බොහෝ තිර පා readers කයින් දැන් ජාවාස්ක්‍රිප්ට් විග්‍රහ කරනු ඇත. සෙවුම් යන්ත්‍රවලට AJAXed අන්තර්ගතය සුචිගත කළ හැකිය . එසේ වුවද, ඔබ තල්ලු කිරීමේ URL භාවිතා කරන බවට සහතික කර ගැනීමට ඔබට අවශ්‍ය වනු ඇති අතර ඔබට හොඳ අඩවි සිතියමක් තිබේ. ගැටලුව පිළිබඳ සාකච්ඡාවක් සඳහා මෙහි බලන්න: https://stackoverflow.com/a/23245379/687677

උත්සුකයන් වෙන් කිරීම (SOC) එදිරිව MVC

උත්සුකයන් වෙන් කිරීම (SOC) යනු SEO, ප්‍රවේශ්‍යතාව සහ බ්‍රව්සරයේ නොගැලපීම ඇතුළු විවිධ හේතූන් මත වසර ගණනාවක් තිස්සේ වෙබ් සංවර්ධනයේ වර්ධනය වූ රටාවකි. එය මේ වගේ ය:

1. HTML - අර්ථකථන අර්ථය. HTML තනිවම සිටිය යුතුය.
2. CSS - මෝස්තරය, CSS නොමැතිව පිටුව තවමත් කියවිය හැකිය.
3. ජාවාස්ක්‍රිප්ට් - හැසිරීම, ස්ක්‍රිප්ට් නොමැතිව අන්තර්ගතය පවතී.

නැවතත්, AngularJS ඔවුන්ගේ නීති රීති අනුව ක්‍රියා නොකරයි. ආ roke ාතයකදී , AngularJS විසින් දශකයක් තුළ ලැබුණු ප්‍ර wisdom ාව දුරු කරන අතර ඒ වෙනුවට MVC රටාවක් ක්‍රියාත්මක කරයි.

එය මේ වගේ ය:

1. මාදිලිය - ඔබේ ආකෘතිවල ඔබේ අර්ථකථන දත්ත අඩංගු වේ. ආකෘති සාමාන්‍යයෙන් JSON වස්තු වේ. ආකෘති පවතින්නේ $ විෂය පථය නම් වස්තුවක ලක්ෂණ ලෙස ය. ඔබගේ සැකිලි වලට ප්‍රවේශ විය හැකි $ විෂය පථය මත ඔබට ප්‍රයෝජනවත් උපයෝගීතා කාර්යයන් ගබඩා කළ හැකිය.
2. බලන්න - ඔබේ අදහස් HTML වලින් ලියා ඇත. ඔබේ දත්ත ආකෘතියේ ජීවත් වන නිසා දර්ශනය සාමාන්‍යයෙන් අර්ථකථන නොවේ.
3. පාලකය - ඔබේ පාලකය ජාවාස්ක්‍රිප්ට් ශ්‍රිතයක් වන අතර එය දර්ශනය ආකෘතියට සම්බන්ධ කරයි. එහි කාර්යය වන්නේ $ විෂය පථය ආරම්භ කිරීමයි. ඔබගේ යෙදුම මත පදනම්ව, ඔබට පාලකයක් සෑදීමට අවශ්‍ය නොවනු ඇත. පිටුවක ඔබට බොහෝ පාලකයන් සිටිය හැකිය.

MVC සහ SOC එකම පරිමාණයේ ප්‍රතිවිරුද්ධ කෙළවරේ නොවේ, ඒවා සම්පූර්ණයෙන්ම වෙනස් අක්ෂවල ඇත. කෝණික ජේඑස් සන්දර්භය තුළ SOC කිසිදු තේරුමක් නැත. ඔබ එය අමතක කර ඉදිරියට යා යුතුයි.

මා වැනි ඔබ බ්‍රව්සර් යුද්ධ හරහා ජීවත් වූවා නම්, ඔබට මෙම අදහස තරමක් අහිතකර විය හැකිය. එය ඉක්මවා යන්න, එය වටිනවා, මම පොරොන්දු වෙනවා.

ප්ලගීන එදිරිව

ප්ලගීන jQuery දිගු කරයි. AngularJS විධානයන් ඔබගේ බ්‍රව්සරයේ හැකියාවන් පුළුල් කරයි.

JQuery හි අපි jQuery.prototype වෙත ශ්‍රිත එකතු කිරීමෙන් ප්ලගීන අර්ථ දක්වමු. මූලද්‍රව්‍ය තෝරාගෙන ප්ලගිනය ඇමතීමෙන් අපි මේවා DOM වෙත සම්බන්ධ කරමු. JQuery හි හැකියාවන් පුළුල් කිරීම මෙහි අදහසයි.

නිදසුනක් ලෙස, ඔබේ පිටුවේ කැරොසල් එකක් අවශ්‍ය නම්, ඔබට අනුපිළිවෙලට නැති සංඛ්‍යා ලැයිස්තුවක් අර්ථ දැක්විය හැකිය, සමහර විට එය නාවික මූලද්‍රව්‍යයකින් ඔතා ඇත. එවිට ඔබට පිටුවේ ලැයිස්තුව තෝරා ගැනීමට jQuery කිහිපයක් ලිවිය හැකි අතර එය ස්ලයිඩින් සජිවිකරණය කිරීම සඳහා කල් ඉකුත් වූ ගැලරියක් ලෙස නැවත සකස් කරන්න.

AngularJS හි, අපි නියමයන් අර්ථ දක්වමු. විධානය යනු JSON වස්තුවක් ලබා දෙන ශ්‍රිතයකි. මෙම වස්තුව AngularJS ට පවසන්නේ DOM මූලද්‍රව්‍යයන් සෙවිය යුතු දේ සහ ඒවාට කළ යුතු වෙනස්කම් මොනවාද යන්නයි. ඔබ විසින් නිර්මාණය කරන ලද ගුණාංග හෝ අංග භාවිතා කරමින් විධානයන් අච්චුවට සම්බන්ධ කර ඇත. නව ගුණාංග සහ අංග සමඟ HTML හි හැකියාවන් පුළුල් කිරීම මෙහි අදහසයි.

AngularJS ක්‍රමය වන්නේ දේශීය පෙනුමැති HTML වල හැකියාවන් පුළුල් කිරීමයි. ඔබ HTML ලෙස පෙනෙන HTML ලිවිය යුතුය.

ඔබට කරුසල් අවශ්‍ය නම්, <carousel />මූලද්‍රව්‍යයක් භාවිතා කරන්න , ඉන්පසු අච්චුවක් ඇදගෙන යාම සඳහා නියෝගයක් නිර්වචනය කර එම කිරි බොන වැඩ කරන්න.

වින්‍යාස ස්විචයන් සහිත විශාල ප්ලගීන වලට එදිරිව කුඩා විධානයන් ගොඩක්

JQuery සමඟ ඇති ප්‍රවණතාවය නම් ලයිට් බොක්ස් වැනි විශාල ප්ලගීන ලිවීමයි. ඒවා බොහෝ අගයන් සහ විකල්පයන් පසුකරමින් අපි වින්‍යාස කරමු.

මෙය AngularJS හි වැරැද්දකි.

පහත වැටීමක උදාහරණය ගන්න. ඩ්‍රොප් ඩවුන් ප්ලගිනයක් ලිවීමේදී ඔබ ක්ලික් හෑන්ඩ්ලර්ස් තුළ කේත කිරීමට පෙළඹෙනු ඇත, සමහර විට ඉහළට හෝ පහළට ෂෙව්රොන් එකක එකතු කිරීමේ කාර්යයක් විය හැකිය, සමහර විට දිග හැරුණු මූලද්‍රව්‍යයේ පන්තිය වෙනස් කරන්න, මෙනුව සඟවන්න පෙන්වන්න, සියලු ප්‍රයෝජනවත් දේවල්.

ඔබට කුඩා වෙනසක් කිරීමට අවශ්‍ය වන තුරු.

ඔබට සැරිසැරීමට අවශ්‍ය මෙනුවක් ඇති බව පවසන්න. හොඳයි දැන් අපට ගැටලුවක් තිබේ. අපගේ ප්ලගිනය අප වෙනුවෙන් අපගේ ක්ලික් හෑන්ඩ්ලර් තුළ රැහැන්ගත කර ඇත, මෙම විශේෂිත අවස්ථාවෙහිදී එය වෙනස් ලෙස හැසිරවීමට වින්‍යාස කිරීමේ විකල්පයක් එක් කිරීමට අපට අවශ්‍ය වනු ඇත.

AngularJS හි අපි කුඩා විධානයන් ලියන්නෙමු. අපගේ පහත වැටීමේ නියෝගය හාස්‍යජනක ලෙස කුඩා වනු ඇත. එය නැමුණු තත්වය පවත්වා ගෙන යා හැකි අතර (), දිග හැරීමට () හෝ ටොගල් කිරීමට () ක්‍රම සපයයි. මෙම ක්‍රම මඟින් යාවත්කාලීන වනු ඇත $ scope.menu.visible එය රාජ්‍යය රඳවා තබා ගන්නා බූලියන් ය.

දැන් අපගේ අච්චුව තුළ අපට මෙය කම්බි කළ හැකිය:

<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

මවුස් ඕවර් යාවත්කාලීන කිරීමට අවශ්‍යද?

<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

අච්චුව යෙදුම මෙහෙයවන බැවින් අපට HTML මට්ටමේ කැටිති බවක් ලැබේ. සිද්ධි ව්‍යතිරේකයන් අනුව අපට නඩුවක් කිරීමට අවශ්‍ය නම්, අච්චුව මෙය පහසු කරයි.

වසා දැමීම එදිරිව. විෂය පථය

JQuery ප්ලගීන වසා දැමීමකදී නිර්මාණය වේ. එම වසා දැමීම තුළ පෞද්ගලිකත්වය පවත්වාගෙන යනු ලැබේ. එම වසා දැමීම තුළ ඔබේ විෂය පථය පවත්වා ගැනීම ඔබ සතු ය. ඔබට සැබවින්ම පිවිසිය හැක්කේ jQuery මඟින් ප්ලගිනයට ලබා දුන් DOM නෝඩ් කට්ටලයට පමණි, තවද වසා දැමීමේදී අර්ථ දක්වා ඇති ඕනෑම දේශීය විචල්‍යයන් සහ ඔබ අර්ථ දක්වා ඇති ඕනෑම ගෝලීය. මෙයින් අදහස් කරන්නේ ප්ලගීන සෑහෙන තරම් ස්වයං අන්තර්ගත බවයි. මෙය හොඳ දෙයකි, නමුත් සම්පූර්ණ යෙදුමක් නිර්මාණය කිරීමේදී එය සීමා කළ හැකිය. ගතික පිටුවක කොටස් අතර දත්ත යැවීමට උත්සාහ කිරීම වැඩකි.

AngularJS සතුව $ විෂය පථ වස්තු ඇත. මේවා ඔබේ ආකෘතිය ගබඩා කරන AngularJS විසින් නිර්මාණය කර නඩත්තු කරන විශේෂ වස්තු වේ. සමහර විධානයන් නව $ විෂය පථයක් බිහි කරනු ඇත, එය පෙරනිමියෙන් ජාවාස්ක්‍රිප්ට් මූලාකෘති උරුමය භාවිතා කරමින් එහි එතීමෙන් $ විෂය පථයෙන් උරුම වේ. $ විෂය පථය වස්තුව පාලකයට සහ දර්ශනයට ප්‍රවේශ විය හැකිය.

මෙය දක්ෂ කොටසයි. $ විෂය පථයේ උරුමයේ ව්‍යුහය දළ වශයෙන් DOM හි ව්‍යුහය අනුගමනය කරන හෙයින්, මූලද්‍රව්‍යයන්ට තමන්ගේම විෂය පථයට ප්‍රවේශය ඇති අතර, ඕනෑම විෂය පථයක් බාධාවකින් තොරව ගෝලීය $ විෂය පථය දක්වා (ගෝලීය විෂය පථයට සමාන නොවේ).

මෙමඟින් දත්ත අවට යැවීම සහ සුදුසු මට්ටමින් දත්ත ගබඩා කිරීම පහසු කරයි. පහත වැටීමක් දිග හැරෙන්නේ නම්, ඒ ගැන දැනගත යුත්තේ ඩ්‍රොප් ඩවුන් $ විෂය පථයට පමණි. පරිශීලකයා ඔවුන්ගේ මනාපයන් යාවත්කාලීන කරන්නේ නම්, ඔබට ගෝලීය $ විෂය පථය යාවත්කාලීන කිරීමට අවශ්‍ය විය හැකි අතර, පරිශීලක මනාපයන්ට සවන් දෙන ඕනෑම කැදැලි විෂය පථයක් ස්වයංක්‍රීයව දැනුම් දෙනු ලැබේ.

මෙය සංකීර්ණ බවක් පෙනෙන්නට තිබේ, ඇත්ත වශයෙන්ම, ඔබ එයට ලිහිල් කළ පසු එය පියාසර කිරීමක් වැනිය. ඔබට $ විෂය පථය නිර්මාණය කිරීමට අවශ්‍ය නැත, AngularJS ඔබේ අච්චු ධූරාවලිය මත පදනම්ව නිවැරදිව හා උචිත ලෙස එය ඔබ වෙනුවෙන් ස්ථාපනය කර වින්‍යාස කරයි. AngularJS පසුව පරායත්ත එන්නත් කිරීමේ මැජික් භාවිතා කරමින් එය ඔබේ සංරචකයට ලබා දෙයි (පසුව මෙය වැඩි විස්තර).

අතින් DOM වෙනස්වීම් එදිරිව දත්ත බන්ධනය

JQuery හි ඔබ ඔබගේ සියලු DOM වෙනස්කම් අතින් සිදු කරයි. ඔබ ක්‍රමයෙන් නව DOM අංග සාදයි. ඔබට JSON අරාවක් තිබේ නම් සහ එය DOM වෙත දැමීමට අවශ්‍ය නම්, ඔබ විසින් HTML උත්පාදනය කර එය ඇතුළු කිරීමට ශ්‍රිතයක් ලිවිය යුතුය.

AngularJS හි ඔබට මෙයද කළ හැකිය, නමුත් දත්ත බන්ධනය භාවිතා කිරීමට ඔබව දිරිමත් කරනු ලැබේ. ඔබේ ආකෘතිය වෙනස් කරන්න, සහ අච්චුවක් හරහා DOM එයට බැඳී ඇති නිසා ඔබේ DOM ස්වයංක්‍රීයව යාවත්කාලීන වනු ඇත, මැදිහත් වීමක් අවශ්‍ය නොවේ.

දත්ත බන්ධනය අච්චුවෙන් හෝ කරකැවෙන වරහන් සින්ටැක්ස් භාවිතයෙන් සිදු කරන බැවින් එය කිරීම පහසුය. ප්‍රජානන පොදු කාර්යයක් ඒ හා සම්බන්ධ වී නැති නිසා ඔබ එය සැමවිටම කරන බව පෙනේ.

<input ng-model="user.name" />

ආදාන අංගය බන්ධනය කරයි $scope.user.name. ආදානය යාවත්කාලීන කිරීම ඔබගේ වර්තමාන විෂය පථයේ වටිනාකම යාවත්කාලීන කරනු ඇති අතර අනෙක් අතට.

එලෙසම:

<p>
  {{user.name}}
</p>

පරිශීලක නාමය ඡේදයකින් ප්‍රතිදානය කරයි. එය සජීවී බන්ධනයකි, එබැවින් $scope.user.nameඅගය යාවත්කාලීන කරන්නේ නම් , අච්චුව ද යාවත්කාලීන වේ.

අජැක්ස් හැම වෙලාවෙම

JQuery හි අජැක්ස් ඇමතුමක් ලබා ගැනීම තරමක් සරල ය, නමුත් එය තවමත් ඔබ දෙවරක් සිතිය හැකි දෙයකි. සිතීමට අමතර සංකීර්ණතාවයක් සහ නඩත්තු කිරීම සඳහා සාධාරණ පිටපතක් තිබේ.

AngularJS හි, අජැක්ස් යනු ඔබගේ පෙරනිමි විසඳුම වන අතර එය සෑම විටම සිදුවන්නේ ඔබ නොදැනුවත්වම ය. ඔබට ng-include සමඟ සැකිලි ඇතුළත් කළ හැකිය. ඔබට සරලම අභිරුචි විධානය සමඟ අච්චුවක් යෙදිය හැකිය. ඔබට සේවාවක් තුළ අජැක්ස් ඇමතුමක් ඔතා GitHub සේවාවක් හෝ Flickr සේවාවක් නිර්මාණය කළ හැකිය, එය ඔබට විශ්මය ජනක පහසුවෙන් ප්‍රවේශ විය හැකිය.

සේවා වස්තු එදිරිව උපකාරක කාර්යයන්

JQuery හි, අපට API එකකින් සංග්‍රහයක් ඇද ගැනීම වැනි කුඩා නොවන සම්බන්ධිත කාර්යයක් ඉටු කිරීමට අවශ්‍ය නම්, අපගේ වසා දැමීමේදී එය කිරීමට අපට කුඩා කාර්යයක් ලිවිය හැකිය. එය වලංගු විසඳුමක්, නමුත් අපට බොහෝ විට එම සංග්‍රහයට ප්‍රවේශ වීමට අවශ්‍ය නම් කුමක් කළ යුතුද? එම යෙදුම වෙනත් යෙදුමක නැවත භාවිතා කිරීමට අපට අවශ්‍ය නම් කුමක් කළ යුතුද?

AngularJS අපට සේවා වස්තු ලබා දෙයි.

සේවා යනු කාර්යයන් සහ දත්ත අඩංගු සරල වස්තු වේ. ඒවා සැමවිටම සිංගල්ටන් ය, එයින් අදහස් වන්නේ ඒවායින් එකකට වඩා තිබිය නොහැකි බවයි. අපට Stack Overflow API වෙත ප්‍රවේශ වීමට අවශ්‍ය යැයි පවසන්න, එසේ StackOverflowServiceකිරීම සඳහා ක්‍රම නිර්වචනය කරන a ලිවිය හැකිය .

අපිට සාප්පු කරත්තයක් ඇතැයි කියමු. අපගේ කරත්තය නඩත්තු කරන සහ අයිතම එකතු කිරීම සහ ඉවත් කිරීම සඳහා ක්‍රම අඩංගු වන සාප්පු කාට් සේවාවක් අපි අර්ථ දැක්විය හැකිය. සේවාව සිංගල්ටන් එකක් වන අතර, අනෙක් සියලුම සංරචක විසින් බෙදාගෙන ඇති නිසා, අවශ්‍ය ඕනෑම වස්තුවකට සාප්පු කරත්තයට ලිවිය හැකි අතර එයින් දත්ත ලබා ගත හැකිය. එය සෑම විටම එකම කරත්තය.

සේවා වස්තූන් යනු ස්වයං-අන්තර්ගත AngularJS සංරචක වන අතර ඒවා අපට සුදුසු යැයි පෙනෙන පරිදි භාවිතා කළ හැකිය. ඒවා කාර්යයන් සහ දත්ත අඩංගු සරල JSON වස්තු වේ. ඒවා සැමවිටම සිංගල්ටන් ය, එබැවින් ඔබ සේවාවක දත්ත එක තැනක ගබඩා කරන්නේ නම්, එකම සේවාවක් ඉල්ලා සිටීමෙන් ඔබට එම දත්ත වෙනත් තැනකින් ලබා ගත හැකිය.

පරායත්ත එන්නත් කිරීම (DI) එදිරිව. ස්ථාපනය - aka de-spaghettification

AngularJS ඔබ වෙනුවෙන් ඔබේ යැපීම් කළමනාකරණය කරයි. ඔබට වස්තුවක් අවශ්‍ය නම්, එය සරලව යොමු කරන්න. AngularJS එය ඔබට ලබා දෙනු ඇත.

ඔබ මෙය භාවිතා කිරීමට පටන් ගන්නා තුරු, මෙය මොනතරම් දැවැන්ත කාල ආශීර්වාදයක්ද යන්න පැහැදිලි කිරීම අපහසුය. JQuery තුළ AngularJS DI වැනි කිසිවක් නොපවතී.

DI යන්නෙන් අදහස් කරන්නේ ඔබේ යෙදුම ලිවීම සහ එය එකට රැහැන් කිරීම වෙනුවට, ඔබ ඒ වෙනුවට නූල් මඟින් හඳුනාගත් සංරචක පුස්තකාලයක් නිර්වචනය කිරීමයි.

මට 'FlickrService' නමින් සංරචකයක් ඇති බව පවසන්න, එය Flickr වෙතින් JSON සංග්‍රහ ඇද ගැනීමේ ක්‍රම නිර්වචනය කරයි. දැන්, මට Flickr වෙත ප්‍රවේශ විය හැකි පාලකයක් ලිවීමට අවශ්‍ය නම්, මම පාලකය ප්‍රකාශයට පත් කරන විට 'FlickrService' නමට යොමු කළ යුතුය. AngularJS විසින් සංරචකය ස්ථාපනය කිරීම සහ එය මගේ පාලකයට ලබා දීම ගැන සැලකිලිමත් වනු ඇත.

උදාහරණයක් ලෙස, මෙන්න මම සේවාවක් අර්ථ දක්වන්නේ:

myApp.service('FlickrService', function() {
  return {
    getFeed: function() { // do something here }
  }
});

දැන් මට එම සේවාව භාවිතා කිරීමට අවශ්‍ය වූ විට මම එය මෙවැනි නමකින් සඳහන් කරමි:

myApp.controller('myController', ['FlickrService', function(FlickrService) {
  FlickrService.getFeed()
}]);

පාලකය ක්ෂණිකව ක්‍රියාත්මක කිරීම සඳහා FlickrService වස්තුවක් අවශ්‍ය බව AngularJS විසින් හඳුනා ගනු ඇති අතර එය අපට එකක් ලබා දෙනු ඇත.

මෙමඟින් රැහැන් ඇදීම ඉතා පහසු වන අතර ස්පැගටිෆිකේෂන් සඳහා වන ඕනෑම ප්‍රවණතාවක් බොහෝ දුරට ඉවත් කරයි. අප සතුව පැතලි සංරචක ලැයිස්තුවක් ඇති අතර අපට අවශ්‍ය විටදී AngularJS ඒවා එකින් එක අපට භාර දෙයි.

මොඩියුලර් සේවා ගෘහ නිර්මාණ ශිල්පය

ඔබේ කේතය සංවිධානය කළ යුතු ආකාරය ගැන jQuery ඉතා අල්පය. AngularJS හට අදහස් ඇත.

AngularJS මඟින් ඔබට ඔබේ කේතය තැබිය හැකි මොඩියුල ලබා දේ. උදාහරණයක් ලෙස ඔබ ෆ්ලිකර් සමඟ කථා කරන ස්ක්‍රිප්ට් එකක් ලියන්නේ නම්, ඔබේ ෆ්ලිකර් සම්බන්ධ සියලු කාර්යයන් එතීමට ෆ්ලිකර් මොඩියුලයක් සෑදීමට ඔබට අවශ්‍ය විය හැකිය. මොඩියුලයන්ට වෙනත් මොඩියුල (DI) ඇතුළත් කළ හැකිය. ඔබගේ ප්‍රධාන යෙදුම සාමාන්‍යයෙන් මොඩියුලයක් වන අතර ඔබේ යෙදුම රඳා පවතින අනෙකුත් සියලුම මොඩියුලයන් මෙයට ඇතුළත් විය යුතුය.

ඔබට සරල කේත නැවත භාවිතා කිරීමක් ලැබෙනු ඇත, ඔබට Flickr මත පදනම්ව වෙනත් යෙදුමක් ලිවීමට අවශ්‍ය නම්, ඔබට Flickr මොඩියුලය සහ voila ඇතුළත් කළ හැකිය, ඔබගේ නව යෙදුම තුළ ඔබගේ Flickr ආශ්‍රිත සියලු ක්‍රියාකාරකම් වලට ප්‍රවේශය ඇත.

මොඩියුලවල AngularJS සංරචක අඩංගු වේ. අපි මොඩියුලයක් ඇතුළත් කළ විට, එම මොඩියුලයේ ඇති සියලුම සංරචක ඒවායේ අද්විතීය නූල් මගින් හඳුනාගත් සරල ලැයිස්තුවක් ලෙස අපට ලබා ගත හැකිය . AngularJS හි පරායත්ත එන්නත් කිරීමේ යාන්ත්‍රණය භාවිතයෙන් අපට එම සංරචක එකිනෙක තුළට එන්නත් කළ හැකිය.

කෙටි කළොත්

AngularJS සහ jQuery සතුරන් නොවේ. AngularJS තුළ jQuery ඉතා සියුම් ලෙස භාවිතා කළ හැකිය. ඔබ හොඳින් AngularJS (සැකිලි, දත්ත-බන්ධන, $ විෂය පථය, මඟ පෙන්වීම්, ආදිය) භාවිතා කරන්නේ නම්, ඔබ ඔබට අවශ්ය වෙනවා ගොඩක් අඩු jQuery ඔබට වෙනත් ආකාරයකින් අවශ්ය වනු ඇති වඩා.

වටහා ගත යුතු ප්‍රධානම දෙය නම් ඔබේ අච්චුව ඔබේ යෙදුම මෙහෙයවන බවයි. සෑම දෙයක්ම කරන විශාල ප්ලගීන ලිවීමට උත්සාහ කිරීම නවත්වන්න. ඒ වෙනුවට එක් දෙයක් කරන කුඩා විධානයන් ලියන්න, ඉන්පසු ඒවා එකට සම්බන්ධ කිරීම සඳහා සරල අච්චුවක් ලියන්න.

බාධා රහිත ජාවාස්ක්‍රිප්ට් ගැන අඩුවෙන් සිතන්න, ඒ වෙනුවට HTML දිගු අනුව සිතන්න.

මගේ පුංචි පොත

මම AngularJS ගැන බෙහෙවින් කලබල වූ අතර, මම ඒ පිළිබඳව කෙටි පොතක් ලියා ඇති අතර එය අන්තර්ජාලය හරහා කියවීමට ඔබව සාදරයෙන් පිළිගනිමු http://nicholasjohnson.com/angular-book/ . එය ප්‍රයෝජනවත් යැයි මම සිතමි.

අවශ්‍ය වන පරමාදර්ශී මාරුව ඔබට විස්තර කළ හැකිද?

අත්‍යවශ්‍ය එදිරිව ප්‍රකාශනය

JQuery සමඟ ඔබ පියවරෙන් පියවර සිදුවිය යුතු දේ DOM වෙත පවසන්න. AngularJS සමඟ ඔබ විස්තර කරන්නේ ඔබට අවශ්‍ය ප්‍රති results ල නමුත් එය කරන්නේ කෙසේද යන්න නොවේ. මේ පිළිබඳ වැඩි විස්තර මෙතැනින් . එසේම, මාර්ක් රාජ්කොක්ගේ පිළිතුර බලන්න.

ග්‍රාහක පාර්ශවීය වෙබ් යෙදුම් වෙනස් ආකාරයකින් නිර්මාණය කරන්නේ කෙසේද?

AngularJS යනු MVC රටාව භාවිතා කරන සමස්ත සේවාදායක පාර්ශවීය රාමුවකි (ඒවායේ චිත්‍රක නිරූපණය බලන්න ). උත්සුකයන් වෙන් කිරීම කෙරෙහි එය බෙහෙවින් අවධානය යොමු කරයි.

විශාලතම වෙනස කුමක්ද? මා කිරීම / භාවිතා කිරීම නැවැත්විය යුත්තේ කුමක් ද; ඒ වෙනුවට මා කුමක් කිරීමට / භාවිතා කිරීමට පටන් ගත යුතුද?

jQuery යනු පුස්තකාලයකි

AngularJS යනු MVC, යැපුම් එන්නත් කිරීම , දත්ත බන්ධනය සහ තවත් බොහෝ සිසිල් දේවල් ඒකාබද්ධ කරන ඉතා ඉහළ පරික්‍ෂා කළ හැකි සේවාදායක පාර්ශවීය රාමුවකි .

එය අවධානය යොමු කිරීම සහ පරීක්ෂා කිරීම ( ඒකක පරීක්ෂාව සහ අවසානය දක්වා පරීක්ෂා කිරීම) වෙන් කිරීම කෙරෙහි අවධානය යොමු කරයි , එය පරීක්ෂණ මගින් මෙහෙයවන සංවර්ධනයට පහසුකම් සපයයි.

ආරම්භ කිරීමට හොඳම ක්‍රමය ඔවුන්ගේ නියම නිබන්ධනය හරහා යාමයි . ඔබට පැය කිහිපයකින් පියවර හරහා යා හැකිය; කෙසේ වෙතත්, ඔබට තිරය පිටුපස ඇති සංකල්ප ප්‍රගුණ කිරීමට අවශ්‍ය නම්, වැඩිදුර කියවීම සඳහා ඒවාට යොමු දැක්වීම් රාශියක් ඇතුළත් වේ.

සේවාදායක පාර්ශවයේ සලකා බැලීම් / සීමාවන් තිබේද?

ඔබ දැනටමත් පිරිසිදු jQuery භාවිතා කරන පවතින යෙදුම්වල එය භාවිතා කළ හැකිය. කෙසේ වෙතත්, ඔබට AngularJS විශේෂාංග වලින් පූර්ණ ප්‍රයෝජන ගැනීමට අවශ්‍ය නම්, RESTful ප්‍රවේශයක් භාවිතා කරමින් සේවාදායක පැත්ත කේතනය කිරීම සලකා බැලිය හැකිය .

එසේ කිරීමෙන් ඔබට ඔවුන්ගේ සම්පත් කර්මාන්තශාලාව උත්තේජනය කිරීමට ඉඩ සලසයි , එමඟින් ඔබේ සේවාදායකයේ RESTful API හි සාරාංශයක් නිර්මාණය වන අතර සේවාදායක පාර්ශවීය ඇමතුම් (ලබා ගැනීම, සුරැකීම, මකා දැමීම යනාදිය) ඇදහිය නොහැකි තරම් පහසු කරයි.

"පරමාදර්ශී මාරුව" විස්තර කිරීම සඳහා, කෙටි පිළිතුරක් ප්‍රමාණවත් යැයි මම සිතමි.

AngularJS ඔබ මූලද්‍රව්‍ය සොයා ගන්නා ආකාරය වෙනස් කරයි

දී jQuery , ඔබ සාමාන්යයෙන් භාවිතා කරන තේරීම් අංග සොයා ගැනීමට හා ඉන් පසු ඔවුන්ව දක්වා වයර්:
$('#id .class').click(doStuff);

දී AngularJS , ඔබ භාවිතා මඟ පෙන්වීම් සෘජුවම අංග නිමිත්තෙන්, ඒවා කම්බි:
<a ng-click="doStuff()">

තේරීම් භාවිතා කරමින් මූලද්‍රව්‍ය සොයා ගැනීමට AngularJS ඔබට අවශ්‍ය නැත (හෝ අවශ්‍ය නොවේ) - AngularJS හි jqLite හා පූර්ණ පිපිරුම් jQuery අතර ඇති මූලික වෙනස නම් jqLite තේරීම්කරුවන්ට සහාය නොදක්වයි .

එබැවින් මිනිසුන් "jQuery කිසිසේත් ඇතුළත් නොකරන්න" යැයි පැවසූ විට, එයට ප්‍රධාන වශයෙන් හේතු වන්නේ ඔබ තේරීම් කාරක භාවිතා කිරීමට ඔවුන් අකමැති වීමයි; ඔවුන්ට අවශ්‍ය වන්නේ ඔබ ඒ වෙනුවට විධානයන් භාවිතා කිරීමට ඉගෙන ගැනීමයි. සෘජු, තෝරා නොගන්න!

jQuery

jQuery getElementByHerpDerpකෙටි හා හරස් බ්‍රව්සරය වැනි හාස්‍යජනක ලෙස දිගු ජාවාස්ක්‍රිප්ට් විධාන කරයි .

AngularJS

ගතික වෙබ් යෙදුම් සමඟ හොඳින් ක්‍රියා කරන ඔබේම HTML ටැග් / ගුණාංග සෑදීමට AngularJS ඔබට ඉඩ දෙයි (HTML ස්ථිතික පිටු සඳහා නිර්මාණය කර ඇති බැවින්).

සංස්කරණය කරන්න:

"මට jQuery පසුබිමක් ඇත, AngularJS හි මා සිතන්නේ කෙසේද?" "මට HTML පසුබිමක් ඇත, ජාවාස්ක්‍රිප්ට් හි මා සිතන්නේ කෙසේද?" ඔබ ප්‍රශ්නය අසන කාරණයෙන් පෙනී යන්නේ මෙම සම්පත් දෙකේ මූලික අරමුණු ඔබට නොතේරෙන බවයි. "AngularJS විසින් විධානයන් භාවිතා කරන අතර jQuery CSS තේරීම් කරුවන් විසින් jQuery වස්තුවක් සෑදීම සඳහා මෙය සහ ඒ යනාදිය සිදු කරයි ...." . මෙම ප්‍රශ්නයට දීර් answer පිළිතුරක් අවශ්‍ය නොවේ.

jQuery යනු බ්‍රව්සරයේ ජාවාස්ක්‍රිප්ට් ක්‍රමලේඛනය පහසු කිරීම සඳහා වූ ක්‍රමයකි. කෙටි, හරස් බ්‍රව්සර් විධාන ආදිය.

AngularJS HTML දිගු කරයි, එබැවින් <div>යෙදුමක් සෑදීම සඳහා ඔබ සෑම තැනම තැබිය යුතු නැත . එය HTML ඇත්ත වශයෙන්ම ස්ථිතික, අධ්‍යාපනික වෙබ් පිටු සඳහා නිර්මාණය කර ඇති දේට වඩා යෙදුම් සඳහා වැඩ කරයි. එය ජාවාස්ක්‍රිප්ට් භාවිතයෙන් වටරවුමකින් මෙය සිදු කරයි, නමුත් මූලික වශයෙන් එය ජාවාස්ක්‍රිප්ට් නොව HTML හි දිගුවකි.

jQuery: DOM මූලද්‍රව්‍ය සඳහා ' DOM විමසීම ' සහ යමක් කිරීම ගැන ඔබ බොහෝ දේ සිතනවා .

AngularJS: ආදර්ශය සත්‍යය, ඔබ සැමවිටම සිතන්නේ එම කෝණයෙන්.

උදාහරණයක් ලෙස, ඔබ DOM හි, jQuery හි යම් ආකෘතියකින් පෙන්වීමට අදහස් කරන සේවාදායකයෙන් දත්ත ලබා ගත් විට, ඔබට '1' අවශ්‍ය වේ. මෙම දත්ත ස්ථානගත කිරීමට අවශ්‍ය DOM හි '2' සොයා ගන්න. නව නෝඩයක් සෑදීමෙන් හෝ එහි අභ්‍යන්තර HTML සැකසීමෙන් එය යාවත්කාලීන කරන්න / එකතු කරන්න . ඔබට මෙම දර්ශනය යාවත්කාලීන කිරීමට අවශ්‍ය වූ විට, ඔබ 3. ස්ථානය සහ '4 සොයා ගන්න. යාවත්කාලීන කරන්න '. සේවාදායකයෙන් දත්ත ලබා ගැනීමේ හා ආකෘතිකරණය කිරීමේ එකම සන්දර්භය තුළ සිදු කරන ලද සියල්ල සොයා ගැනීමේ සහ යාවත්කාලීන කිරීමේ මෙම චක්‍රය AngularJS හි නැති වී ඇත.

AngularJS සමඟ ඔබේ ආකෘතිය (ඔබ දැනටමත් පුරුදු වී ඇති ජාවාස්ක්‍රිප්ට් වස්තු) ඇති අතර ආකෘතියේ වටිනාකම ඔබට ආකෘතිය ගැන (පැහැදිලිවම) සහ දර්ශනය ගැන කියයි, සහ ආකෘතියේ මෙහෙයුමක් ස්වයංක්‍රීයව දර්ශනයට ප්‍රචාරණය කරයි, එබැවින් ඔබ එසේ නොකරයි. ඒ ගැන සිතා බැලිය යුතු නැත. ඔබ තවදුරටත් AngularJS හි සොයා ගනු ඇත.

වෙනත් ආකාරයකින් කිවහොත්, jQuery හි, ඔබ CSS තේරීම්කරුවන් ගැන සිතා බැලිය යුතුය, එනම් පන්තියේ හෝ ගුණාංගයක් ඇති divහෝ කොතැනද යන්න td, එවිට මට ඔවුන්ගේ HTML හෝ වර්ණය හෝ අගය ලබා ගත හැකි නමුත් AngularJS හි, ඔබ මේ ආකාරයට සිතන බව ඔබට පෙනෙනු ඇත: මා කටයුතු කරන්නේ කුමන ආකෘතියක් සමඟද, මම ආකෘතියේ වටිනාකම සත්‍ය ලෙස සකසමි. මෙම අගය පිළිබිඹු කරන දර්ශනය පිරික්සුම් කොටුවක් ද නැතිනම් tdමූලද්‍රව්‍යයක වාසය කරන්නේ ද යන්න ගැන ඔබ කරදර වන්නේ නැත (ඔබට බොහෝ විට jQuery හි සිතා බැලීමට අවශ්‍ය වනු ඇත).

AngularJS හි DOM හැසිරවීම සමඟ, ඔබ වලංගු HTML දිගු ලෙස සිතිය හැකි විධානයන් සහ පෙරහන් එකතු කරන බව ඔබට පෙනේ.

AngularJS හි ඔබ අත්විඳින තවත් එක් දෙයක්: jQuery හි ඔබ jQuery කාර්යයන් බොහෝ ලෙස හඳුන්වයි, AngularJS හි AngularJS ඔබේ කාර්යයන් අමතනු ඇත, එබැවින් AngularJS 'දේවල් කරන්නේ කෙසේදැයි ඔබට කියනු ඇත', නමුත් ප්‍රතිලාභ එය වටී, එබැවින් AngularJS ඉගෙනීම සාමාන්‍යයෙන් අදහස් කරන්නේ AngularJS ට අවශ්‍ය දේ ඉගෙන ගැනීම හෝ AngularJS විසින් ඔබේ කාර්යයන් ඉදිරිපත් කිරීම අවශ්‍ය වන ආකාරය ඉගෙන ගැනීම සහ ඒ අනුව එය කැඳවනු ඇත. මෙය පුස්තකාලයකට වඩා AngularJS රාමුවක් බවට පත් කරන එක් කරුණකි.

ඒවා ඉතා ලස්සන, නමුත් දිගු පිළිතුරු ය.

මගේ අත්දැකීම් සාරාංශ කිරීමට:

1. පාලකයන් සහ සැපයුම්කරුවන් (සේවා, කර්මාන්තශාලා ආදිය) දත්ත ආකෘතිය වෙනස් කිරීම සඳහා වේ, HTML නොවේ.
2. HTML සහ විධානයන් පිරිසැලසුම නිර්වචනය කර ආකෘතියට බැඳීම.
3. ඔබට පාලකයන් අතර දත්ත බෙදා ගැනීමට අවශ්‍ය නම්, සේවාවක් හෝ කර්මාන්ත ශාලාවක් සාදන්න - ඒවා යෙදුම හරහා බෙදා ගන්නා තනි බොත්තම් වේ.
4. ඔබට HTML විජට් එකක් අවශ්‍ය නම්, නියෝගයක් සාදන්න.
5. ඔබට යම් දත්ත තිබේ නම් සහ දැන් HTML යාවත්කාලීන කිරීමට උත්සාහ කරන්නේ නම් ... නවත්වන්න! ආකෘතිය යාවත්කාලීන කරන්න, සහ ඔබේ HTML ආකෘතියට බැඳී ඇති බවට වග බලා ගන්න.

jQuery යනු DOM හැසිරවීමේ පුස්තකාලයකි.

AngularJS යනු MV * රාමුවකි.

ඇත්ත වශයෙන්ම, AngularJS යනු ජාවාස්ක්‍රිප්ට් එම්වී * රාමු කිහිපයෙන් එකකි (බොහෝ ජාවාස්ක්‍රිප්ට් එම්වීසී මෙවලම් තවමත් වර්ගීකරණ පුස්තකාලයට අයත් වේ).

රාමුවක් වීම, එය ඔබගේ කේතය සත්කාරකත්වය සපයන අතර ඇමතිය යුතු දේ සහ කවදාද යන්න පිළිබඳ තීරණ වල හිමිකාරිත්වය ගනී!

AngularJS තුළම එය තුළ jQuery- ලයිට් සංස්කරණයක් ඇතුළත් වේ. එබැවින් සමහර මූලික DOM තේරීම / හැසිරවීම සඳහා, ඔබට ඇත්ත වශයෙන්ම jQuery පුස්තකාලය ඇතුළත් කිරීමට අවශ්‍ය නැත (එය ජාලය තුළ ක්‍රියාත්මක වීමට බොහෝ බයිට් ඉතිරි කරයි.)

AngularJS හි DOM හැසිරවීම සහ නැවත භාවිතා කළ හැකි UI සංරචක සැලසුම් කිරීම සඳහා "විධානයන්" යන සංකල්පය ඇත, එබැවින් DOM හැසිරවීම හා සම්බන්ධ දේවල් කිරීමේ අවශ්‍යතාවය ඔබට දැනෙන සෑම විටම ඔබ එය භාවිතා කළ යුතුය (නියෝග යනු AngularJS භාවිතා කරන අතරතුර ඔබ jQuery කේතය ලිවිය යුතු ස්ථානය පමණි).

AngularJS හි සමහර ඉගෙනුම් වක්‍රය ඇතුළත් වේ (jQuery :-) ට වඩා.

-> jQuery පසුබිමෙන් පැමිණෙන ඕනෑම සංවර්ධකයෙකු සඳහා, මගේ පළමු අවවාදය වනුයේ "AngularJS වැනි පොහොසත් රාමුවකට පැනීමට පෙර පළමු පන්තියේ භාෂාවක් ලෙස JavaScript ඉගෙනීමයි!" මම ඉහත කාරණය ඉගෙන ගත්තේ අමාරුවෙන්.

වාසනාව.

ඒවා ඇපල් හා දොඩම්. ඔබට ඒවා සංසන්දනය කිරීමට අවශ්‍ය නැත. ඒවා වෙනස් දේවල් දෙකක්. AngularJs මේ වන විටත් jQuery ලයිට් ගොඩනගා ඇති අතර එමඟින් සම්පූර්ණ පුපුරුවා හරින ලද jQuery අනුවාදය පවා ඇතුළත් නොකර මූලික DOM හැසිරවීමට ඉඩ සලසයි.

jQuery යනු DOM හැසිරවීම සම්බන්ධයෙනි. එය සියලු හරස් බ්‍රව්සර් වේදනාව විසඳයි, එසේ නොමැතිනම් ඔබට ගනුදෙනු කිරීමට සිදුවනු ඇත, නමුත් එය ඔබගේ යෙදුම AngularJS වැනි සංරචක වලට බෙදීමට ඉඩ දෙන රාමුවක් නොවේ.

AngularJs පිළිබඳ හොඳ දෙයක් නම්, එය ඔබට විධානයන්හි DOM හැසිරවීම වෙන් කිරීමට / හුදකලා කිරීමට ඉඩ සලසයි. Ng-click වැනි භාවිතා කිරීමට ඔබට අවශ්‍ය නිමැවුම් ඇත. ඔබේ සියලු දර්ශන තර්කනය හෝ DOM හැසිරවීම අඩංගු වන ඔබේම අභිරුචි විධානයන් ඔබට නිර්මාණය කළ හැකි අතර එමඟින් ව්‍යාපාර තර්කනය ගැන සැලකිලිමත් විය යුතු පාලකයන්ගේ හෝ සේවාවන්හි DOM හැසිරවීමේ කේතය සම්බන්ධ නොකරන්න.

කෝණික ඔබගේ යෙදුම - පාලකයන් - සේවා - දසුන් - යනාදිය ලෙස බිඳ දමයි.

තව එක දෙයක් තියෙනවා, ඒක තමයි නියෝගය. එය ඔබට ඕනෑම DOM මූලද්‍රව්‍යයකට ඇමිණිය හැකි ගුණාංගයක් වන අතර, ඔබේ jQuery ගැන කරදර නොවී, ඒ තුළ AngularJs සංරචක සමඟ ගැටීම හෝ එහි ගෘහ නිර්මාණ ශිල්පය අවුල් කිරීම.

මා සහභාගී වූ රැස්වීමකින් මට අසන්නට ලැබුණි, කෝණිකයේ නිර්මාතෘවරයෙක් පැවසුවේ ඔවුන් DOM හැසිරවීම වෙන් කිරීමට සැබවින්ම වෙහෙස මහන්සි වී වැඩ කළ බැවින් ඒවා නැවත ඇතුළත් කිරීමට උත්සාහ නොකරන්න.

AngularJS: Misko Hevery සහ Igor Minar හි මුල් නිර්මාණකරුවන් ඇතුළත් වන JavaScript Jabber: Episode # 32 යන පෝඩ්කාස්ට් එකට සවන් දෙන්න . වෙනත් ජාවාස්ක්‍රිප්ට් පසුබිම් වලින්, විශේෂයෙන් jQuery වෙතින් AngularJS වෙත පැමිණීම වැනි දේ ගැන ඔවුන් බොහෝ දේ කථා කරයි.

පෝඩ්කාස්ට් හි සඳහන් එක් කරුණක් ඔබගේ ප්‍රශ්නයට අදාළව බොහෝ දේ මා සඳහා ක්ලික් කර ඇත:

මිස්කෝ : [...] අපි කෝණික භාෂාවෙන් ඉතා කලාතුරකින් සිතූ එක් දෙයක් නම්, අපි ඔබට ගැලවී යා හැකි තොප්පි ලබා දෙන්නේ කෙසේද, එවිට ඔබට පිටතට ගොස් මූලික වශයෙන් මෙයින් ගැලවිය හැකි මාර්ගයක් සොයාගත හැකිය. ඉතින් අපට නම්, පිළිතුර “විධානයන්” ලෙස හැඳින්වේ. විධානයන් සමඟ, ඔබ මූලිකවම කුඩා jQuery ජාවාස්ක්‍රිප්ට් බවට පත්වේ, ඔබට අවශ්‍ය ඕනෑම දෙයක් කළ හැකිය.

IGOR : එබැවින් ඔබ මෙම නිශ්චිත මූලද්‍රව්‍යය හෝ මෙම CSS අච්චුව හරහා පැමිණෙන සෑම විටම එය පවසන සම්පාදකයාට උපදෙස් ලෙස සිතන්න, ඔබ මේ ආකාරයේ කේතයක් තබා ගන්නා අතර එම කේතය මූලද්‍රව්‍යය සහ එම මූලද්‍රව්‍යයට පහළින් ඇති සියල්ල භාරව සිටී. DOM ගස තුළ.

සමස්ත කථාංගයේ පිටපතක් ඉහත සබැඳියෙන් ලබා ගත හැකිය.

එබැවින්, ඔබේ ප්‍රශ්නයට directly ජුව පිළිතුරු සැපයීම සඳහා: AngularJS යනු සෑම මතයක්ම දරන අතර එය සත්‍ය MV * රාමුවකි. කෙසේ වෙතත්, ඔබට තවමත් ඔබ දන්නා සහ නියම කරන ලද සිසිල් දේවල් සියල්ලම කළ හැකිය. එය "jQuery හි මා කලින් කළ දේ කරන්නේ කෙසේද?" "jQuery හි මා භාවිතා කළ සියලු දේ සමඟ AngularJS අතිරේක කරන්නේ කෙසේද?"

එය සැබවින්ම එකිනෙකට වෙනස් මනසකි.

ජාවාස්ක්‍රිප්ට් ක්‍රමලේඛනය සඳහා මගේ පළමු බැරෑරුම් නිරාවරණය වූයේ Node.js සහ AngularJS නිසාය. මම කවදාවත් jQuery ඉගෙනගෙන නැති අතර, එය හොඳ දෙයක් යැයි මම සිතමි, මන්ද මට කිසිවක් ඉගෙන ගැනීමට අවශ්‍ය නැත. ඇත්ත වශයෙන්ම, මම මගේ ගැටලුවලට jQuery විසඳුම් සක්‍රියව මගහරින අතර ඒ වෙනුවට ඒවා විසඳීම සඳහා “AngularJS ක්‍රමයක්” පමණක් සොයමි. එබැවින්, මෙම ප්‍රශ්නයට මගේ පිළිතුර, “කිසි විටෙකත් jQuery ඉගෙන නොගත් කෙනෙකු මෙන් සිතන්න” සහ jQuery කෙලින්ම ඇතුළත් කිරීමට කිසිදු පෙළඹවීමකින් වැළකී සිටිනු ඇතැයි මම සිතමි (පැහැදිලිවම AngularJS එය තිරය පිටුපස යම් දුරකට භාවිතා කරයි).

AngularJS සහ jQuery:

JQLite ක්‍රියාකාරීත්වය හැර සෑම මට්ටමකින්ම AngularJs සහ JQuery සම්පූර්ණයෙන්ම වෙනස් වන අතර ඔබ AngularJs හි මූලික අංග ඉගෙන ගැනීමට පටන් ගත් පසු ඔබට එය පෙනෙනු ඇත (මම එය පහතින් විස්තර කළෙමි).

AngularJs යනු සේවාදායකයාගේ පාර්ශවීය රාමුවක් වන අතර එය ස්වාධීන සේවාදායක පාර්ශවීය යෙදුම ගොඩනැගීමට ඉදිරිපත් වේ. JQuery යනු DOM වටා සෙල්ලම් කරන සේවාදායක පාර්ශවීය පුස්තකාලයකි.

AngularJs සිසිල් මූලධර්මය - ඔබේ UI හි යම් වෙනස්කම් අවශ්‍ය නම් ආදර්ශ දත්ත වෙනස් කිරීමේ දෘෂ්ටිකෝණයෙන් සිතන්න. ඔබගේ දත්ත වෙනස් කරන්න, එවිට UI නැවත ප්‍රතිස්ථාපනය වේ. DOM වටා එය සෙල්ලම් කිරීම අවශ්‍ය නොවන අතර එය කිසිසේත්ම අවශ්‍ය නොවන අතර එය කෝණික මඟ පෙන්වීම් හරහාද හැසිරවිය යුතුය.

මෙම ප්‍රශ්නයට පිළිතුරු සැපයීම සඳහා, පළමු ව්‍යවසාය යෙදුම පිළිබඳ මගේ අත්දැකීම් AngularJS සමඟ බෙදා ගැනීමට මට අවශ්‍යය. අපගේ jQuery මානසිකත්වය වෙනස් කිරීමට පටන් ගන්නා තැන කෝණික විසින් සපයන වඩාත්ම විශ්මය ජනක අංග මේවා වන අතර අපට කෝණිකය ලැබෙන්නේ රාමුවක් වැනි මිස පුස්තකාලයක් නොවේ.

ද්වි-මාර්ග දත්ත බන්ධනය පුදුම සහගත ය: යාවත්කාලීනය, ඩෙල්ටේ, ඇතුළු කරන්න යන සියලු ක්‍රියාකාරීත්වයන් සහිත ජාලයක් මා සතුව තිබුණි. මා සතුව දත්ත වස්තුවක් ඇත, එය ජාලක ආකෘතිය ng- පුනරාවර්තනය භාවිතා කරයි. ඔබට අවශ්‍ය වන්නේ මකාදැමීම සහ ඇතුළත් කිරීම සඳහා සරල ජාවාස්ක්‍රිප්ට් කේතයේ එක් පේළියක් පමණක් ලිවීම පමණි. ජාල ආකෘතිය ක්ෂණිකව වෙනස් වන විට ජාලකය ස්වයංක්‍රීයව යාවත්කාලීන වේ. යාවත්කාලීන ක්‍රියාකාරිත්වය තථ්‍ය කාලය, ඒ සඳහා කේතයක් නොමැත. ඔබට පුදුම හිතෙනවා !!!

නැවත භාවිතා කළ හැකි විධානයන් සුපිරි ය: විධානයන් එක තැනක ලියා යෙදුම පුරාම භාවිතා කරන්න. OMG!!! පේජිං, රීජෙක්ස්, වලංගු කිරීම් ආදිය සඳහා මම මෙම නියෝගය භාවිතා කළෙමි. එය ඇත්තෙන්ම සිසිල් ය!

මාර්ගගත කිරීම ශක්තිමත් ය: එය ක්‍රියාත්මක කිරීමට ඔබට අවශ්‍ය වන්නේ කෙසේ ද යන්න, නමුත් HTML සහ පාලකය (ජාවාස්ක්‍රිප්ට්) නියම කිරීම සඳහා ඉල්ලීම මෙහෙයවීම සඳහා කේත පේළි කිහිපයක් අවශ්‍ය වේ.

පාලකයන් විශිෂ්ටයි: පාලකයන් තමන්ගේම HTML ගැන සැලකිලිමත් වන නමුත් මෙම වෙන්වීම පොදු ක්‍රියාකාරිත්වය සඳහාද හොඳින් ක්‍රියා කරයි. ප්‍රධාන HTML හි බොත්තමක් ක්ලික් කිරීමෙන් ඔබට එකම ශ්‍රිතය ඇමතීමට අවශ්‍ය නම්, එක් එක් පාලකයේ එකම ක්‍රියාකාරී නාමය ලියා තනි කේතයක් ලියන්න.

ප්ලගීන: ඔබගේ යෙදුමේ ආවරණයක් පෙන්වීම වැනි තවත් බොහෝ සමාන අංග තිබේ. ඔබට ඒ සඳහා කේත ලිවීමට අවශ්‍ය නැත, wc-overlay ලෙස ලබා ගත හැකි උඩිස් ප්ලගිනයක් භාවිතා කරන්න, මෙය ස්වයංක්‍රීයව සියලුම XMLHttpRequest (XHR) ඉල්ලීම් බලා ගනී.

RESTful ගෘහ නිර්මාණ ශිල්පය සඳහා වඩාත් සුදුසුය : සම්පූර්ණ රාමුවක් වීම නිසා RESTful ගෘහ නිර්මාණ ශිල්පයක් සමඟ වැඩ කිරීමට AngularJS විශිෂ්ටයි. REST CRUD API ඇමතීම ඉතා පහසු සහ

සේවා : සේවාවන් භාවිතා කරමින් පොදු කේත ලියන්න සහ පාලකයන්ගේ අඩු කේත. පාලකයන් අතර පොදු ක්‍රියාකාරීත්වය බෙදා ගැනීමට සේවා භාවිතා කළ හැකිය.

විස්තාර්‍යතාව : කෝණික මඟින් කෝණික විධානයන් භාවිතා කරමින් HTML විධානයන් දීර් extended කර ඇත. HTML තුළ ප්‍රකාශන ලියන්න සහ ඒවා ක්‍රියාත්මක වන වේලාවේදී ඇගයීමට ලක් කරන්න. ඔබේම උපදෙස් සහ සේවාවන් සාදන්න සහ අමතර වෑයමක් නොමැතිව වෙනත් ව්‍යාපෘතියක ඒවා භාවිතා කරන්න.

: ජාවාස්ක්රිප්ට් මහා විද්යාලය * ආධුනිකයෙක් තනිකරම (නෑ සේවාදායකය / සේවාදායක-පැත්තේ කරුණු) අයදුම්පත් ගෘහ නිර්මාණ ශිල්පය පිළිබඳව අවධානය යොමු ලෙස, මම පහත සඳහන් සම්පත් (මම බෝධිය වන තවමත් සඳහන් නොවීම) නිර්දේශ JavaScript නිර්මාණ රටා Addy Osmani විසින්, , විවිධ ජාවාස්ක්‍රිප්ට් මෝස්තර රටා සඳහා හැඳින්වීමක් ලෙස . මෙම පිළිතුරෙහි භාවිතා කර ඇති කොන්දේසි ඉහත සම්බන්ධිත ලේඛනයෙන් ලබාගෙන ඇත. පිළිගත් පිළිතුරේ වචන වලින් කියැවුණු දේ මම නැවත නොකියමි. ඒ වෙනුවට, මෙම පිළිතුර AngularJS (සහ වෙනත් පුස්තකාල) බලගන්වන න්‍යායාත්මක පසුබිම් සමඟ සම්බන්ධ වේ.

මා මෙන්ම, AngularJS (හෝ Ember.js , Durandal, සහ ඒ සඳහා වෙනත් MV * රාමු) විවිධ ජාවාස්ක්‍රිප්ට් මෝස්තර රටා එකලස් කරන එක් සංකීර්ණ රාමුවක් බව ඔබට ඉක්මනින් වැටහෙනු ඇත .

(1) ස්වදේශික ජාවාස්ක්‍රිප්ට් කේතය සහ (2) එක් එක් ගෝලීය රාමුවකට කිමිදීමට පෙර මෙම එක් එක් රටාවන් සඳහා වෙන වෙනම කුඩා පුස්තකාල පරීක්ෂා කිරීම මට පහසු විය . රාමුවක් ආමන්ත්‍රණය කරන්නේ කුමන තීරණාත්මක කාරණාද යන්න වඩා හොඳින් තේරුම් ගැනීමට මෙය මට ඉඩ ලබා දුන්නේය (ඔබ පෞද්ගලිකව ගැටලුවට මුහුණ දී ඇති නිසා).

උදාහරණයක් වශයෙන්:

• ජාවාස්ක්‍රිප්ට් වස්තු-නැඹුරු වැඩසටහන්කරණය (මෙය ගූගල් සෙවුම් සබැඳියකි). එය පුස්තකාලයක් නොව ඕනෑම යෙදුම් ක්‍රමලේඛනයකට අනිවාර්යයෙන්ම අවශ්‍යතාවයකි. මූලාකෘති, ඉදිකිරීම්කරු, සිංගල්ටන් සහ සැරසිලි රටා ස්වදේශීයව ක්‍රියාත්මක කිරීම එය මට ඉගැන්නුවා
• මුහුණත රටාව සඳහා jQuery / යටි ලකුණු (DOM හැසිරවීම සඳහා WYSIWYG වැනි)
• මූලාකෘති / ඉදිකිරීම්කරු / මික්සින් රටාව සඳහා Prototype.js
• මොඩියුල රටාව / AMD සඳහා අවශ්‍ය JS / Curl.js
• නිරීක්ෂණය කළ හැකි, ප්‍රකාශිත / දායක රටාව සඳහා KnockoutJS

සැ.යු: මෙම ලැයිස්තුව සම්පුර්ණ නැත, හෝ 'හොඳම පුස්තකාල'; ඒවා මා භාවිතා කළ පුස්තකාල විය හැකිය. මෙම පුස්තකාලවල තවත් රටා ඇතුළත් වේ, සඳහන් කර ඇත්තේ ඒවායේ ප්‍රධාන අවධානය හෝ මුල් අභිප්‍රාය පමණි. මෙම ලැයිස්තුවෙන් යමක් අස්ථානගත වී ඇති බව ඔබට හැඟේ නම්, කරුණාකර එය අදහස් දැක්වීම්වල සඳහන් කරන්න, එය එකතු කිරීමට මම සතුටු වෙමි.

ඇත්ත වශයෙන්ම, ඔබ AngularJS භාවිතා කරන්නේ නම්, ඔබට තවදුරටත් jQuery අවශ්‍ය නොවේ. AngularJS හි බන්ධන හා විධානයන් ඇත, එය ඔබට jQuery සමඟ කළ හැකි බොහෝ දේ සඳහා ඉතා හොඳ “ආදේශකයක්” වේ.

මම සාමාන්‍යයෙන් AngularJS සහ Cordova භාවිතා කරමින් ජංගම යෙදුම් සංවර්ධනය කරමි . මට අවශ්‍ය jQuery වෙතින් ඇති එකම දෙය තේරීම් කාරකයයි.

ගූග්ලිං කිරීමෙන්, එහි තනිවම jQuery තේරීම් මොඩියුලයක් ඇති බව මට පෙනේ. එය සිස්ල් ය.

JQuery තේරීම් (Sizzle භාවිතා කරමින්) බලයෙන් AngularJS භාවිතා කරමින් වෙබ් අඩවියක් ඉක්මනින් ආරම්භ කිරීමට මට උපකාර වන ඉතා කුඩා කේත ස්නිපටයක් සෑදීමට මම තීරණය කළෙමි.

මම මගේ කේතය මෙහි බෙදාගත්තා: https://github.com/huytd/Sizzular