AngularJS ng依赖注入的三种方式

喜欢ヅ旅行 2022-06-10 20:55 192阅读 0赞

1.内联式注入(最基本的方式)

<!DOCTYPE html>
    <html ng-app="MyModule">
    <head>
    <title>最基本的依赖注入方式</title>
    <meta charset="utf-8"/> 
    <script src="../Script/angular.min.js" type="text/javascript"></script>
    <script src="base.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
    <div>
      <div ng-controller="MyCtrl" style="text-align: c">
         <span style="font-size: 20px;">{
       {gameName}}</span>
      </div>
    </div>
    </body>
    </html>

//最基本的依赖注入方式
    var MyModule = angular.module("MyModule",[]);
    MyModule.controller('MyCtrl',['$scope',
    	function($scope){             //可以修改参数，如$scope1,但下面必须同时改
          $scope.gameName = "海哥帅！"
    	}
    ]);

2.推断型注入

//推断型注入方式:函数参数的名称必须要和被注入的对象相同
    var MyModule = angular.module("MyModule",[]);
    
    var MyCtrl = function($scope){
    	$scope.gameName = "海哥帅！";
    }
    
    MyModule.controller('MyCtrl',MyCtrl);

3.声明式注入

//声明式注入
    var MyModule = angular.module("MyModule",[]);
    
    var MyCtrl = function(thisISMyName){    //参数名称可以随意变化
    	thisISMyName.gameName = "海哥帅！";
    }
    
    MyCtrl.$inject = ['$scope'];       //加载模块
    
    MyModule.controller('MyCtrl',MyCtrl);

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关【Spring依赖注入的三种方式】

Spring 依赖注入（Dependency Injection，DI）的实现方式有以下三种：基于构造函数的依赖注入：通过构造函数传入依赖对象，实现依赖注入。该方式

深碍√TFBOYSˉ_/ 2023年10月04日 22:44/ 0 赞/ 61 阅读

相关深入浅出spring IOC中三种依赖注入方式

spring的核心思想是IOC和AOP，IOC-控制反转，是一个重要的面向对象编程的法则来消减计算机程序的耦合问题，控制反转一般分为两种类型，依赖注入和依赖查找，依赖什么？为什

柔情只为你懂/ 2022年09月25日 01:21/ 0 赞/ 197 阅读

相关【Spring学习笔记三】-依赖注入的两种方式

依赖注入通常有两种方式：设值注入和构造注入。设值注入，即Spring容器使用属性的setter方法来注入被依赖的实例。构造注入，即Spring容器使用构造器来注入被依赖

迷南。/ 2022年07月19日 11:59/ 0 赞/ 304 阅读

相关 AngularJs依赖注入

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

电玩女神/ 2022年07月12日 07:09/ 0 赞/ 192 阅读

相关 AngularJS ng依赖注入的三种方式

1.内联式注入(最基本的方式) <!DOCTYPE html> <html ng-app="MyModule"> <head> <title

喜欢ヅ旅行/ 2022年06月10日 20:55/ 0 赞/ 193 阅读

相关 Angularjs 依赖注入

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入： • value • factory • service • provider

电玩女神/ 2022年05月21日 05:10/ 0 赞/ 262 阅读

相关 AngularJs - 依赖注入

依赖注入，是一种软件设计模式，应DIP依赖倒置原则，描述组件之间高层组件不应该依赖于底层组件。依赖注入简化了Angular解析模块/组件之间依赖的过程。在AngularJS中，

深藏阁楼爱情的钟/ 2022年05月16日 04:47/ 0 赞/ 217 阅读

相关 [AngularJS]依赖注入

JS中的依赖注入，举个荔枝: <button id="btn">click me</button> <script> window.onload

本是古典何须时尚/ 2022年05月08日 03:26/ 0 赞/ 265 阅读

相关三种依赖注入的方式

依赖注入(DI)是控制反转(IoC)的一种方式。 ![1415873-20190617152335658-1740051719.png][] ![1415873

旧城等待，/ 2021年12月20日 07:23/ 0 赞/ 417 阅读

相关 Spring依赖注入（DI）的三种方式

Spring依赖注入（DI）的三种方式，分别为： 1．接口注入 2． Setter方法注入 3．构造方法注入下面介绍一下这三种依赖注入在Spring中

「爱情、让人受尽委屈。」/ 2021年09月14日 00:20/ 0 赞/ 567 阅读