javascript - ngRouter 到 ui-router

Question

我最近购买了一个 angularjs 模板，我用它来构建我的应用程序，但是我注意到使用了 ngRouter 而不是 ui-router 我更喜欢也更熟悉。

我尝试包含 ui-router 并更改所有路由并且它有效，但是我的路由中有一些额外的代码我仍然不明白并且不知道放在哪里，这是我的仪表板的旧路线:

$routeProvider.when("/dashboard", {
    templateUrl: "views/dashboard.html",
    resolve: {
        deps: ["$ocLazyLoad", function(a) {
            return a.load([jqload.c3, jqload.sparkline])
            .then(function() {
                return a.load({
                    name: "app.directives",
                    files: ["scripts/lazyload/directives/sparkline.directive.js"]
                })
            })
            .then(function() {
                return a.load("angular-c3");
            })
            .then(function() {
                return a.load("easypiechart");
            })

        }]
    }
});

我把它改成了:

.state('admin.dashboard', {
    url: '/dashboard',
    views: {
        'content@': {
            templateUrl: '/_admin/views/dashboard.html',
            controller: 'DashboardCtrl'
        }
    }

如您所见，缺少很大一部分代码会影响我的仪表板的某些功能。我的问题是使用 ui-router 我应该把所有代码放在 resolve 中的什么地方:

resolve: {
        deps: ["$ocLazyLoad", function(a) {
            return a.load([jqload.c3, jqload.sparkline])
            .then(function() {
                return a.load({
                    name: "app.directives",
                    files: ["scripts/lazyload/directives/sparkline.directive.js"]
                })
            })
            .then(function() {
                return a.load("angular-c3");
            })
            .then(function() {
                return a.load("easypiechart");
            })

        }]
    }

我以前从未遇到过 resolve，我对 angularjs 很陌生，不知道在切换到 ui-router< 后如何处理这个部分/strong>.

Answer 1

resolve 属性本质上告诉 angularjs，其中的回调必须在显示状态之前完成。 NgRouter 有这个，但 ui-router 也有。 Here's some reading for you.

这段代码应该可以工作:

.state('admin.dashboard', {
    url: '/dashboard',
    views: {
        'content@': {
            templateUrl: '/_admin/views/dashboard.html',
            controller: 'DashboardCtrl'
        }
    },
    resolve: {
        deps: ["$ocLazyLoad", function(a) {
            return a.load([jqload.c3, jqload.sparkline])
            .then(function() {
                return a.load({
                    name: "app.directives",
                    files: ["scripts/lazyload/directives/sparkline.directive.js"]
                })
            })
            .then(function() {
                return a.load("angular-c3");
            })
            .then(function() {
                return a.load("easypiechart");
            })

        }]
    }
})