angularjs dependency injection

http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Dependency Injection AngularJS Dependency Injection mơ hình thiết kế phần mềm mà thành phần đưa từ phần phụ thuộc - dependencies thay cho việc hard coding chúng thành phần Điều làm cho cách thành phần phụ thuộc phần cấu hình Nó giúp việc làm có thành phần có tính tái sử dụng cao, dễ bảo dưỡng kiểm thử AngularJS cung cấp kỹ thuật Dependency Injection, cho phép thành phần lõi AngularJS inject tới thành phần phụ thuộc khác  value  factory  service  provider  constant value - giá trị đối tượng JavaScript đơn giản sử dụng để thiết lập giá trị tới controller bước cấu hình //define a module var mainApp = angular.module("mainApp", []); //create a value object as "defaultInput" and pass it a data mainApp.value("defaultInput", 5); //inject the value in the controller using its name "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); http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com } }); factory factory hàm để sử dụng trả giá trị Nó tạo giá trị theo yêu cầu service controller yêu cầu Ta thường dùng hàm factory để tính trả giá trị //define a module var mainApp = angular.module("mainApp", []); //create a factory "MathService" which provides a method multiply to return multiplication of two numbers mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); //inject the factory "MathService" in a service to utilize the multiply method of factory mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); service service đối tượng singleton javascript chứa tập hàm cho mục đích cụ thể Service định nghĩa sử dụng hàm service() sau inject đến controller //define a module var mainApp = angular.module("mainApp", []); //create a service which defines a method square to return square of a number http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); //inject the service "CalcService" into the controller 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); } }); provider provider sử dụng nội AngularJS để tạo service, factory … trình cài đặt (quá trình mà AngularJS khởi tạo nó) Dưới mơ tả script tạo MathService tạo trước Provider phương thức factory đặc biệt với phương thức get() trả giá trị value/service/factory //define a module var mainApp = angular.module("mainApp", []); //create a service using provider which defines a method square to return square of a number mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com }); }); constant constants sử dụng thể thiết lập giá trị q trình cài đặc giá trị khơng thiết lập q trình cài đặt mainApp.constant("configParam", "constant value"); Ví dụ Dưới ví dụ cho phần diễn giải bên trên: testAngularJS.jsp AngularJS Dependency Injection

AngularJS Sample Application

Enter a number: X2

Result: {{result}}

var mainApp = angular.module("mainApp", []); mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com 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); } }); http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Kết Mở trang textAngularJS.jsp trình duyệt web xem kết http://vietjack.com/ Trang chia sẻ học online miễn phí Page ... Ví dụ Dưới ví dụ cho phần diễn giải bên trên: testAngularJS.jsp AngularJS Dependency Injection< /title>

AngularJS Sample Application