- angular原理 :运行在JavaScript context环境下
通过队列watch列表 监听变量 ,APPLY 放入事件队列中,digest去轮训列表 - .control 初始化scope和增加方法
.service 理解为MVC结构中的M层,来处理具体的业务逻辑,
特点:- 懒加载(lazy loading):只有在需要用的时候(也就是在其他service,filter,directive或者controller里面依赖注入的时候才会生成这个service实例)
- 单例模式(singleton):第一次被注入就创建实例,然后在cache中,直到app退出,只有在应用生命周期结束的时候(关闭浏览器)才会被清除
服务三种实现方式:
3.1factory()模式:常用,注册function ,函数返回service实例(含return),实例时调用,
实现步骤:1.定义一个obj var service={}
2. obj中含有方法和值 var service={ user:{},setName:function(){ 具体实现逻辑 } }
3. return obj return service;
不需要处理复杂的逻辑,且不需要使用config配置服务
代码显示:
app.factory('User', function ($http) { // injectables go here
var backendUrl = "http://localhost:3000";
//1.定义对象
var service = { // our factory definition
//2.对象中含有方法和属性
user: {},
setName: function (newName) {
service.user['name'] = newName;
return newName;
},
save: function () {
return $http.post(backendUrl + '/users', {
user: service.user
});
}
};
//3.返回对象
return service;
});
//在应用里面使用service()方法
app.controller('MainCtrl', function ($scope, User) {
$scope.saveUser = User.setName("2222");
});
3.2service模式 :相当于对factory做了一层封装, 写factory中的方法和值 ,通过构造函数,调用方法一样
service()方法很适合使用在功能控制比较多的service里面
angular.module('myApp.services')
.service('User', function($http) { // injectables go here
var self = this; // Save reference
this.user = {};
this.backendUrl = "http://localhost:3000";
this.setName = function(newName) {
self.user['name'] = newName;
}
this.setEmail = function(newEmail) {
self.user['email'] = newEmail;
}
this.save = function() {
return $http.post(self.backendUrl + '/users', {
user: self.user
})
}
});
angular.module('myApp')
.controller('MainCtrl', function($scope, User) {
$scope.saveUser = User.save;
});
3.3provider模式 : factory和service的底层均是provider, 里面含有 get属性(函数),进行注入, g e t 属 性 ( 函 数 ) , 进 行 注 入 , get的函数也就是 factory中的function, 直接new一个对象给$get,通过注入的时候获取这个函数
angular.module('myApp.services')
.provider('User', function() {
this.backendUrl = "http://localhost:3000";
this.setBackendUrl = function(newUrl) {
if (url) this.backendUrl = newUrl;
}
this.$get = function($http) { // injectables go here
var self = this;
var service = {
user: {},
setName: function(newName) {
service.user['name'] = newName;
},
setEmail: function(newEmail) {
service.user['email'] = newEmail;
},
save: function() {
return $http.post(self.backendUrl + '/users', {
user: service.user
})
}
};
return service;
}
});
//为了给service进行配置,我们可以将provider注入到.config()方法里面
angular.module('myApp')
.config(function(UserProvider) {
UserProvider.setBackendUrl("http://myApiBackend.com/api");
})
//这样我们就可以和其他方式一样在应用里面使用这个service了
angular.module('myApp')
.controller('MainCtrl', function($scope, User) {
$scope.saveUser = User.save;
});
4.constant(name,value)可以将一个已经存在的变量值注册为服务,并将其注入到应用的其他部分中。其中,name为注册的常量的名字,value为注册的常量的值或对象。
angular.module('myApp') .constant('apiKey','123123123')
.controller('MyController', function($scope, apiKey) {
// 可以像上面一样用apiKey作为常量
// 用123123123作为字符串的值
$scope.apiKey = apiKey;
});
5.value(name,value)的name同样是需要注册的服务名,value将这个值将作为可以注入的实例返回。
ngular.module('myApp')
.value('apiKey','123123123');
它们最大的区别是:常量可以注入到配置函数中,而值不行。
通常情况下,可以通过value()来注册服务对象或函数,用constant()来配置数据。
当我们想要创建一个服务,并且这个服务只需要返回数据时,就可以使用constant(name,value)和value(name,value),不过,它们有两个显著的区别:
- value不可以在config里注入,但是constant可
- value可以修改,但是constant不可以修改,一般直接用constant配置一些需要经常使用的数据。
https://my.oschina.net/tanweijie/blog/295067
https://blog.csdn.net/u011579138/article/details/53290810