angular_$inject
Angular Inject
2023-09-11 14:17:26 时间
<!DOCTYPE HTML> <html lang="zh-cn" ng-app="MainApp"> <head> <meta charset="UTF-8"> <title>explicit-inject-service</title> </head> <body> <div ng-controller="MyController"> <input type="text" ng-model="msg"/> <button ng-click="saveMsg()">save msg</button> <ul> <li ng-repeat="msg in msgs">{{msg}}</li> </ul> </div>> <script src="js/angular.js" type="text/javascript"></script> <script type="text/javascript"> var app = angular.module("MainApp",[],function($provide) { $provide.factory("notify",["$window","$timeout",function(win,timeout) { //这里是服务依赖服务,通过这种显式的方式,参数名可以乱填,但顺序要对应 var msgs = []; return function(msg) { msgs.push(msg); if(msgs.length==3) { timeout(function() { win.alert(msgs.join("\n")); msgs = []; },10); } } }]); }); function MyController($s,$noti) { //这里是controller依赖服务,通过这种显式的方式,参数名可以乱填,但顺序要对应 $s.msgs = []; $s.saveMsg = function() { this.msgs.push(this.msg); $noti(this.msg); this.msg = ""; }; } //这个就是让controller里面的$s指向$scope,$noti指向notify这个服务 MyController.$inject = ['$scope','notify']; //有显示依赖和隐示依赖 </script> </body> </html>
相关文章
- [Angular 9] Improved Dependency Injection with the new providedIn scopes 'any' and 'platform'
- [Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [Angular 2] ROUTING IN ANGULAR 2 REVISITED
- [Angular 14] Inject() function
- [Angular] Do relative routing inside component
- [Angular] Tree shakable provider
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [Angular 2] ROUTING IN ANGULAR 2 REVISITED
- [Angular 2] Using the @Inject decorator
- [Angular 2] 4. Inject service into component
- Angular 项目中 angular.json builder 字段的可选项介绍
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- Angular @Inject 注解的实际应用例子和工作原理浅析
- 关于 Angular 项目类型为 library 的工程使用 tsconfig.json 的问题
- 如何创建 Angular 库并在 Angular 应用里调用
- Angular jasmine.expect单步调试
- Angular rxjs fromEvent使用的一个例子
- Angular应用里的@Input和@Output注解使用方法介绍
- Angular里的structural directive的一个例子
- 理论+案例,带你掌握Angular依赖注入模式的应用