ngRouter到ui-router

Posted 2021-04-17

我最近购买了一个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: {
        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");
            })

        }]
    }

我以前从来没有遇到过决心，我对angularjs很新，并且在切换到ui-router后不知道如何处理这个部分。

答案

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");
            })

        }]
    }
})