8、自定义依赖注入

最新推荐文章于 2022-06-25 20:47:54 发布

4911071420313

最新推荐文章于 2022-06-25 20:47:54 发布

阅读量184

点赞数

分类专栏： angular_智能社

angular_智能社专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了AngularJS中的依赖注入机制，包括工厂方法、提供者、服务、常量及变量等不同类型的依赖创建方式，并解释了如何通过装饰器来修改原有的依赖。此外，还展示了依赖在多个控制器间的数据共享特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、注意

1）angularJS里用驼峰 aBc,
则
html 里面就得用中划线a-bc
2）模块依赖
angular.module(‘模块名字’,[‘依赖模块名字1’,’依赖模块名字2’])；// 同名,后面的模块会覆盖前面的模块

2、自定义依赖注入–乱、多

创造依赖

1）最简单–factory

app.xxx('名字',function(){
});
app.factory('fac',function(){
    return 内容;
})

2）强大（可配置的）–provider

app.provider('名字',function(){
    alert("provider执行了"); // 仅执行一次
    this.$get = function(){
        alert("$get执行了"); // 仅执行一次
    };
})

3）服务–service

app.service('名字',function(){
    alert('service 执行了'); // 仅执行一次
    this.xxx;
    this.yyy;
})

4）constant–常量（不可修改，这里指不可decorator）

app.constant('名字',数据);
app.constant('sum',30);
app.constant('fn',function(){
});
app.constant('json',{
    a:'aaa',
    b:'bbb'
})

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module('test',[]);
        app.constant("user_sum",function(){alert(30)});
        app.controller('con1',function($scope,user_sum){
            user_sum()
        })
    </script>
    </head>
<body>

<div ng-app="test" ng-controller="con1">
</div>
</body>
</html>

不可修改示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module('test',[]);
        app.constant("user_sum",function(){alert(30)});
        app.controller('con1',function($scope,user_sum){
            user_sum = 30;
            alert(user_sum); // 30 
            $scope.xx = function(){alert(user_sum)}
        })
        app.controller('con2',function($scope,user_sum){
            alert(user_sum); // function(){alert(30)}
            $scope.yy = function(){alert(user_sum)}
        })
    </script>
    </head>
<body>
<div ng-app="test" ng-controller="con1" >
    <input type="button" value="con1Click" ng-click="xx();"/>
    <div ng-controller="con2">
        <input type="button" value="con2Click" ng-click="yy();"/>
    </div>
</div>
</body>
</html>

5）value–变量

app.value('名字',数据);
app.value('sum',30);
app.value('fn',function(){
});
app.value('json',{
    a:'aaa',
    b:'bbb'
})

3、如何修改依赖

会修改原来的依赖，原来的依赖就变了

// decorator 只执行一次
app.decorator('要修改依赖的名称',function($delegate){
    // $delegate 代表了依赖的东西
    return 修改后的依赖; // return $delegate;
})

app.value('user_sum',30);
app.decorator('user_sum',function($delegate){
    return $delegate + 1; // user_sum 的值会变为31
})