angularJs依赖注入

最新推荐文章于 2018-07-06 23:38:53 发布

rookieForAndroid

最新推荐文章于 2018-07-06 23:38:53 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/yujie0514/article/details/78534445

版权

一、

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="libs/angular.min.js"></script>
	<script>
	//声明模块
	var myapp= angular.module("myApp",[]); //参数一:自定义的模块名参数二:["mysqlconn"];//借助其它模块的名字 mysqlconn
	//推断式注入法 $scope作用域对象是控制器和视图之间一个纽带
	myapp.controller("democ",["$scope",function(abc){ //依赖注入: 没事你不要来找我，有事我会去找你。
	//使用$scope 对象1>创建方法
	abc.sayHello=function(){
	alert("你好");
	}

	//使用$scope 对象 2>创建属性

	}]);

	</script>
	</head>
	<body ng-app="myApp" ng-controller="democ">
	<button ng-click="sayHello()">点击</button>
	</body>
	</html>

二、

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="libs/angular.min.js">
	</script>
	<script>
	*/AngularJS会假定参数名称就是依赖的名称/*

	angular.module("myApp",[]).controller("demoC",function($scope){ //创建控制器时,必须要有$scope--->控制器和视图传递数据
	//依赖$scope
	$scope.sayHello=function (c){ //定义函数的时候, 括号中都是形参
	alert("你好"+c);
	}
	});
	</script>
	</head>
	<body ng-app="myApp" ng-controller="demoC">
	<button ng-click="sayHello('pig')">点击</button>
	</body>
	</html>

三、

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="libs/angular.min.js"></script>
	<script>
	angular.module("myApp",[])
	.factory("gaoyn_greeter",function(){

	var factory={}; //

	factory.sayHello=function(){

	alert("你好factory");
	}

	factory.saybye=function(){

	alert("再见factory");
	}

	return factory;

	})
	//使用 angular.module("myApp",[]).controller
	.controller("democ",["$scope","gaoyn_greeter",function($scope,gaoyn_greeter){
	$scope.hi=function(){
	greeter.sayHello();

	}
	}])
	.controller("demoB",function($scope,gaoyn_greeter){
	$scope.hello=function(){
	gaoyn_greeter.sayHello();
	}
	})

	;

	</script>
	</head>
	<body ng-app="myApp" ng-controller="democ">
	<button ng-click="hi()">问好</button>
	<button ng-controller="demoB" ng-click="hello()">hello</button>

	</body>
	</html>

四、

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="libs/angular.min.js"></script>
	<script>
	angular.module("myApp",[])
	.service("gaoyn_greeter",function(){ //使用service创建一个服务

	this.sayHello=function(){
	alert("你好factory");
	}

	this.saybye=function(){
	alert("再见");
	}
	//可以不用return 对象出去,直接使用Service对象--->自动create一个对象出来

	})
	//使用 angular.module("myApp",[]).controller
	.controller("democ",["$scope","gaoyn_greeter",function($scope,gaoyn_greeter){
	$scope.hi=function(){
	gaoyn_greeter.sayHello();

	}
	}])
	.controller("demoB",function($scope,gaoyn_greeter){
	$scope.hello=function(){
	gaoyn_greeter.saybye();
	}
	})

	;

	</script>
	</head>
	<body ng-app="myApp" ng-controller="democ">
	<button ng-click="hi()">问好</button>
	<button ng-controller="demoB" ng-click="hello()">再见</button>

	</body>
	</html>

五、

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="libs/angular.min.js"></script>
	<script>
	//依赖注入 --- 通过1>factory创建服务 2>service创建的服务 3>provider创建的服务 --->服务可以被注入到控制器中使用
	//provider创建的服务--->在控制器使用之前,可以对服务做些用户名的默认值
	angular.module("myApp",[])
	.provider("wenhao",function(){ //provider创建服务的时候必须含有$get------greet服务名---->同时向系统注册greetProvider(在使用服务之前,可以为服务做些初始化)
	var uname="客人";
	//提供set方法来来个uname的值
	return{
	setName:function(vname){
	uname=vname;
	},
	//定义局部变量
	//注入provider服务时,底层会寻找$get,寻找不到会报错
	$get: function(){
	return{
	sayHello:function(){
	alert(uname+"你好");
	}
	}
	}
	}
	})
	//配置服务的初始化参数
	.config(function(wenhaoProvider){
	wenhaoProvider.setName("老师");

	})
	.controller("democ",["$scope","wenhao",function($scope,wenhao){
	$scope.say=function(){
	wenhao.sayHello();
	}
	}])
	</script>
	</head>
	<body ng-app="myApp">
	<p ng-controller="democ">
	<button ng-click="say()" >点击</button>
	</p>
	</body>
	</html>

关注