Angular（服務、存儲機制）
服務
1.provider
- 最大的服務，可以配置
- 特點
- （1）moren provider 會被自動實例化
- （2）在控制器中使用會調用$get
- （3）後續操作寫在$get之後
<div ng-controller="twoCtrl"></div> <script> var app=angular.module('appModule',[]); app.config(function (CalcProvider) {//CalcProvider 是Calc聲明的函數的實例 就是下邊的this CalcProvider.currency='RMB'; //會等provider創建好實例後才能配置 }); //localStorage app.provider('Calc',function () { this.currency='$'; this.$get=function () { //構造函數 this在哪個函數中就是哪個函數的實例 return {//返回一個對象，用來公用的對象 '+':(a, b) =>{ return this.currency+(a+b) } } } }); app.controller('oneCtrl',function ($scope,Calc) { console.log(Calc['+'](1,2)) });
- 2.factory
- 不支持配置（配置在factory之前就完成了）
- 基於provider的
- 參數2處的函數是provider中$get所對應的
- return之後
<div ng-controller="oneCtrl"></div>
app.factory('Calc',function () {//後面的函數是provider中$get方法對應的
this.currency='RMB';
return {
'+':(a, b) =>{
return this.currency+(a+b)
}
}
});
app.controller('oneCtrl',function ($scope,Calc) {
console.log(Calc['+'](1,2))
});- 3.service
- factory返回的對象，是service函數實例化後的結構
- 沒有return，之間書寫要執行的操作
<div ng-controller="oneCtrl"></div>
<script>
var app=angular.module('appModule',[]);
app.service('Calc',function () {
this['+']=(a,b)=>a+b;
//factory返回的對象，是service函數實例化後的結構
/* return {
'+':(a, b) =>{
return this.currency+(a+b)
}
}*/
});//後面的函數就是$get函數
app.controller('oneCtrl',function ($scope,Calc) {
console.log(Calc['+'](1,2))
});
</script>- 4.value/content
- 調用的是factory
- 參數2的位置，直接書寫要進行的操作
value:
<div ng-controller="oneCtrl"></div>
<script>
var app=angular.module('appModule',[]);
app.value('Calc', {
'+':(a,b)=>a+b,
'-':(a,b)=>a-b
});
app.controller('oneCtrl',function ($scope,Calc) {
console.log(Calc['+'](1,2))
});
</script>
contnet:
<div ng-controller="oneCtrl"></div>
<script>
var app=angular.module('appModule',[]);
app.constant('Calc', {
'+':(a,b)=>a+b,
'-':(a,b)=>a-b
});
app.controller('oneCtrl',function ($scope,Calc) {
console.log(Calc['+'](1,2))
});
</script>存儲機制
本地存儲（Storage）
<script> var app = angular.module('appModule', []); app.provider('Storage', function () { this.$get = function () { return { setStorage: function (key, value) { if (typeof value == 'object') { value = JSON.stringify(value) } localStorage.setItem(key, value) }, getStorage: function (key) { var str=localStorage.getItem(key); if(str.startsWith('{')||str.startsWith('[')){ str=JSON.parse(str); } return str } } } }); app.controller('oneCtrl', function ($scope,Storage) { Storage.setStorage('name', {name: 'www'}); }); app.controller('twoCtrl', function ($scope,Storage) { console.log(Storage.getStorage('name').name) }) </script>事件交互
- $on監聽
- 監聽當前發生的事
- 平級的監聽放在根作用域上
- 與發送的內容一致
- 參數1：當前事件源
- 參數2：被操作數據
$scope.$on('買了雪碧',function (e,data) { $scope.total=data; console.log(data); });- $watch監視
- watch+apply可以實現雙向數據綁定
- 實時監控數據
- 參數1：被監控的對象（可以是作用域上的屬性名，也可以是函數）–》發生變化的元素
- 參數2：監控到對象變化後執行的操作
$scope.$watch('count',function () { $scope.$emit('買了雪碧',$scope.count*$scope.price);//數量變化向上發射 });- $emit向上發射幷包括自己
- 發射的內容和被監聽的內容一致
$scope.$watch('count',function () { $scope.$emit('買了雪碧',$scope.count*$scope.price);//數量變化向上發射 });$broadcast 向下發射包括自己
- 一般用於有包含關係元素之間的交互
- 代表級別大的（父級）向級別小的（子級）發送
- 參數1 是監控對象的名字
- 參數2 是監控對象的真實內容變化對象本體）
$scope.$watch('total',function () { $scope.$broadcast('總共',$scope.total) })- 以上均針對上下級交互，平級之間的事件交互，採用方式一致，唯一區別在於，平級交互不需要使用broadcast進行事件發射，只採用$emit即可
- 存在監聽可能是發佈訂閱模式
- $on監聽
$interval\$timeout
- 不是angular中的視圖改變數據不會刷新
- angular中的服務都可以自動調用$apply
{{date | date:'hh:mm:ss'}} <script> var app=angular.module('appModule',[]); app.controller('myCtrl',function ($scope,$interval,$timeout) {//$interval單次 $timeout多次 //不是angular中的方法中改變數據不會刷新視圖 var timer=$interval(function () {//angular中提供的服務都可以自動調用$apply，不需要手動調用 $scope.date=Date.now(); $interval.cancel(timer);//取消定時器 }); },1000); </script>$Apply
- 強制刷新視圖
<input type="text" zf-model="aa">{{aa}} var app=angular.module('appModule',[]); app.run(function ($rootScope) { $rootScope.aa='zfpx' }); app.directive('zfModel',function () { return { restrict:'A', link:function (scope,element,attrs) { element.on('input',function () {//監聽輸入框中的輸入事件 // scope.age=element.val(); scope[attrs.zfModel]=element.val(); scope.$apply();//強制讓視圖刷新 }); scope.$watch(attrs.zfModel,function (newVal) { element.val(newVal); }) } } })