Trì hoãn thay đổi tuyến đường AngularJS cho đến khi mô hình được tải để ngăn nhấp nháy

Tôi tự hỏi liệu có cách nào (tương tự như Gmail) để AngularJS trì hoãn hiển thị tuyến mới cho đến sau mỗi mô hình và dữ liệu của nó đã được tìm nạp bằng các dịch vụ tương ứng.

Ví dụ: nếu có một ProjectsControllerdanh sách liệt kê tất cả các Dự án và project_index.htmllà mẫu hiển thị các Dự án này, Project.query()sẽ được tìm nạp hoàn toàn trước khi hiển thị trang mới.

Cho đến lúc đó, trang cũ vẫn sẽ tiếp tục hiển thị (ví dụ: nếu tôi đang duyệt một trang khác và sau đó quyết định xem chỉ mục Dự án này).

$ routeProvider giải quyết thuộc tính cho phép trì hoãn thay đổi tuyến đường cho đến khi dữ liệu được tải.

Đầu tiên xác định một tuyến đường với resolvethuộc tính như thế này.

angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html', 
        controller: PhoneListCtrl, 
        resolve: PhoneListCtrl.resolve}).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html', 
        controller: PhoneDetailCtrl, 
        resolve: PhoneDetailCtrl.resolve}).
      otherwise({redirectTo: '/phones'});
}]);

lưu ý rằng resolvetài sản được xác định trên tuyến đường.

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {
  phones: function(Phone, $q) {
    // see: https://groups.google.com/forum/?fromgroups=#!topic/angular/DGf7yyD4Oc4
    var deferred = $q.defer();
    Phone.query(function(successData) {
            deferred.resolve(successData); 
    }, function(errorData) {
            deferred.reject(); // you could optionally pass error data here
    });
    return deferred.promise;
  },
  delay: function($q, $defer) {
    var delay = $q.defer();
    $defer(delay.resolve, 1000);
    return delay.promise;
  }
}

Lưu ý rằng định nghĩa của bộ điều khiển chứa một đối tượng phân giải khai báo những thứ cần có cho hàm tạo của bộ điều khiển. Ở đây, phonesđược đưa vào bộ điều khiển và nó được định nghĩa trong thuộc resolvetính.

Các resolve.phoneschức năng có trách nhiệm trả lại một lời hứa. Tất cả các lời hứa được thu thập và thay đổi tuyến đường bị trì hoãn cho đến khi tất cả các lời hứa được giải quyết.

Bản demo hoạt động: http://mhevery.github.com/angular-phonecat/app/#/phones Nguồn: https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf9015349683131

Đây là một ví dụ hoạt động tối thiểu hoạt động cho Angular 1.0.2

Bản mẫu:

<script type="text/ng-template" id="/editor-tpl.html">
    Editor Template {{datasets}}
</script>

<div ng-view>

</div>

JavaScript:

function MyCtrl($scope, datasets) {    
    $scope.datasets = datasets;
}

MyCtrl.resolve = {
    datasets : function($q, $http) {
        var deferred = $q.defer();

        $http({method: 'GET', url: '/someUrl'})
            .success(function(data) {
                deferred.resolve(data)
            })
            .error(function(data){
                //actually you'd want deffered.reject(data) here
                //but to show what would happen on success..
                deferred.resolve("error value");
            });

        return deferred.promise;
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});​
​

http://jsfiddle.net/dTJ9N/3/

Phiên bản được sắp xếp hợp lý:

Vì $ http () đã trả lại một lời hứa (còn gọi là hoãn lại), chúng tôi thực sự không cần phải tạo riêng cho mình. Vì vậy, chúng ta có thể đơn giản hóa MyCtrl. quyết tâm:

MyCtrl.resolve = {
    datasets : function($http) {
        return $http({
            method: 'GET', 
            url: 'http://fiddle.jshell.net/'
        });
    }
};

Kết quả của $ http () chứa dữ liệu , trạng thái , tiêu đề và đối tượng cấu hình , vì vậy chúng ta cần thay đổi phần thân của MyCtrl thành:

$scope.datasets = datasets.data;

http://jsfiddle.net/dTJ9N/5/

Tôi thấy một số người hỏi làm thế nào để làm điều này bằng cách sử dụng phương pháp angular.contler với phép tiêm phụ thuộc thân thiện với thu nhỏ. Vì tôi vừa mới làm việc nên tôi cảm thấy bắt buộc phải quay lại và giúp đỡ. Đây là giải pháp của tôi (được thông qua từ câu hỏi ban đầu và câu trả lời của Misko):

angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html', 
        controller: PhoneListCtrl, 
        resolve: { 
            phones: ["Phone", "$q", function(Phone, $q) {
                var deferred = $q.defer();
                Phone.query(function(successData) {
                  deferred.resolve(successData); 
                }, function(errorData) {
                  deferred.reject(); // you could optionally pass error data here
                });
                return deferred.promise;
             ]
            },
            delay: ["$q","$defer", function($q, $defer) {
               var delay = $q.defer();
               $defer(delay.resolve, 1000);
               return delay.promise;
              }
            ]
        },

        }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html', 
        controller: PhoneDetailCtrl, 
        resolve: PhoneDetailCtrl.resolve}).
      otherwise({redirectTo: '/phones'});
}]);

angular.controller("PhoneListCtrl", [ "$scope", "phones", ($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}]);

Vì mã này có nguồn gốc từ câu hỏi / câu trả lời phổ biến nhất, nó chưa được kiểm tra, nhưng nó sẽ gửi cho bạn đúng hướng nếu bạn đã hiểu cách tạo mã góc thân thiện. Một phần mà mã riêng của tôi không yêu cầu là tiêm "Điện thoại" vào chức năng phân giải cho 'điện thoại', tôi cũng không sử dụng bất kỳ đối tượng 'trì hoãn' nào.

Tôi cũng đề xuất video youtube này http://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index=4&feature=plcp , điều này đã giúp tôi khá nhiều

Nếu bạn quan tâm, tôi đã quyết định dán mã của riêng mình (Viết bằng coffeescript) để bạn có thể thấy tôi đã làm cho nó hoạt động như thế nào.

FYI, trước đây tôi sử dụng bộ điều khiển chung giúp tôi thực hiện CRUD trên một số mô hình:

appModule.config ['$routeProvider', ($routeProvider) ->
  genericControllers = ["boards","teachers","classrooms","students"]
  for controllerName in genericControllers
    $routeProvider
      .when "/#{controllerName}/",
        action: 'confirmLogin'
        controller: 'GenericController'
        controllerName: controllerName
        templateUrl: "/static/templates/#{controllerName}.html"
        resolve:
          items : ["$q", "$route", "$http", ($q, $route, $http) ->
             deferred = $q.defer()
             controllerName = $route.current.controllerName
             $http(
               method: "GET"
               url: "/api/#{controllerName}/"
             )
             .success (response) ->
               deferred.resolve(response.payload)
             .error (response) ->
               deferred.reject(response.message)

             return deferred.promise
          ]

  $routeProvider
    .otherwise
      redirectTo: '/'
      action: 'checkStatus'
]

appModule.controller "GenericController", ["$scope", "$route", "$http", "$cookies", "items", ($scope, $route, $http, $cookies, items) ->

  $scope.items = items
      #etc ....
    ]

Cam kết này , là một phần của phiên bản 1.1.5 trở lên, phơi bày $promiseđối tượng của $resource. Các phiên bản của ngResource bao gồm cam kết này cho phép giải quyết các tài nguyên như thế này:

$ routeProvider

resolve: {
    data: function(Resource) {
        return Resource.get().$promise;
    }
}

bộ điều khiển

app.controller('ResourceCtrl', ['$scope', 'data', function($scope, data) {

    $scope.data = data;

}]);

Đoạn mã này là tiêm phụ thuộc thân thiện với (tôi thậm chí sử dụng nó kết hợp giữa ngmin và uglify ) và đó là một giải pháp dựa trên miền thanh lịch hơn .

Ví dụ dưới đây đăng ký một điện thoại tài nguyên và liên tục phoneRoutes , trong đó có tất cả các thông tin định tuyến của bạn cho rằng (điện thoại) miền. Một cái gì đó tôi không thích trong câu trả lời được cung cấp là vị trí của logic giải quyết - mô-đun chính không nên biết bất cứ điều gì hoặc bị làm phiền về cách các đối số tài nguyên được cung cấp cho bộ điều khiển. Bằng cách này, logic vẫn ở trong cùng một miền.

Lưu ý: nếu bạn đang sử dụng ngmin (và nếu bạn không: bạn nên), bạn chỉ phải viết các hàm giải quyết với quy ước mảng DI.

angular.module('myApp').factory('Phone',function ($resource) {
  return $resource('/api/phone/:id', {id: '@id'});
}).constant('phoneRoutes', {
    '/phone': {
      templateUrl: 'app/phone/index.tmpl.html',
      controller: 'PhoneIndexController'
    },
    '/phone/create': {
      templateUrl: 'app/phone/edit.tmpl.html',
      controller: 'PhoneEditController',
      resolve: {
        phone: ['$route', 'Phone', function ($route, Phone) {
          return new Phone();
        }]
      }
    },
    '/phone/edit/:id': {
      templateUrl: 'app/phone/edit.tmpl.html',
      controller: 'PhoneEditController',
      resolve: {
        form: ['$route', 'Phone', function ($route, Phone) {
          return Phone.get({ id: $route.current.params.id }).$promise;
        }]
      }
    }
  });

Phần tiếp theo là tiêm dữ liệu định tuyến khi mô-đun ở trạng thái cấu hình và áp dụng nó cho $ routeProvider .

angular.module('myApp').config(function ($routeProvider, 
                                         phoneRoutes, 
                                         /* ... otherRoutes ... */) {

  $routeProvider.when('/', { templateUrl: 'app/main/index.tmpl.html' });

  // Loop through all paths provided by the injected route data.

  angular.forEach(phoneRoutes, function(routeData, path) {
    $routeProvider.when(path, routeData);
  });

  $routeProvider.otherwise({ redirectTo: '/' });

});

Kiểm tra cấu hình tuyến đường với thiết lập này cũng khá dễ dàng:

describe('phoneRoutes', function() {

  it('should match route configuration', function() {

    module('myApp');

    // Mock the Phone resource
    function PhoneMock() {}
    PhoneMock.get = function() { return {}; };

    module(function($provide) {
      $provide.value('Phone', FormMock);
    });

    inject(function($route, $location, $rootScope, phoneRoutes) {
      angular.forEach(phoneRoutes, function (routeData, path) {

        $location.path(path);
        $rootScope.$digest();

        expect($route.current.templateUrl).toBe(routeData.templateUrl);
        expect($route.current.controller).toBe(routeData.controller);
      });
    });
  });
});

Bạn có thể thấy nó trong vinh quang đầy đủ trong thí nghiệm mới nhất (sắp tới) của tôi . Mặc dù phương pháp này hoạt động tốt với tôi, tôi thực sự tự hỏi tại sao người tiêm $ không trì hoãn việc xây dựng bất cứ thứ gì khi phát hiện ra việc tiêm bất cứ thứ gì là đối tượng hứa hẹn ; nó sẽ làm cho mọi thứ soooOOOOOooOOOOO dễ dàng hơn nhiều.

Chỉnh sửa: đã sử dụng Angular v1.2 (RC2)

Trì hoãn hiển thị tuyến đường chắc chắn sẽ dẫn đến một mớ không đồng bộ ... tại sao không chỉ đơn giản là theo dõi trạng thái tải của thực thể chính của bạn và sử dụng nó trong chế độ xem. Ví dụ: trong bộ điều khiển của bạn, bạn có thể sử dụng cả các cuộc gọi lại thành công và lỗi trên ngResource:

$scope.httpStatus = 0; // in progress
$scope.projects = $resource.query('/projects', function() {
    $scope.httpStatus = 200;
  }, function(response) {
    $scope.httpStatus = response.status;
  });

Sau đó, trong chế độ xem, bạn có thể làm bất cứ điều gì:

<div ng-show="httpStatus == 0">
    Loading
</div>
<div ng-show="httpStatus == 200">
    Real stuff
    <div ng-repeat="project in projects">
         ...
    </div>
</div>
<div ng-show="httpStatus >= 400">
    Error, not found, etc. Could distinguish 4xx not found from 
    5xx server error even.
</div>

Tôi đã làm việc từ mã của Misko ở trên và đây là những gì tôi đã làm với nó. Đây là một giải pháp hiện tại hơn kể từ khi $deferđã được thay đổi thành $timeout. $timeoutTuy nhiên, việc thay thế sẽ đợi khoảng thời gian chờ (theo mã của Misko, 1 giây), sau đó trả lại dữ liệu với hy vọng nó được giải quyết kịp thời. Với cách này, nó trả về càng sớm càng tốt.

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {

  phones: function($q, Phone) {
    var deferred = $q.defer();

    Phone.query(function(phones) {
        deferred.resolve(phones);
    });

    return deferred.promise;
  }
}

Sử dụng AngularJS 1.1.5

Cập nhật chức năng 'điện thoại' trong câu trả lời của Justen bằng cú pháp AngularJS 1.1.5 .

Nguyên:

phones: function($q, Phone) {
    var deferred = $q.defer();

    Phone.query(function(phones) {
        deferred.resolve(phones);
    });

    return deferred.promise;
}

Cập nhật:

phones: function(Phone) {
    return Phone.query().$promise;
}

Ngắn hơn nhiều nhờ đội ngũ Angular và những người đóng góp. :)

Đây cũng là câu trả lời của Maximilian Hoffmann. Rõ ràng cam kết đó đã biến nó thành 1.1.5.

Bạn có thể sử dụng thuộc tính giải quyết $ routeProvider để trì hoãn thay đổi tuyến đường cho đến khi dữ liệu được tải.

angular.module('app', ['ngRoute']).
  config(['$routeProvider', function($routeProvider, EntitiesCtrlResolve, EntityCtrlResolve) {
    $routeProvider.
      when('/entities', {
        templateUrl: 'entities.html', 
        controller: 'EntitiesCtrl', 
        resolve: EntitiesCtrlResolve
      }).
      when('/entity/:entityId', {
        templateUrl: 'entity.html', 
        controller: 'EntityCtrl', 
        resolve: EntityCtrlResolve
      }).
      otherwise({redirectTo: '/entities'});
}]);

Lưu ý rằng resolvetài sản được xác định trên tuyến đường.

EntitiesCtrlResolvevà EntityCtrlResolvelà các đối tượng không đổi được định nghĩa trong cùng một tệp như EntitiesCtrlvà EntityCtrlbộ điều khiển.

// EntitiesCtrl.js

angular.module('app').constant('EntitiesCtrlResolve', {
  Entities: function(EntitiesService) {
    return EntitiesService.getAll();
  }
});

angular.module('app').controller('EntitiesCtrl', function(Entities) {
  $scope.entities = Entities;

  // some code..
});

// EntityCtrl.js

angular.module('app').constant('EntityCtrlResolve', {
  Entity: function($route, EntitiesService) {
    return EntitiesService.getById($route.current.params.projectId);
  }
});

angular.module('app').controller('EntityCtrl', function(Entity) {
  $scope.entity = Entity;

  // some code..
});

Tôi thích ý tưởng của Darkporter vì sẽ dễ dàng cho một nhóm phát triển mới với AngularJS hiểu và làm việc ngay lập tức.

Tôi đã tạo ra sự thích ứng này sử dụng 2 div, một cho thanh tải và một cho nội dung thực tế được hiển thị sau khi dữ liệu được tải. Xử lý lỗi sẽ được thực hiện ở nơi khác.

Thêm cờ 'sẵn sàng' vào phạm vi $:

$http({method: 'GET', url: '...'}).
    success(function(data, status, headers, config) {
        $scope.dataForView = data;      
        $scope.ready = true;  // <-- set true after loaded
    })
});

Trong chế độ xem html:

<div ng-show="!ready">

    <!-- Show loading graphic, e.g. Twitter Boostrap progress bar -->
    <div class="progress progress-striped active">
        <div class="bar" style="width: 100%;"></div>
    </div>

</div>

<div ng-show="ready">

    <!-- Real content goes here and will appear after loading -->

</div>

Xem thêm: Tài liệu thanh tiến trình Boostrap

Tôi thích câu trả lời ở trên và học được rất nhiều từ chúng nhưng có một điều còn thiếu trong hầu hết các câu trả lời ở trên.

Tôi đã bị mắc kẹt trong một kịch bản tương tự khi tôi đang giải quyết url với một số dữ liệu được tìm nạp trong yêu cầu đầu tiên từ máy chủ. Vấn đề tôi gặp phải là nếu lời hứa là gì rejected.

Tôi đã sử dụng một nhà cung cấp tùy chỉnh mà sử dụng để trả về một Promisetrong đó đã được giải quyết bởi resolvecác $routeProvidertại thời điểm giai đoạn config.

Điều tôi muốn nhấn mạnh ở đây là khái niệm về whennó làm một cái gì đó như thế này.

Nó thấy url trong thanh url và sau đó whenkhối tương ứng trong bộ điều khiển được gọi và chế độ xem được giới thiệu cho đến nay rất tốt.

Hãy nói rằng tôi có mã pha cấu hình sau.

App.when('/', {
   templateUrl: '/assets/campaigns/index.html',
   controller: 'CampaignListCtr',
   resolve : {
      Auth : function(){
         return AuthServiceProvider.auth('campaign');
      }
   }
})
// Default route
.otherwise({
   redirectTo: '/segments'
});

Trên url gốc trong trình duyệt, khối chạy đầu tiên được gọi nếu không otherwiseđược gọi.

Hãy tưởng tượng một kịch bản tôi nhấn rootUrl trong AuthServicePrivider.auth()hàm thanh địa chỉ được gọi.

Hãy nói rằng Promise trở lại là trong trạng thái từ chối những gì sau đó ???

Không có gì được kết xuất cả.

Otherwise khối sẽ không được thực thi vì nó dành cho bất kỳ url nào không được xác định trong khối cấu hình và không xác định được pha cấu hình angularJs.

Chúng tôi sẽ phải xử lý sự kiện bị sa thải khi lời hứa này không được giải quyết. Thất bại $routeChangeErorrbị sa thải$rootScope .

Nó có thể được chụp như thể hiện trong mã dưới đây.

$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
    // Use params in redirection logic.
    // event is the routeChangeEvent
    // current is the current url
    // previous is the previous url
    $location.path($rootScope.rootPath);
});

IMO Nói chung, nên đặt mã theo dõi sự kiện trong khối ứng dụng. Mã này chạy ngay sau giai đoạn cấu hình của ứng dụng.

App.run(['$routeParams', '$rootScope', '$location', function($routeParams, $rootScope, $location){
   $rootScope.rootPath = "my custom path";
   // Event to listen to all the routeChangeErrors raised
   // by the resolve in config part of application
   $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
       // I am redirecting to rootPath I have set above.
       $location.path($rootScope.rootPath);
   });
}]);

Bằng cách này, chúng ta có thể xử lý thất bại tại thời điểm cấu hình.

Tôi đã có một giao diện bảng điều khiển trượt đa cấp phức tạp, với lớp màn hình bị vô hiệu hóa. Tạo lệnh trên lớp màn hình vô hiệu hóa sẽ tạo sự kiện nhấp để thực thi trạng thái như

$state.go('account.stream.social.view');

đã tạo ra một hiệu ứng flicking. history.back () thay vì nó hoạt động tốt, tuy nhiên nó không phải lúc nào cũng quay lại lịch sử trong trường hợp của tôi. VÌ VẬY, điều tôi tìm ra là nếu tôi chỉ đơn giản tạo thuộc tính href trên màn hình vô hiệu hóa thay vì state.go, hoạt động như một bùa mê.

<a class="disable-screen" back></a>

Chỉ thị 'trở lại'

app.directive('back', [ '$rootScope', function($rootScope) {

    return {
        restrict : 'A',
        link : function(scope, element, attrs) {
            element.attr('href', $rootScope.previousState.replace(/\./gi, '/'));
        }
    };

} ]);

app.js Tôi chỉ lưu trạng thái trước đó

app.run(function($rootScope, $state) {      

    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {         

        $rootScope.previousState = fromState.name;
        $rootScope.currentState = toState.name;


    });
});

Một giải pháp khả thi có thể là sử dụng chỉ thị ng-cloak với phần tử mà chúng ta đang sử dụng các mô hình, ví dụ

<div ng-cloak="">
  Value in  myModel is: {{myModel}}
</div>

Tôi nghĩ rằng điều này cần ít nỗ lực nhất.