logo

Thông báo

Icon
Error

Chia sẻ
Tùy chọn
Xem
Xem bài viết cuối
Offline admin  
#1 Đã gửi : 09/03/2015 lúc 04:26:09(UTC)
admin

Danh hiệu: Administration

Chức danh:

Nhóm: Administrators
Gia nhập: 23-07-2013(UTC)
Bài viết: 6,102
Man
Viet Nam
Đến từ: Vietnam

Cảm ơn: 10 lần
Được cảm ơn: 2 lần trong 2 bài viết

AngularJS - Resolve Conventions

The initial setup:

<div>

<ng-view></ng-view>

</div>

var app = angular.module('app', []);

app.config(function ($routeProvider) {

$routeProvider

.when('/',

{

templateUrl: "app.html",

controller: "AppCtrl"

resolve: {

app: function ($q, $timeout) {

var defer = $q.defer;

$timeout(function () {

defer.resolve();

}, 2000);

return defer.promise;

}

}

}

)

});

app.controller("AppCtrl", function ($scope) {

$scope.model = {

message: "I'm a great app!"

}

});

<h1>{{ model.message }}</h1>

Most of the time, resolve is associated with a controller - here, AppCtrl. This allows for promises to be decoupled from the router and declared separately, but still remain linked to its parent controller:

app.config(function ($routeProvider) {

$routeProvider

.when('/',

{

templateUrl: "app.html",

controller: "AppCtrl"

resolve: {

loadData: appCtrl.loadData,

prepData: appCtrl.prepData

}

}

)

});

var appCtrl = app.controller("AppCtrl", function ($scope) {

$scope.model = {

message: "I'm a great app!"

}

});

appCtrl.loadData = function ($q, $timeout) {

var defer = $q.defer;

$timeout(function () {

defer.resolve();

}, 2000);

return defer.promise;

};

appCtrl.prepData = function ($q, $timeout) {

var defer = $q.defer;

$timeout(function () {

defer.resolve();

}, 2000);

return defer.promise;

};

Here, the promises are enqueued and resolved in the same fashion, only with a much neater syntax.

Adding console.log to each gives a clearer idea of what’s going on under the hood:

appCtrl.loadData = function ($q, $timeout) {

var defer = $q.defer;

$timeout(function () {

defer.resolve();

console.log("loadData");

}, 2000);

return defer.promise;

};

appCtrl.prepData = function ($q, $timeout) {

var defer = $q.defer;

$timeout(function () {

defer.resolve();

console.log("prepData");

}, 2000);

return defer.promise;

};

Running this shows that the promises don’t actually happen sequentially. Once both of them are ready, that will trigger the route change.

var appCtrl = app.controller("AppCtrl", function ($scope, $route) {

$console.log($route);

$scope.model = {

message: "I'm a great app!"

}

});

appCtrl.loadData = function ($q, $timeout) {

var defer = $q.defer;

$timeout(function () {

defer.resolve("loadData");

}, 2000);

return defer.promise;

};

appCtrl.prepData = function ($q, $timeout) {

var defer = $q.defer;

$timeout(function () {

defer.resolve("prepData");

}, 2000);

return defer.promise;

};

By passing strings to the resolve method and inspecting the route in the console, $route.current.locals will have the loadData and prepData attributes, with their respective string values that were returned from the promise.

Ai đang xem chủ đề này?
OceanSpiders 2.0
Di chuyển  
Bạn không thể tạo chủ đề mới trong diễn đàn này.
Bạn không thể trả lời chủ đề trong diễn đàn này.
Bạn không thể xóa bài của bạn trong diễn đàn này.
Bạn không thể sửa bài của bạn trong diễn đàn này.
Bạn không thể tạo bình chọn trong diễn đàn này.
Bạn không thể bỏ phiếu bình chọn trong diễn đàn này.

| Cung cấp bởi YAF.NET 2.2.4.14 | YAF.NET © 2003-2019, Yet Another Forum.NET
Thời gian xử lý trang này hết 0.495 giây.