angularjs – 如何避免使用ui-router“污染”resolve方法

发布时间：2020-12-17 06:52:47 所属栏目：安全来源：网络整理

导读：我想尽可能地限制我的AngularJS应用程序中的“闪烁”.我使用resolve：从路由器(与ngRouter和ui-router一起工作)加载数据,以便在更改路由之前显示我的页面所需的一切. 常见例子： .state('recipes.category',{ url: '/:cat',templateUrl: '/partials/recipes.

我想尽可能地限制我的AngularJS应用程序中的“闪烁”.我使用resolve：从路由器(与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控制器可以加载类别,承诺将直接解决.

有没有办法将加载代码直接嵌入我的控制器中？或者其他地方更“干净”？我不喜欢在路线定义中有太多逻辑……

就像是：

.state('recipes.category',resolve: 'recipeList.resolve()' // something related to RecipesCategoryCtrl and "idiomatic" AngularJS
});

解决方法

也许这不是你想要的,但你可以使用以下方法将一些逻辑从路由器移动到控制器：

//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

});

基本上,用户首先被发送到页面,然后加载动态内容,然后显示整页.

这可能完全偏离主题,但我正在使用这种方法并且工作正常.首先显示新视图然后获取数据也是一种很好的做法.有一个非常好的视频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();
            });
});

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

这是ui-router在更改状态/视图时的当前工作方式：

> $viewContentLoading获得广播>已解决“解析”部分下的依赖关系> Controller实例化并解决注入的依赖项.> $viewContentLoaded被发出.>控制器对$viewContentLoaded做出反应(当它被设置为委托时,当然会调度这些事件).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!