如来神掌 - 玩转 AngualrJS 的依赖注入
先了解依赖首先我们要了解什么是依赖;举个例子吧,比如你玩撸啊撸,你看到别人在玩小提莫,你觉得挺好玩,也想玩这个英雄,那么你就要去商店把这个英雄买下来,然后才可以使用这个英雄,拥有这个英雄就是你的依赖;简单的说,依赖就是你达到某个目的的必要条件。 依赖注入是一种软件的设计模式,它允许你移除软件组件之间的硬编码方式,替代的是通过依赖注入制造低耦合的组件不论是在编译阶段还是在运行阶段。 AngularJS有一个内在的依赖注入机制,使用AngularJS,你可以把你的App分成许多个可以重复使用的组件,当需要这些组件的时候,可以通过依赖注入把这些组件注入到你的App中去。 获得对依赖的控制权通常一个对象有三种方法可以获得对其依赖的控制权
AngularJS依赖注入的方法1. 通过函数的参数进行推断式注入声明如果没有明确的声明, 下面是代码示例: HTML代码: html<div ng-app> <div ng-controller="MyController"> <p ng-cloak>{{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}</p> </div> </div> JS代码: javascriptfunction MyController($scope,$timeout) { var updateTime = function () { $scope.clock = { time: new Date() }; $timeout(function () { $scope.clock.time = new Date(); updateTime(); },1000); } updateTime(); } Online Code Part1 对上面代码的解释: 我们通过上面的JS代码在HTML页面中创建了一个可以自动更新的时间, 我们先不去关心如何实现时间更新的,先看看我们是如何进行依赖注入的;我们在 需要注意的地方:
2. 显式的注入声明
下面是代码示例: HTML代码: html<div ng-app> <div ng-controller="MyController"> <p ng-cloak>{{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}</p> </div> </div> JS代码: javascriptfunction MyController(s,t) { var updateTime = function () { s.clock = { time: new Date() }; t(function () { s.clock.time = new Date(); updateTime(); },1000); } updateTime(); } MyController["$inject"] = ["$scope","$timeout"]; Online Code Part2 对上面代码的解释: 我们给我们的函数设置的参数名称分别是 需要注意的地方
上面的JS代码还有一种写法如下所示: JS代码: javascriptvar MyControllerFactory = function MyController(s,1000); } updateTime(); } MyControllerFactory.$inject = ["$scope","$timeout"]; 注意HTML代码中的 Online Code Part3 行内注入声明
下面是代码示例: HTML代码: html<div ng-app="MyApp"> <div ng-controller="MyController"> <p ng-cloak>{{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}</p> </div> </div> JS代码: javascriptangular.module("MyApp",[]) .controller("MyController",["$scope","$timeout",function (s,1000); } updateTime(); }]); Online Code Part4 需要注意的地方,行内声明的方式允许我们直接传入一个参数数组,而不是一个函数。数组的元素是字符串,它们代表的是可以被注入到对象中的依赖名字,最后一个参数就是依赖注入的目标函数对象本身。 到这里已经把 还有如果你觉得我上面所说的有些地方是不对的,还望指出来,我们一起进步^_^ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |