当前位置: 首页 > Web前端 > HTML

第56-100天AngularJS依赖注入

时间:2023-03-28 14:25:27 HTML

(一)需求当被问到AngularJS依赖注入的原理时,发现自己没有掌握好,所以总结记录一下。(二)依赖注入简介1、为什么会有依赖注入?降低代码之间的耦合度,使代码具有很强的可扩展性。该模板功能强大且具有声明性,并带有丰富的Angular说明;是一个比较完善的前端MVC框架,包括模板、数据双向绑定、路由、模块化、服务、过滤器、依赖注入等功能;DependencyInjection简化了处理组件之间依赖关系(即解决依赖关系)的过程。如果没有依赖注入,您将不得不以某种方式自己查找$scope,可能使用全局变量。这可行,但它不像AngularJS的依赖注入技术那么简单。在开发中使用依赖注入的主要好处是AngularJS负责管理组件并在需要时将它们提供给函数。依赖注入还可以为测试带来好处,因为它允许您使用假的或模拟的对象而不是真实的组件,从而使开发人员可以专注于程序的特定部分。2.定义依赖注入(简称DI)是一种软件设计模式,其中一个或多个依赖项(或服务)被注入(或通过引用传递)到一个独立的对象(或客户端)中,然后成为该客户端状态的一部分。这种模式将客户端自身行为的创建分离出来,使得程序设计松耦合,遵循依赖倒置和单一职责的原则。与服务定位器模式形成鲜明对比的是,它可以让客户端了解客户端是如何使用系统来寻找依赖关系的3.依赖注解是如何使用的?什么时候使用它?可以用于开发,尤其是模块多的页面。为了实现mvc的思想,把每一部分都抽出来写成一个angularjs依赖的组件,使用的时候可以直接拿来使用。当你的项目需要移交或者修改的时候,你可以直接修改组件的内容来依赖注解。三种使用方式(1)数组注解someModule.controller('MyController',['$scope','greeter',function($scope,greeter){}]);(2)添加$inject属性varMyController=function($scope,greeter){}MyController.$inject=['$scope','greeter'];someModule.controller('MyController',MyController);(3)隐式声明someModule.controller('MyController',function($scope,greeter){});在场景控制器中使用DIsomeModule.controller('MyController',['$scope','dep1','dep2',function($scope,dep1,dep2){...$scope.aMethod=function(){...}...}]);在工厂方法中使用DIangular.module('myModule',[]).config(['depProvider',function(depProvider){...}]).factory('serviceId',['depService',function(depService){...}]).directive('directiveName',['depService',function(depService){...}]).filter('filterName',['depService',function(depService){...}]).run(['depService',function(depService){...}]);参考链接1、知乎https://zhuanlan.zhihu.com/p/...写在最后的话1.我建了一个前端学习群。有兴趣可以加我微信:learningisconnecting2。在学习的路上,经常偷懒《有想学技术需要监督的同学嘛~》https://mp.weixin.qq.com/s/Fy...三、分享成长与认知方法欢迎关注我的公众号:国行聊成长并分享我每周学到的??成长/认知方法