تعليمات مخصصة لـ AngularJS خدمات AngularJS (Service)

حقن الاعتماد لـ AngularJS

الاعتماد على التحقق هو تصميم برمجي حيث يقدم المكونات التابعة، وليس الترميز القاطع للمكونات. يجعل المكونات لا تحتاج إلى البحث عن التابعة، ويجعل التابعة قابلة للتكوين. كما يساعد في جعل المكونات قابلة للتكرار، وقابلة للصيانة وقابلة للاختبار.

يقدم AngularJS أحدث آلية للاعتماد على التحقق. يقدم المكونات الأساسية التالية، التي يمكن أن يتم تثبيتها كاعتمادات.

قيمة
مصنع
خدمة
مقدم الخدمات
ثابت

Value - القيمة

القيمة (Value) هي عنصر بسيط من JavaScript، في مرحلة التكوين (مرحلة التكوين هي عند بدء AngularJS)، يجب إرسال القيمة إلى المحكم.

//تحديد النموذج
var mainApp = angular.module("mainApp", []);
// إنشاء عنصر قيمة كـ "defaultInput" وإرسال بيانات إليه. "defaultInput" وإرسال بيانات إليه.
mainApp.value("defaultInput", 5);
...
// إدراج القيمة باستخدام الاسم "defaultInput" في المحكم "defaultInput"
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
　　　$scope.number = defaultInput;
　　　$scope.result = CalcService.square($scope.number);
　　　
　　　$scope.square = function() {
　　　　　　$scope.result = CalcService.square($scope.number);
　　　}
});

Factory - المصنع

المصنع (Factory) هو دالة تستخدم لتحقيق القيم. يتم إنشاء القيمة بناءً على الحاجة عند الحاجة من قبل الخدمة أو المحكم. عادةً يستخدم دالة المصنع لحساب القيمة وإرجاعها.

//تحديد النموذج
var mainApp = angular.module("mainApp", []);
// إنشاء مصنع "MathService" يقدم طريقة ضرب لتقديم ضرب الأرقام.
mainApp.factory('MathService', function() {
　　　var factory = {};
　　　
　　　factory.multiply = function(a, b) {
　　　　　　return a * b
　　　}
　　　return factory;
});　
// إدراج مصنع "MathService" في الخدمة للاستفادة من طريقة ضرب المصنع.
mainApp.service('CalcService', function(MathService) {
　　　this.square = function(a) {
　　　　　　return MathService.multiply(a, a);
　　　}
});
...

Service - الخدمة

الخدمة (Service) هي عنصر JavaScript التابع لمرة واحدة يحتوي على مجموعة من الوظائف لتنفيذ بعض المهام. باستخدامservice()يُعرف الخدمة ثم يتم إدراجها في المحكم.

//تحديد النموذج
var mainApp = angular.module("mainApp", []);
...
// إنشاء خدمة تعريف طريقة مربعة لتقديم مربعات الأرقام.
mainApp.service('CalcService', function(MathService) {
　　　this.square = function(a) {
　　　　　　return MathService.multiply(a, a);　
　　　}
});
//إدراج خدمة "CalcService" في التحكم "CalcService"
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
　　　$scope.number = defaultInput;
　　　$scope.result = CalcService.square($scope.number);
　　　
　　　$scope.square = function() {
　　　　　　$scope.result = CalcService.square($scope.number);
　　　}
});

مقدم الخدمات

يستخدم AngularJS مقدمي الخدمات لإنشاء الخدمات، والوحدات، في مرحلة التكوين. يمكن استخدام هذا النص لتأسيس MathService التي أنشأنا من قبل. Provider هو طريقة خاصة لـ factory،get()يستخدم الطريقة لتحويل value/service/factory.

//تحديد النموذج
var mainApp = angular.module("mainApp", []);
...
//استخدام مقدم الخدمات لإنشاء خدمة، حيث يحدد المقدم طريقة مربعة لتقديم مربعات الأرقام.
mainApp.config(function($provide) {
　　　$provide.provider('MathService', function() {
　　　　　　this.$get = function() {
　　　　　　　　　var factory = {};　　
　　　　　　　　　
　　　　　　　　　factory.multiply = function(a, b) {
　　　　　　　　　　　　return a * b;　
　　　　　　　　　}
　　　　　　　　　return factory;
　　　　　　});
　　　});
});

القيمة الثابتة - القيمة الثابتة

تستخدم القيم الثابتة لتحويل القيم في مرحلة التكوين، حيث لا يمكن استخدام القيم.

mainApp.constant("configParam", "قيمة ثابتة");

مثال على الإنترنت

في هذا المثال يظهر استخدام جميع الأوامر المذكورة أعلاه -

testAngularJS.htm

مثال

<html>
　　　<head>
　　　　　　<title>إدراك التبعية بـ AngularJS</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>مثال على تطبيق إدراك التبعية بـ AngularJS</h2>
　　　　　　
　　　　　　<div ng-app="mainApp" ng-controller="CalcController">
　　　　　　　　　<p>ادخل عدد: <input type="number" ng-model="number" /></p>
　　　　　　　　　<button ng-click="square()">X<sup>2</sup></button>
　　　　　　　　　<p>نتيجة: {{result}}</p>
　　　　　　</div>
　　　　　　
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.config(function($provide) {
　　　　　　　　　　　　$provide.provider('MathService', function() {
　　　　　　　　　　　　　　　this.$get = function() {
　　　　　　　　　　　　　　　　　　var factory = {};
　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　factory.multiply = function(a, b) {
　　　　　　　　　　　　　　　　　　　　　return a * b;
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　return factory;
　　　　　　　　　　　　　　　});
　　　　　　　　　　　　});
　　　　　　　　　});
　　　　　　　　　mainApp.value("defaultInput", 5);
　　　　　　　　　
　　　　　　　　　mainApp.factory('MathService', function() {
　　　　　　　　　　　　var factory = {};
　　　　　　　　　　　　
　　　　　　　　　　　　factory.multiply = function(a, b) {
　　　　　　　　　　　　　　　return a * b;
　　　　　　　　　　　　}
　　　　　　　　　　　　return factory;
　　　　　　　　　});
　　　　　　　　　mainApp.service('CalcService', function(MathService) {
　　　　　　　　　　　　this.square = function(a) {
　　　　　　　　　　　　　　　return MathService.multiply(a, a);
　　　　　　　　　　　　}
　　　　　　　　　});
　　　　　　　　　mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
　　　　　　　　　　　　$scope.number = defaultInput;
　　　　　　　　　　　　$scope.result = CalcService.square($scope.number);
　　　　　　　　　　　　$scope.square = function() {
　　　　　　　　　　　　　　　$scope.result = CalcService.square($scope.number);
　　　　　　　　　　　　}
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

اختبار لرؤية‹/›

النتائج الصادرة

يمكنك أيضًا فتحه في متصفح الويب.testAngularJS.htmوتعرف النتائج.