ngRouter到ui-router

问题描述 投票:2回答:1

我最近购买了一个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后不知道如何处理这个部分。

javascript angularjs asynchronous angular-ui-router angularjs-ng-route
1个回答
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");
            })

        }]
    }
})
© www.soinside.com 2019 - 2024. All rights reserved.