angglarjsの徹底的な非同期解決
3336 ワード
angglarjsの非同期処理は本当に素晴らしいです。メッセージブロードキャストの方式に基づいて、かつ、上に転送することができ、異なるモジュール、異なるcontroller間の非同期的な問題を基本的に解決した。
シーン1:コールバック関数による非同期動作(この場合はメッセージ放送を使わない仕組み)
この場合の特徴は、非同期動作が完了するまで、1つのコールバック関数を直接伝達すればいいということです。
例えば、controllerがserverを通じてデータを非同期で取るなど、データを取って一連の操作を行うと、この時に操作を関数にパッケージして、非同期の操作関数に渡すことができます。
controllerコードセグメントの例は以下の通りである。
serverコードのセグメント例は以下の通りです。
場面二:コールバック関数を伝えるところがないので、この時は必ず使わなければなりません。
メッセージ放送の仕組み。
例えば、私のcontrollerはserverを通じてデータを非同期で取得します。この時、データを取り戻してから後続の操作をすることを保証します。しかし、私の後の操作は命令によってDOMを生成する必要があります。この時は直接に命令のlinkやcompleを呼び出すことはできません。この時はラジオで$scope.$broadcastを使います。放送を送ると、$scope.$onでモニターが必要です。
controllerコードセグメントの例は以下の通りである。
$rootScopeサービスは、彼がすべてのスコープの父親であるため、呼び出します。
$emitというサービスを放送します。命令は$rootScope.$onで受信すればいいです。
モジュール1(ap.video)におけるcontrollerコードのセグメント例は以下の通りである。
シーン1:コールバック関数による非同期動作(この場合はメッセージ放送を使わない仕組み)
この場合の特徴は、非同期動作が完了するまで、1つのコールバック関数を直接伝達すればいいということです。
例えば、controllerがserverを通じてデータを非同期で取るなど、データを取って一連の操作を行うと、この時に操作を関数にパッケージして、非同期の操作関数に渡すことができます。
controllerコードセグメントの例は以下の通りである。
$scope.submit=function(){
userService.login($scope.user.loginname.value,$scope.user.password.value,function(data){
if(data.success){
location.href = '../../views/main/index.html';
}else{
$scope.user.error.tip=data.msg;
}
});
};
最後のパラメータはコールバック関数です。serverコードのセグメント例は以下の通りです。
return {
http:$http,
token:'',
auth:[],
loginname:'',
login:function(loginname,password,fn){
this.http({
url:'../../scripts/loginModule/services/loginOKTest.js',
method:'GET'
})
.success(function(data){
if(data[0].success){
...
//
fn(data[0]);
}
})
.error(function(data,header,config,status){
alert(" !");
});
}
}
場面二:コールバック関数を伝えるところがないので、この時は必ず使わなければなりません。
メッセージ放送の仕組み。
例えば、私のcontrollerはserverを通じてデータを非同期で取得します。この時、データを取り戻してから後続の操作をすることを保証します。しかし、私の後の操作は命令によってDOMを生成する必要があります。この時は直接に命令のlinkやcompleを呼び出すことはできません。この時はラジオで$scope.$broadcastを使います。放送を送ると、$scope.$onでモニターが必要です。
controllerコードセグメントの例は以下の通りである。
// categoryService
categoryService.initCategory(loginname,token,function(category){
$scope.category=category;
$scope.$broadcast("categoryLoaded");
});
サービスコードのセグメント例は以下の通りです。initCategory:function(loginname,token,fn){
this.http({
url:'../../scripts/mainModule/services/mainCategory.js',
method:'GET'
}).success(function(data,header,config,status){
fn(data);
}).error(function(data,header,config,status){
alert(" !");
});
}
directiveコードのセグメント例は以下の通りです。link:function ($scope, $elem, attrs) {
$scope.$on("categoryLoaded", function (event, args) {
//$scope.category
}
}
最後に、もし私たちがこのcontrolerの中で他のモジュールの命令のlinkまたはcomppileまたは他のモジュールのcontrollerを呼び出す必要があるなら、どうすればいいですか?依存注入による$rootScopeサービスは、彼がすべてのスコープの父親であるため、呼び出します。
$emitというサービスを放送します。命令は$rootScope.$onで受信すればいいです。
モジュール1(ap.video)におけるcontrollerコードのセグメント例は以下の通りである。
$scope.replay=function(id){
console.log("click replay id:"+id);
clearReply();
// $rootScope app.dialog controller
$rootScope.$emit("openTemplate","reply.html");
};
モジュール2(ap.dialog)におけるcontrollerコードのセグメント例は以下の通りである。$rootScope.$on('openTemplate',function(event, toState, toParams, fromState, fromParams){
$scope.openTemplate(toState);
});
$scope.openTemplate = function (url) {
if(!url)
url="/ZVideo-MVC/dialog/defaultTemplate.html";
$scope.value = true;
ngDialog.open({
template: url,
className: 'ngdialog-theme-plain',
scope: $scope
});
};