خدمة AngularJS (الخدمة)
في AngularJS ، يمكنك إنشاء خدماتك الخاصة أو استخدام الخدمات المدمجة.
ما هي الخدمة؟
في AngularJS ، الخدمة هي وظيفة أو كائن يمكن استخدامه في تطبيق AngularJS.
AngularJS لديها أكثر من 30 خدمة مدمجة.
هناك خدمة موقع $ يمكنها إرجاع عنوان عنوان URL للصفحة الحالية.
مثال
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <p> عنوان URL للصفحة الحالي: </p> <h3> {{myurl}} </h3> </viv> <p> تستخدم هذه المثيل خدمة موقع $ المدمجة للحصول على عنوان URL للصفحة الحالية. </p> <script> var app = Angular.module ('myapp' ، []) ؛ app.controller ('myctrl' ، function ($ scope ، $ location) {$ scope.myurl = $ location.absurl () ؛}) ؛ </script> </html>نتائج التشغيل:
عنوان URL في الصفحة الحالية:
http://www.runoob.com/try/try.php؟filename=ry_ng_services
يستخدم هذا المثيل خدمة موقع $ المدمجة للحصول على عنوان URL للصفحة الحالية.
ملاحظة: يتم تمرير خدمة موقع $ كمعلمة في وحدة التحكم. إذا كنت ترغب في استخدامه ، فأنت بحاجة إلى تحديده في وحدة التحكم.
لماذا تستخدم الخدمة؟
$ HTTP هي الخدمة الأكثر استخدامًا في تطبيقات AngularJS. ترسل الخدمة طلبًا إلى الخادم ، ويستجيب التطبيق للبيانات المرسلة بواسطة الخادم.
سوف AngularJS دائما مراقبة التطبيقات والتعامل مع تغييرات الأحداث. يستخدم AngularJS خدمة موقع $ بشكل أفضل من استخدام كائن التوظيف.
خدمة HTTP $
$ HTTP هي الخدمة الأكثر استخدامًا في تطبيقات AngularJS. ترسل الخدمة طلبًا إلى الخادم ، ويستجيب التطبيق للبيانات المرسلة بواسطة الخادم.
مثال
استخدم خدمة HTTP $ لطلب البيانات من الخادم:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <p> مرحبًا: </p> <> {{mywelcome}} <> </fire> <p> معلومات خدمة $ http من الخادم ، ويتم وضع القيمة التي تم إرجاعها في المتغير "myWelcome". </p> <script> var app = Angular.Module ('myapp' ، []) ؛ app.controller ('myctrl' ، function ($ scope ، $ http) {$ http.get ("welcome.htm").نتائج التشغيل:
مرحبًا بالرسالة:
مرحبًا بك في الزيارة
تطلب خدمة $ HTTP معلومات من الخادم ، ويتم وضع القيمة التي تم إرجاعها في المتغير "mywelcome".
ما سبق هو مثيل خدمة HTTP $ بسيط للغاية. لمزيد من تطبيقات خدمة HTTP $ ، يرجى التحقق من البرنامج التعليمي AngularJS HTTP.
خدمة المهلة $
تتوافق خدمة TimularJS $ timeout مع وظيفة نافذة JS.Settimeout.
مثال
سيتم عرض المعلومات في ثانيتين:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <p> يتم عرض المعلومات بعد ثانيتين: </p> <h1> {{myheader}} </h1> </viv> <p> $ accace access تنفذ الوظيفة المحددة بعد عدد ميليسيكوند المحدد. </p> <script> var app = Angular.Module ('myapp' ، []) ؛ app.controller ('myctrl' ، function ($ scope ، $ timeout) {$ scope.myheader = "hello world!" 2000) ؛}) ؛ </script> </body> </html>نتائج التشغيل:
سيتم عرض المعلومات في ثانيتين:
كيف حالك اليوم؟
ينفذ $ timeout Access الوظيفة المحددة بعد العدد المحدد للمللي ثانية.
خدمة الفاصل الزمني $
تتوافق خدمة angularjs $ الفاصلة مع وظيفة js window.setInterval.
مثال
عرض المعلومات كل ثانيتين:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <p> الوقت الحالي هو: </p> <h1> {{thetime}} </h1> </viv> <p> $ الوصول إلى الفاصل الزمني استدعاء دالة أو يحسب تعبيرًا في فترة محددة (بالميليسيكوند). </p> <script> var app = Angular.module ('myapp' ، []) ؛ app.controller ('myctrl' ، function ($ scope ، $ interal) {$ scope.TheTime = new date (). 1000) ؛}) ؛ </script> </body> </html>تأثير الجري:
الآن الوقت هو:
3:41:09 مساءً
وصول الفاصل الزمني $ استدعاء وظيفة أو حساب في فترة محددة (بالمللي ثانية)
إنشاء خدمة مخصصة
يمكنك إنشاء وصول مخصص هذا الرابط إلى الوحدة النمطية الخاصة بك:
قم بإنشاء وصول يدعى Hexafy:
App.Service ('hexafy' ، function () {this.myfunc = function (x) {return x.toString (16) ؛}}) ؛لاستخدام وصول مخصص ، تحتاج إلى إضافته بشكل مستقل عند تحديد المرشح:
مثال
استخدم خدمة مخصصة hexafy لتحويل رقم إلى hexafy:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <p> 255 hexagram هو: </p> <h1> {{Hex}} </h1> </viv> <p> خدمة مخصصة ، تستخدم لتحويل أرقام hexagram: </p> <script> var app = Angular.module ('myapp' ، []) {this.myfunc = function (x) {return x.toString (16) ؛نتائج التشغيل:
النظام السداسي عشري 255 هو:
وما يليها
خدمة مخصصة لتحويل الأرقام السداسية:
في المرشح ، استخدم الخدمات المخصصة
عندما تقوم بإنشاء خدمة مخصصة والاتصال بتطبيقك ، يمكنك استخدامها في وحدات التحكم أو التوجيهات أو المرشحات أو الخدمات الأخرى.
استخدم خدمة Hexafy في المرشح MyFormat:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js المرشحات: <h1> {{255 | myformat}} </h1> </viv> <script> var app = Angular.module ('myapp' ، []) ؛ app.Service ('hexafy' ، function () {this.myfunc = function (x) {return x.toString (16) ؛}}) ؛ Function (x) {return hexafy.myfunc (x) ؛تأثير الجري:
استخدام الخدمات في المرشحات:
وما يليها
عند الحصول على القيم في مجموعة من الكائنات ، يمكنك استخدام المرشحات:
قم بإنشاء خدمة hexafy:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <p> استخدم المرشحات عند الحصول على Array [255 ، 251 ، 200] القيم: </p> <ul> <li ng-repeat = "x in counts"> {{x | MyFormat}} </li> </ul> <p> يستخدم Filter خدمة لتحويل العشرية إلى سداسي عشري. </p> </viv> <script> var app = Angular.Module ('myapp' ، []) ؛ app.Service ('hexafy' ، function () {this.myfunc = function (x) {return x.toString (16) ؛ hexafy.myfunc (x) ؛تأثير الجري:
استخدم المرشحات عند الحصول على قيم Array [255 ، 251 ، 200]:
تستخدم المرشحات الخدمات لتحويل عشري إلى سداسي عشري.
ما سبق هو تجميع المعلومات على خدمة AngularJS. سوف نستمر في إضافته لاحقًا. للأصدقاء المحتاجين ، يرجى الرجوع إليها.