依赖注入
AngularJS采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或函数，实现最大程度的复用
这导致了使用者和被使用者之间存在依赖关系。
所谓依赖注入是指在运行时自动查找依赖关系
然后将查找到依赖传递给使用者的一种机制。
1.行内式注入
以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数
推荐使用行内式注入.
2.推断式注入
没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称
这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app='app' ng-controller="zmController">
<input type="text" ng-model="msg">
<h1>{{msg}}</h1>
<script src=angular.js></script>
<script>
/*1.创建模板*/
var app=angular.module('app',[]);
/*2.创建控制器*/
// 行内式注入
app.controller("zmController",["$scope",function($scope){
/*因为我依赖$scope这个模块先找$scope,找到了就直接传递给function中的参数
* function中的$scope可以更改
* */
$scope.msg="zm"
}])
// 推断式注入
app.controller("zmController1",function($scope){
/*前面没有
* 先根据名称尝试找有没有$scope 有,就拿来用 但是当代码发布时会压缩代码,构建工具会自动修改参数的名称 就找不到$scope
*
* */
$scope.msg="zm1"
})
/*3.绑定模板*/
/*4.绑定控制器*/
</script>
</body>
</html>
什么是服务
angular在一开始就帮我们定义一些功能。我可以直接使用这些功能。都是一个方法或者一个对象的形式来调用指定的功能。想要使用这些服务。必须得要注入。所谓服务是将一些通用性的功能逻辑进行封装方便使用，AngularJS允许将自定义服务。
内置服务：
$location
$log
$timeout $interval
$http
$filter
angular允许开发自己根据自己的需求来自定义自己的功能。
image.png
image.png
location服务
![]()
image.png
image.png
url是锚点之后的url
hash值是第二个锚点之后的hash值
内置指令
自定义指令
app.directive("zm",function(){
return{
restrict : 'EA',
template:'',
replace:true,
tranclude:true
}
})
内置过滤器
自定义过滤器
本质:就是一个方法
app.filter("filterName",function(){
return function (input) {
}
});
内置服务
自定义服务
本质:就是一个对象,也可以以方法的形式存在
目的:把公用的功能,给封装到一起,进行复用.
$scope.url=location.url();
service自定义服务
直接挂在this上使用
1.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController",["$scope","zmService",function($scope,zmService){
zmService.say();
$scope.curTime=zmService.showDateTime();
}])
/*3.绑定模板*/
/*4.绑定控制器*/
/*内置指令*/
/*自定义指令*/
app.directive("zm",function(){
return{
restrict : 'EA',
template:'',
replace:true,
tranclude:true
}
})
/*内置过滤器*/
/*自定义过滤器
* 本质:就是一个方法
* */
app.filter("filterName",function(){
return function (input) {
}
});
/*内置服务*/
/*自定义服务
* 本质:就是一个对象,也可以以方法的形式存在
* $scope.url=location.url();
* */
/*系统内置服务前面喜欢加$符,自己可以不用*/
/* app.service('zmService',function(){
/!*可以往里面写方法*!/
this.say=function () {
console.log("hello");
}/!*可以自定义好多个方法*!/
this.showTime = function(){
var cutTime = new Date();
//我要过滤当前的时间
/!*我还要依赖其他服务,所以要注入到当前服务中*!/
}
})*/
app.service('zmService',["$filter",function($filter){
/*可以往里面写方法*/
this.say=function () {
console.log("hello");
}/*可以自定义好多个方法*/
this.showDateTime = function(){
var curTime = new Date();
//我要过滤当前的时间
/*我还要依赖其他服务,所以要注入到当前服务中*/
var date= $filter('date');
return date(curTime,"yyyy-MM-dd")
}
} ])
</script>
<body ng-app='app' ng-controller='zmController'>
<p>{{curTime}}</p>
</body>
</html>
image.png
factory自定义服务
return一个对象
3.png
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController",["$scope","zmService","myService",function($scope,zmService,myService){
zmService.mySay();
zmService.myTime();/*key值 key值变化,他就要变化*/
myService();
}])
/*系统内置服务前面喜欢加$符,自己可以不用*/
/*1.调用形式 服务的名称.方法名称*/
app.factory('zmService',function() {
/*可以往里面写方法*/
function showDateTime(){
console.log("show Time");
}
function say(){
console.log("hello");
}
return{
myTime:showDateTime,/*key:value key:服务调用的方法名称 value 自己在内容声明的方法名称*/
mySay:say,
}
})
/*想使用必须要注入*/
/*可以直接调用服务名称
* 2.调用形式使用 服务名称()
* */
app.factory('myService',function(){
return function(){
console.log('执行了myService');
}
})
</script>
<body ng-app='app' ng-controller='zmController'>
</body>
</html>
1.先自定义服务 系统内置服务前面喜欢加$符,自己可以不用
两种方式:
1.调用形式 服务的名称.方法名称
2.调用形式使用 服务名称()
2.在控制器中注入使用
3.在页面展示出来
demo使用三种方式
- 1.服务名称 直接调用形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController",["$scope","$http","formData",function($scope,$http,formData){
<!--$http({-->
<!-- url:"post.php",-->
<!-- method:'post',-->
<!-- //我现在就想在传递data数据时,传递参数方式只用传一个参数就行,向下面一样,但是这种方法是不允许的所以我想自己封装一个formData的格式-->
<!-- data:{-->
<!-- name:'zm',-->
<!-- age:23-->
<!-- }-->
当自己封装好以后的时候,就可以拿来用了
使用的格式是:
data:formData(
name:'zm',
age:23
})
<!-- })-->
/*把对象格式转成formDate形式
{
name:'zm',
age:23
}
name=zm&&age=23
* */
formData({
name:"zm",
age:23
})
}])
app.factory('formData',function(){
return function(obj){ //传入一个对象
var res = '';
for (key in obj){
res+=key +"=" +obj[key] + "&";
}
res = res.slice(0,-1); //切割掉最后的&符号
console.log(res);
return res;
}
})
</script>
<body ng-app='app' ng-controller='zmController'>
</body>
</html>
打印输出:name=zm&age=23
- 2.服务的名称.方法名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
// 1. 2
// app.controller("zmController",["$scope","$http","formParamsZm",function($scope,$http,formParamsZm){
app.controller("zmController",["$scope","$http","formPortParams",function($scope,$http,formPortParams){
//2
var params = {
name:"zm",
age:23
}
formPortParams.postForm(params);
}])
/*3.绑定模板*/
/*4.绑定控制器*/
app.factory('formPortParams',function(){
function formPortParams(obj){
var res = '';
for (key in obj){
res+=key +"=" +obj[key] + "&";
}
res = res.slice(0,-1);
console.log(res);
return res;
}
return {
postForm:formPortParams
}
})
</script>
<body ng-app='app' ng-controller='zmController'>
</body>
</html>
- 3.可以使用service自定义服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController",["$scope","$http","formParamsZm",function($scope,$http,formParamsZm){
var params = {
name:"zm",
age:23
}
$http({
url:"post.php",
method:'post',
data:formParamsZm.formZm(params)
})
}])
app.service('formParamsZm',function(){
this.formZm = function(obj){
var res = '';
for (key in obj){
res+=key +"=" +obj[key] + "&";
}
res = res.slice(0,-1);
console.log(res);
return res;
}
})
</script>
<body ng-app='app' ng-controller='zmController'>
</body>
</html>
打印输出:name=zm&age=23
value自定义服务
* value 表现形式上是一个服务
* 本质上可看做是一个常量。
* 常量：其值始终保持不变的量。
* 变量：其值可以发生改变的量。
4.png
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
//也要注入进去
app.controller("zmController",["$scope","version","userName",function($scope,version,userName){
console.log(version);
console.log(userName);
}])
app.value('version',1.0);
/*通过key来保存一个值*/
app.value("userName","zm")
</script>
<body ng-app='app' ng-controller='zmController'>
</body>
</html>
打印结果: 1.0 zm
