angularjs - 如何避免 "polluting"使用 ui-router 的解析方法

Question

我想尽可能地限制 AngularJS 应用程序中的“闪烁”。我使用 resolve: from the router (与 ngRouter 和 ui-router 一起使用)加载数据，以便在更改路由之前显示我的页面所需的一切都可用。

常见示例:

.state('recipes.category', {
    url: '/:cat',
    templateUrl: '/partials/recipes.category.html',
    controller: 'RecipesCategoryCtrl as recipeList',
    resolve: {
         category: ['$http','$stateParams', function ($http, $stateParams) {
             return $http.get('/recipes/' + $stateParams.cat).then(function(data) { return data.data; });
         }]
     }
});

现在我的 RecipesCategoryCtrl Controller 可以加载类别，promise 将被直接解析。

有没有办法将加载代码直接嵌入到我的 Controller 中？还是其他更“干净”的地方？我不喜欢在路由定义中有太多逻辑……

就像是:

.state('recipes.category', {
    url: '/:cat',
    templateUrl: '/partials/recipes.category.html',
    controller: 'RecipesCategoryCtrl as recipeList',
    resolve: 'recipeList.resolve()' // something related to RecipesCategoryCtrl and "idiomatic" AngularJS
});

Answer 1

也许这不是您想要的，但是您可以使用以下方法将一些逻辑从路由器移动到您的 Controller :

//prepare content
$scope.$on('$viewContentLoading', function(event) {

     //show a progress bar whatever

     //fetch/request your data asynchronously

     //when promise resolves, add your data to $scope

});


//remove spinning loader when view is ready
$scope.$on('$viewContentLoaded', function(event) {

    //remove progress bar

});

基本上，首先将用户发送到页面，然后加载动态内容，然后显示整个页面。

这可能完全偏离主题，但我正在使用这种方法并且效果很好。首先显示新 View 然后获取数据也是一个很好的做法。有一个非常好的视频 here解释原因。该视频是关于使用 Phonegap 进行 SPA 的，但总体上有很多关于 SPA 的提示。有趣的部分(对于这个特定的案例)
大约在 1 小时 1 分钟。

编辑:如果 $viewContentLoading不会被解雇，看 here .您可能需要将所有逻辑放入 $viewContentLoaded
这就是我目前正在做的事情:

 $scope.$on('$viewContentLoaded', function(event) {

            //show loader while we are preparing view 
            notifications.showProgressDialog();

            //get data
            getData().then(function(data) {

                //bind data to view
                $scope.data = data;

                //remove spinning loader as view is ready
                notifications.hideProgressDialog();
            });
});

我仍然不是 100% 满意 $scope.data = data;好像我的数据对象很大，我可能会在与 View 的绑定(bind)完成之前隐藏进度对话框，因此可能会出现一些闪烁。解决方案是使用自定义指令处理 scope.$last ，见 this answer (即使绑定(bind)到 $stateChangeSuccess 就足够了，请看 here )

这是 ui-router 当前在更改状态/ View 时的工作方式:

$viewContentLoading播出

解决部分下的依赖关系

Controller 被实例化并解析注入(inject)的依赖项。

$viewContentLoaded被发射。

Controller 对 $viewContentLoaded 使用react(当然，当它被设置为派发这些事件的委托(delegate)时)。