angularjs——依赖注入

angularjs把所有的功能组件都以依赖注入的方式组织起来,所有的组件必须通过容器(注入器)才能相互访问,从而来解耦 ;
1、注入器存储了所有的配方(名称+类构造函数):angualrjs启动时,组件(Provider)首先通过名称在注入器内注册;
2、组件要求提供一个$get函数(类工厂),injector通过调用该函数,获得组件的实例

<html>
<head>
    <title>修改数据</title>
    <meta charset=‘utf-8‘>
    <script type="text/javascript" src=‘..\bower_components\angularjs\angular.min.js‘>
    </script>
    <script type="text/javascript">
        angular.module("stater",[])
        .provider("echello",function(){
            //提供一个类工厂
            this.$get = function(){
                return "hello word";
            }
        })

        angular.element(document).ready(function(){
            //创建一个注入器,调用类工厂函数,获得实例
            //invoke()直接调用一个函数体,并通过函数参数名注入或者依赖数组注入的方式注入所依赖的服务对象;
            // 1.参数名注入
            angular.injector(["ng","stater"]).invoke(function(echello){
                var e = document.querySelector("#logger");
                angular.element(e).text(echello)
            })
            // 2.依赖数组注入,这个时候无论填入什么参数,对结果都没用影响
            angular.injector(["ng","stater"]).invoke(["echello",function(v){
                var e = document.querySelector("#logger");
                angular.element(e).text(v)
            }])
        })

    </script>
<body ng-app="stater">
    <!-- angularjs把所有的功能组件都以依赖注入的方式组织起来,所有的组件必须通过容器(注入器)才能相互访问,从而来解耦 ;
    1、注入器存储了所有的配方(名称+类构造函数):angualrjs启动时,组件(Provider)首先通过名称在注入器内注册;
    2、组件要求提供一个$get函数(类工厂),injector通过调用该函数,获得组件的实例
    -->
    <div id="logger"></div>

</body>
</html>
时间: 2024-11-06 10:36:58

angularjs——依赖注入的相关文章

AngularJS 依赖注入

什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则.与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统找到依赖 一句话 --- 没事你不要来找我,有事我会去找你. AngularJS

AngularJS依赖注入

<html> <head> <meta charset="utf-8"> <title>AngularJS 依赖注入</title> </head> <body> <h2>AngularJS 简单应用</h2> <div ng-app = "mainApp" ng-controller = "CalcController"> &

AngularJS开发指南10:AngularJS依赖注入的详解

依赖注入是一种软件设计模式,用来处理代码的依赖关系. 一般来说有三种方法让函数获得它需要的依赖: 它的依赖是能被创建的,一般用new操作符就行. 能够通过全局变量查找依赖. 依赖能在需要时被导入. 前两种方式都不是很好,因为它们需要对依赖硬编码,使得修改依赖的时候变得困难.特别是在测试的时候不好办,因为对某个部分进行孤立的测试常常需要模拟它的依赖. 第三种方式是最好的,因为它不必在组件中去主动寻找和获取依赖,而是由外界将依赖传入. 举个例子: function SomeClass(greeter

Angularjs - 依赖注入机制,多方协助共同开发

http://www.imooc.com/video/2862 在Angularjs中,ng-app只能出现一次.也就是说只能加载一次模块.当模块中的控制器成千上万时,就需要分成多个开发员同步开发了. 这时为了能达到效率不可能让多个开发人员更改同一个js文件.需要分成多个模块多个js文件开发.然后有两种方式合并, 1.使用grunt合并功能.甚至手动合并 2.使用angularjs的依赖注入机制,事实上就是定义模块时的第二个参数数组[]中,除了正常的组件名(如ui.router),还可以加入其他

(五)Angularjs - 依赖注入

如何找到API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. 比如,AngularJS暴露了一个全局对象:angular,也对ajax调用进行封装提供了一个 $http对象,但是,当访问angular.$http,却找不到 依赖注入/DI 事实上,AngularJS把所有的功能组件都以依赖注入的方式组织起来,在依赖注入的模式下,所有的组件必须通过容器才能相互访问,这导致了在AngularJS中, 你必须通过一个

AngularJs依赖注入写法笔记

下面两种依赖注入写法等价: [第一种] app.controller('lrNListingController', function (Notifier, Private, timefilter, config) { // const Notifier = $injector.get('Notifier'); // const Private = $injector.get('Private'); // const timefilter = $injector.get('timefilter'

AngularJS(15)-依赖注入

AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则.与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统找到依赖 一句话 --- 没事你不要来找我,有事我会

模拟AngularJS之依赖注入

一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的. 下面,我们看看AngularJS中常用的实现方式. 方法一:推断式注入声明,假定参数名称就是依赖的名称.因此,它会在内部调用函数对象的toString()方法,分析并提取出函数参数列表,然后通过$injector将这些参数注入进对象实例. 如下: //方法一:推断式注入声明,假定参数名称就是依赖

转: 理解AngularJS中的依赖注入

理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Provider服务($provide) $provide服务负责告诉Angular如何创造一个新的可注入的东西:即服务(service).服务会被叫做provider的东西来定 义,你可以使用$provide来创建一个provider.你需要使用$provide中的provider方法来定义一个provi