AngularJs学习之路（七）

最新推荐文章于 2019-01-18 17:58:00 发布

Ginoy

最新推荐文章于 2019-01-18 17:58:00 发布

阅读量452

点赞数

分类专栏： [老达笔记]AngularJS AngularJS入门

本文链接：https://blog.csdn.net/yl3395017/article/details/77187999

版权

[老达笔记]AngularJS 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

AngularJS入门

11 篇文章 3 订阅

订阅专栏

AngularJS 依赖注入

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

value
factory
service
provider
constant

注入顺序 factory 注入 service ，service注入controller

DEMO1

var mainApp = angular.module("mainApp", []);
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);
    }
});

DEMO2

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.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);
    }
});