想在菜单显示之前用ui路由器在AngularJS中运行一些初始化代码吗

我想在实际菜单显示之前运行一些初始化代码。也就是说，在我真正的应用程序中，我有一个我想要加载的http资源，它将影响菜单选项列表中显示的选项。更具体地说，我想在程序第一次运行时显示一条“等待”消息，直到http资源完全加载。我一直在尝试解决方案，但这似乎只有在菜单加载后才对我有帮助

我希望不必使用引导模式，因为我想在我的应用程序中的多个位置执行此操作，而不仅仅是第一次运行。我也不太喜欢引导模式。我觉得这有点做作

首先，我在这里加载了一个非常简单的示例：

var app=angular.module（'svccap'[
“ui.router”
]);
app.config（['$stateProvider'，'$urlRouterProvider'，
函数（$stateProvider、$urlRouterProvider、$q、$timeout）{
$urlRouterProvider。否则（'/'）；
$stateProvider
.州（“家”{
url:“/”，
模板：“HOME HERE
”，
控制器：“HomeController作为vm”
}).
陈述（'关于'{
url:“/关于”，
模板：“关于此处标题：{{vm.title}
”，//“index4template.html”，
控制器：“AboutController作为vm”，
决心：{
标题：函数（）{
返回“来自标题函数”；
}
}
});
}]);
var injectParamsAbout=['title']；
变量AboutController=函数（标题）{
var vm=这个；
vm.title=标题；
};
AboutController.$inject=injectParamsAbout；
角度.module（'svccap'）.controller（'AboutController'，'AboutController'）；
var-injectParamsHome=[]；
var HomeController=函数（）{
};
HomeController.$inject=injectParamsHome；
角度.module（'svccap'）.controller（'HomeController'，'HomeController'）；

使用父级和子级如何（不确定这是否不是您不喜欢的引导模式）。我创建/更新了

//这将立即加载
//这意味着，用户将看到…加载。。。尽快
.state（'about'{
url:“/关于”，
模板：“
…正在加载…
”，/“index4template.html”，
控制器：函数（$state）{$state.go（“about.child”）；}，
//控制器：“AboutController作为vm”，
})
//此状态在上面的控制器中触发
//完成所有解析工作需要2.5秒
.state（'about.child'{
模板：“关于此处标题：{{vm.title}
”，
控制器：“AboutController作为vm”，
决心：{
标题：函数（$timeout）{
返回$timeout（函数（）{
返回“来自标题函数”；
}
，2500//等待2,5秒-然后更换…加载。。。
);
}
}

背后的想法是加载一些模板（例如，

…加载…

），作为父视图。一旦实例化（显示加载），我们重定向到我们的子视图。在上面的示例中，有2,5秒的延迟（加载表单服务器），然后子视图完全替换父视图

---

查看@Radim示例中的，这是一个更清晰的方法，适用于我：

如果您使用的是ui路由器，则可以使用嵌套状态解决此问题。例如：

$stateProvider
    .state("main", {
        url: "/",
        template: '<div ui-view></div>',
        controller: 'InitController'
    })
    .state("main.landing", {
        url: "landing",
        templateUrl: "modules/home/views/landing.html",
        controller: 'LandingPageController'
    })
    .state("main.profile", {
        url: "profile",
        templateUrl: "modules/home/views/profile.html",
        controller: 'ProfileController'
    });

$stateProvider
.州（“主要”{
网址：“/”，
模板：“”，
控制器：“InitController”
})
.state（“main.landing”{
网址：“登陆”，
templateUrl:“modules/home/views/landing.html”，
控制器：“LandingPageController”
})
.state（“main.profile”{
url:“个人资料”，
templateUrl:“modules/home/views/profile.html”，
控制器：“ProfileController”
});

在本例中，您定义了3条路由：“/”、“/landing”、“/profile”

因此，总是调用InitController（与“/”路由相关），即使用户直接在/landing或/profile处输入

---

重要提示：别忘了在本节中包含

以启用子状态控制器加载

谢谢@Radim。通过将解决方法放在子状态中，这很好地解决了我的问题。我看不到任何缺点，而且这似乎比引导过程干净得多，但由于您无法获得相同的结果没有运行title函数的about.child（在我的例子中，我将把我的资源放在那里）

// this is loaded immediately
// and that means, that user will see ...loading... ASAP
.state('about', {
    url: '/about',
    template:   '<p ui-view="">...loading...</p>',  //'index4template.html',
    controller: function($state){ $state.go("about.child"); },
    //controller: 'AboutController as vm',
})

// this state is triggered in the controller above
// and it will take 2,5 second to do all the resolve stuff
.state('about.child', {
    template:   '<p>about here title: {{vm.title}}</p>',  
    controller: 'AboutController as vm',
    resolve: {
        title: function($timeout){
            return $timeout(function(){
               return 'from title function';
            }
            , 2500 // wait 2,5 second - and then replace ...loading...
            );
        }
    }

$stateProvider
    .state("main", {
        url: "/",
        template: '<div ui-view></div>',
        controller: 'InitController'
    })
    .state("main.landing", {
        url: "landing",
        templateUrl: "modules/home/views/landing.html",
        controller: 'LandingPageController'
    })
    .state("main.profile", {
        url: "profile",
        templateUrl: "modules/home/views/profile.html",
        controller: 'ProfileController'
    });