angularJs依赖注入

来源：互联网发布：手机电路仿真软件编辑：程序博客网时间：2024/06/05 16:34

一、

<!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>

阅读全文

0 0