Жаңадан бастаушылар үшін біреу AngularJS-те қызмет, зауыт және провайдер арасындағы айырмашылықты нақты түсіндіре ала ма?


жауап 1:

AngularJS: қызмет пен провайдер мен зауыт арасындағы айырмашылық

Егер сіз оны іздесеңіз, мүмкін, қайсысы сізге сәйкес келетінін білгіңіз келген шығар. Немесе сіз үшеуін кездестіргендіктен және айырмашылықты айтуға тырысқандықтан, олар ұқсас болғандықтан.

Егер сіз олар ұқсас деп ойласаңыз, сіз дұрыс айтасыз. Олар өте ұқсас. Шындығында, олардың бәрі бірдей.

Олардың барлығы провайдерлер. Зауыт пен қызмет провайдердің тек ерекше жағдайлары болып табылады, бірақ сіз провайдердің көмегімен қалаған нәрсеңізге қол жеткізе аласыз. Мен саған көрсетемін.

Провайдер

Біз мәнді қайтаратын және жай ғана сол мәнді көрсететін провайдерді жасаймыз. Сіз мұны істейсіз:

var mod = бұрыш.module («MyModule», []); mod.provider («myProvider», функция () {бұл. $ get = function () {return «Менің мәнім»;};}); mod.controller («MyController», функция (myProvider) {console.log («MyController - myProvider:» + myProvider);}); МАҢЫЗДЫ МӘЛІМЕТТЕРДІ ҚАУІПСІЗДІК - myProvider: Менің құндылығым

Жұмыс интерактивті мысалын мына жерден табуға болады: Дж.С.

Ол жерде сіз «провайдермен» құндылықты «қамтамасыз ете» аласыз. Бұл мән кез келген болуы мүмкін. Бұл жағдайда, бұл «Менің мәні» мәні бар жол, бірақ ол оңай функция немесе объект бола алады.

Кодтың басқа мысалдарында код үзінділерін қысқа және нақты алу үшін мен модульдің тегін және анықтамасын жоққа шығаратынымды ескеріңіз.

Бұрыш тек бір рет алады

Айта кету керек, бұрыштық мән провайдерге қанша рет енгізілетініне қарамастан, бір рет «алады». Яғни, ол тек бір рет $ get () шақырады, $ get () арқылы берілген мәнді сақтайды және әр уақытта бірдей сақталған мәнді береді.

Менің не айтқым келетінін көрсету үшін мен басқа контроллерді құрып, провайдерге басқа консольді қосып, не болатынын көре аласыз.

mod.provider («myProvider», функция () {бұл. $ get = function () {console.log («MyProviderFunction. $ get () шақырылды.»); // Осы жолға «Менің Мәнім» қайтарылды;}; }); mod.controller («MyController», функция (myProvider) {console.log («MyController - myProvider:» + myProvider);}); mod.controller («MyController2», функциясы (myProvider) {// осы контроллерді konsole.log қосты («MyController2 - myProvider:» + myProvider);}); ҚАУІПСІЗДІК МІНДЕТТЕРІ $ Get () шақырылады. MyController - myProvider: менің мәні MyController2 - myProvider: my value

JS скрипкасында ашыңыз

Көріп отырғаныңыздай, $ get () функциясы тек бір рет шақырылды.

Біз провайдерге $ get () әдісін жасау үшін бірнеше кодтық код жаздық. Неліктен басқа функцияны анықтайтын бұрыштық функцияны берудің орнына, оны тікелей орындағымыз келетін функцияны неге бермеске? Ал, бұрыштықтар оны зауыт деп атай алады.

Зауыт

Зауытта сіз ағзаны $ get әдісімен қамтамасыз етесіз, ал қалғанын Angular жасайды.Міне жаңа код осылай көрінеді, өйткені сіз дәл солай істейтіндігіңізді көресіз.

mod.factory («myProvider», функциясы () {// «провайдер» «зауыттық» console.log болып өзгертілді («Зауыт функциясы деп аталады.»); «Мәнім»;}); mod.controller («MyController», функция (myProvider) {console.log («MyController - myProvider:» + myProvider);}); mod.controller («MyController2», функция (myProvider) {console.log («MyController2 - myProvider:» + myProvider);}); CONSOLE EXIT зауыт функциясы шақырылды. MyController - myProvider: менің мәні MyController2 - myProvider: my value

JS скрипкасында ашыңыз

Енді сіз кодты аз фабрикамен солай ете алсаңыз, провайдерді не үшін пайдалану керек екендігі туралы сұрақ туындауы мүмкін. Кейінірек қарастыратын бірнеше себептер бар. Қазіргі уақытта мен осы лауазымның тақырыбына берік болып, осы (сатушы мен зауыт) және қызмет арасындағы айырмашылықты шешкім келеді.

Әзірге біз қарапайым жол мәнін қайтардық, бірақ іс жүзінде біз көбінесе нысанды қайтарғымыз келеді. Бұл біздің мысалымызды мүлдем өзгертпейді Біз объект үшін қайтаратын жолды оңай алмастыра аламыз.

Мысалы, мұны getValue () функциясы бар нысанды қайтару арқылы жасайық. Енді JavaScript-те нысанды құрудың бірнеше жолы бар. Біз объект конструкторының тәсілін қолданамыз, онда біз объектіні қасиеттері мен функциялары бар толтыратын және оны құру үшін жаңа кілт сөзді қолданатын функция құрамыз.

MyObject функциясы () {// біздің объект конструкторымызды қосты this.getValue = function () {return «Менің мәнім»; }; } mod.factory («myProvider», функция () {console.log («Зауыт функциясы деп аталады.»); жаңа MyObject қайтару (); // объектіміздің CREATE данасы}); mod.controller («MyController», функция (myProvider) {console.log («MyController - myProvider:» + myProvider.getValue ()); // getValue ()}) қоңырау шалу үшін өзгертілді; mod.controller («MyController2», функция (myProvider) {console.log («MyController2 - myProvider:» + myProvider.getValue ()); // getValue ()} деп қоңырау шалу үшін өзгертілді); CONSOLE EXIT зауыт функциясы шақырылды. MyController - myProvider: менің мәні MyController2 - myProvider: my value

JS скрипкасында ашыңыз

Енді мен оған аздап өзгеріс жасағым келеді, өйткені бұл келесі тұжырымдамаға жақсы әсер етеді. Біздің мысалда MyObject () «Object Constructor» функциясын жасаймыз. Алайда, біз оларды тек бір жерге орналастырғандықтан, оның орнына анонимді функцияны қолдана аламыз.

Бұл өте аз өзгеріс. Оның орнына:

MyObject функциясы () {this.getValue = функция () {«Мәнім» қайтару; }; } mod.factory («myProvider», функция () {console.log («Зауыт функциясы деп аталады.»); жаңа MyObject қайтарыңыз ();});

Біз мұны жасаймыз:

mod.factory («myProvider», функция () {console.log («Зауыт функциясы деп аталады.»); жаңа функцияны қайтару () {// біздің объект конструкторымыз INLINED this.getValue = function () {return «Менің құндылығым»; };};});

Қазір бәрі келесідей:

mod.factory («myProvider», функция () {console.log («Зауыт функциясы деп аталады.»); жаңа функцияны қайтару () {// біздің объект конструкторымыз INLINED this.getValue = function () {«Мәнім» қайтару; };};}); mod.controller («MyController», функция (myProvider) {console.log («MyController - myProvider:» + myProvider.getValue ());}); mod.controller («MyController2», функция (myProvider) {console.log («MyController2 - myProvider:» + myProvider.getValue ());});

JS скрипкасында ашыңыз

Біздің бүкіл фабрикамыз бір объектіден тұратын болғандықтан, бізге бұл қызықты көрінетін фабриканы жазудың орнына бұрыштық объект конструктор функциясын бере алсақ, жақсы болмас еді. Сізде сәттілік бар, бұл қызмет.

Сіздің қызметіңізде

Міне, код бірдей, тек зауыттың орнына қызмет пайдаланылады.

mod.service («myProvider», функциясы () {// «зауыт» «қызмет» болып өзгертілді // ЕСКЕРТПЕ: Осы функцияның алдындағы объект конструкторы ғана берілген .getValue = function () {return «Менің құндылығым»;}; }); mod.controller («MyController», функция (myProvider) {console.log («MyController - myProvider:» + myProvider.getValue ());}); mod.controller («MyController2», функция (myProvider) {console.log («MyController2 - myProvider:» + myProvider.getValue ());}); МАҢЫЗДЫ МӘЛІМЕТТЕРГЕ ҚАУІПСІЗДІК - Менің жеткізушім: Менің мәнім MyController2 - myProvider: Менің құндылығым

JS скрипкасында ашыңыз

Провайдер vs зауыт vs қызмет

Қорытындылай келе, жеткізушілер, зауыттар мен қызметтердің барлығы жеткізушілер болып табылады. Егер сізге тек провайдерден $ get () функциясы қажет болса, зауыт - провайдердің ерекше жағдайы. Сіз оны аз кодпен жаза аласыз. Қызмет - бұл жаңа кодтың данасын аз кодты жазудың артықшылығымен қайтарғыңыз келгенде зауыттың ерекше жағдайы.

Бірін екіншісіне қарсы қашан қолдану керек?

Жауап: сіз мақсатыңызға жететін ең мамандандырылған нұсқаны қолданасыз. Сіз басқа жерде анықталған және конструктордың дәлелдерін қабылдайтын бар нысанды қайтарасыз делік. Сіз дәлелдерді қызметке жібере алмайсыз, сондықтан зауытқа қоңырау шалыңыз.

mod.factory («myProvider», функция () {console.log («Зауыт функциясы деп аталады.»); жаңа SomeMessageBoxClass қайтарыңыз («жеке дәлел»);});

Жеткізуші мен зауыт арасындағы шешім қабылдаудағы басты факторлардың бірі - жасалған объектіні оны жасамас бұрын конфигурациялау керек пе. Сіз мұны module.config () арқылы қоңырау шалып, провайдерді өзіңізге (провайдер қайтарған объектінің орнына) жіберу арқылы жасайсыз. Сіз мұны провайдердің атына енгізген кезде «провайдерді» қосу арқылы жасайсыз.

Мұны қалай жасағаныңыздың мысалы келтірілген:

mod.provider («myProvider», функция () {this.value = «Менің мәнім»; this.setValue = функция (newValue) {this.value = newValue;}; $. = function () {мұны қайтарыңыз. Мән;};}); mod.controller («MyController», функция (myProvider) {console.log («MyController - myProvider:» + myProvider);}); mod.config (функциясы (myProviderProvider) {// ҚОСЫЛҒАН конфигурация бөлімі // myProviderProvider.setValue («Жаңа мән»);}) «Жабдықтаушы» қосымша суфиксына назар аударыңыз;

Бұл үш провайдерді қашан пайдалану керек: провайдер, зауыт және қызмет. Мұнда ескерілмеген қосымша провайдер бар, бұл тағы бір ерекше жағдай, және бұл провайдер.

Егер сіз зауыттық провайдерді жоғарыда алғаш рет таныстырғанымыз есіңізде болса, біз жолдың мәнін қайтарудың қарапайым мысалын келтірдік. Бұл келесідей болды:

mod.factory («myProvider», функция () {қайтару «Менің мәнім»;});

Біз мұны құндылық провайдерімен іс жүзінде жасай алар едік, бұл өз кезегінде сіз оны аз кодпен істей алатын артықшылығы бар. Келесі код жоғарыдағы кодпен бірдей:

mod.value («myProvider», «My Value»);

Сіз бірін екіншісіне қарсы қашан қолданар едіңіз? Мүмкін сіз басқа деректер негізінде құнды есептегіңіз келсе, мысалы, провайдерді қолданар едіңіз. B. Басқа құнды жеткізушілерден немесе сыртқы көздерден алынған мәліметтер. Және / немесе сіз оны бірінші рет сұраған кезде дәл есептегіңіз келгенде. Мұнда бірнеше мысалдар келтірілген:

// зауыт «мән» жеткізушісіне байланысты мод.value («көп», 3) мысалы; mod.factory («мән», функция (көп) {қайтару 10 * көп;}); // зауыт сыртқы мәліметтерге тәуелді mod.factory («мән», функция (бірнеше) {var multiple = getDateFromExternalPage (); қайтару 10 * көп;});

Мен бұл құнды басқа провайдер деп ойладым ба? Мен өтірік айттым, құны жағынан өте ұқсас, екі кішкентай айырмашылық бар. Бұл провайдер тұрақты деп аталады.

Мән мен тұрақты мән арасындағы айырмашылық конфигурация кезеңінде тұрақты мәнмен көрсетілген мән қол жетімді болады. Бұрынғы кездерден-ақ мен провайдерге конфигурация кезеңінде қол жетімді болғанын есте сақтауыңыз мүмкін, бірақ Сервис және Зауыт жоқ.

Мәні де, мәні де бірдей. Конфигурация кезеңінде тұрақты мән бар, ал мәні жоқ. Тағы бір айырмашылығы, аты айтып тұрғандай тұрақты мәннің өзгеруі мүмкін емес. Сіз оған тағайындайтын бірінші мән - бұл оны сақтайтын мән. Егер сіз кейінірек оған басқа мән беруге тырыссаңыз, ол еленбейді.

Мұнда мысал келтірілген:

mod.value («myValue», «Бірінші тапсырма»); mod.value («myValue», «Екінші тағайындау»); mod.constant («myConstant», «Бірінші тапсырма»); mod.constant («myConstant», «екінші тапсырма»); mod.controller («MyController», функция (myValue, myConstant) {console.log («myValue:» + myValue); console.log («myConstant:» + myConstant);}); МАЗМҰНДЫ ЖОЮ: екінші тапсырма myConstant: бірінші тапсырма

Мұнда әрқайсысын қашан қолдану керек екендігі туралы қысқаша ақпарат берілген:

Құнды

Сіз қарапайым әріптік мәнді көрсетесіз.

mod.value («myValue», 10);
    

Тұрақты

Сіз конфигурация кезеңінде осы мәнге қол жеткізе алуыңыз керек. (.config ())

mod.constant («myValue», 10); mod.config (функция (myValue) {console.log (myValue);});

Зауыт

Сіз көрсеткен мән басқа деректерді қолдану арқылы есептелуі керек.

mod.factory («myFactory», функция () {return 10;});
        

Қызмет көрсету

Сіз нысанды әдістермен қайтарасыз.

mod.service («myService», функция () {var name = «Bob»; this.setName = функциясы (newName) {this.name = newName;}; this.getName = function () {return this.name;} });
        

Провайдер

Конфигурация кезеңінде сіз оны жасамас бұрын оны теңшей алатын болғыңыз келеді.

mod.provider («сәлемдесу», функция () {var name; this.setName = функциясы (newName) {name = newName;}; бұл. $ get = function () {return new function () {this.sayHi = function) () {console.log («Сәлем» + аты;};};};}); mod.config (функция (HelloerProvider) {HelloerProvider.setName («Джон»);});
        

Сілтемені үйге соңғы рет жеткізу үшін, мында көрсетілген жұмыс, құндылықтар мен қызмет көрсету бөлімдері көрсетілген провайдердің суреті:


жауап 2:

Ішінде, AngularJS қызмет көрсету нысанын жасау үшін Factory және Factory объектісін құру үшін Провайдер қолданады.

Зауыт жасайды

  1. Нысан / дананы жасау Жасалған нысанды / дананы құрастырыңыз / баптандырыңыз, жасалған объект / дананы турнирлеңіз

Мәтінмәнді белгілеу үшін бұрыштық фабриканы абстрактылы зауыттық дизайн үлгісі ретінде қарастырыңыз. AngularJS зауыттық әдісті қолдана отырып, таңдаған объектіңізді жасауға мүмкіндік береді. Сіз жасаған нысанды қолданбаңыз оны қызмет ретінде пайдалана алатындай етіп қайтарасыз.

Келесі мысалда сіз екі төлем шлюзінің біреуін, кодты / кітапхананы пайдалана отырып таңдай аласыз. Зауыттық әдісіңіз Paypal немесе Stripe нысанын жасауды шешеді. Бұл реферат фабрикасына өте ұқсас. PaymentService пайдаланушылары төлем шлюзі үшін қандай қызмет қолданылатындығын білмейді.

var myModule = бұрыш.module ('myModule', []); myModule.constant («PaymentGatewayName», «Жолақ»); // немесе «Paypal» myModule.factory ('paymentService', функциясы (PaymentGatewayName) {var payService; // сіз бизнес талаптары негізінде қай объектіні құру керектігін шешесіз. // StripeGateway және PaypalGateway - бұл JavaScriptGayGatewayName == «сыныптары») Жолақ «) {payService = жаңа StripeGateway (); // жолақты шлюзді инициализациялауға арналған арнайы код} else (PaymentGatewayName == «Paypal») {paymentService = жаңа PaypalGateway (); // PayPal-ді баптандыруға арналған арнайы код} //Service return payService төлемін инициализациялауға арналған арнайы код;});

Егер қызметтік код осылай көрінсе, «this» кілт сөзіне назар аударыңыз. Бұл Angular Core сіз үшін нысанды әлдеқашан жасағанын және енді нысанды құруды бақыламайтындығын білдіреді.

var myModule = бұрыш.module ('myModule', []); myModule.service ('Кэш', функция () {var localVariable = «»; // бұны сырттан шақыруға болмайды. = функция (кілт, мән) {...} this.get = функция (алу) {қайтару ...}});

жауап 3:

AngularJS-тегі үлкен сұрақ: Қызмет провайдері / провайдері. Мен не пайдалануым керек

Интернетте тақырыпты талқылайтын сансыз ресурстар бар. Бұл сұрақ әр апта сайын немесе одан да көп түрлі арналарда пайда болады, және StackOverflow-дағы алғашқы он жауапты оқығаннан кейін де бұл әлі де айқын емес.

Егер сіз олар ұқсас деп ойласаңыз, сіз дұрыс айтасыз. Олар өте ұқсас. Шындығында, олардың бәрі бірдей. Олардың барлығы провайдерлер.

Толық мақаланы оқып шығыңыз -> AngularJS: Қызмет фабрикасы / с провайдері - Сұхбатты 15 минут ішінде дайындаңыз.