天天看點

AngularJS ng依賴注入的三種方式

 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" target="_blank" rel="external nofollow" >
</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);