AngularJS用$routeProvider按状态初始化控制器

Question

我有一个控制器，用于支持某个模型的所有CRUD操作:显示记录列表、显示记录的详细信息、编辑、创建、更新和删除。

使用相同的控制器呈现不同的视图-但对于每个视图，需要不同的初始化:对于列表，我应该加载一页记录，对于详细信息视图-我将按ID加载。

初始化时获取控制器"状态"的最佳实践是什么?

下面是我使用的几个路由的例子:

function config($routeProvider, $locationProvider) {
    $routeProvider
        // ...
        .when('/activity/list', {
            controller: 'ActivityController',
            templateUrl: 'views/activityList.html',
            controllerAs: 'vm'
        })
        .when('/activity/create', {
            controller: 'ActivityController',
            templateUrl: 'views/createNewActivity.html',
            controllerAs: 'vm'
        })
        .when('/activity/:id', {
            controller: 'ActivityController',
            templateUrl: 'views/activity.html',
            controllerAs: 'vm'
        })
        .otherwise({ redirectTo: '/login' });
}

表示补丁-我明确地与检查路径区分开来。我猜这不是angular的最佳实践。

if ($location.$$path == '/activity/list') {
    initList();
}

Answer 1

在我看来，在你的情况下，最好的方法是离开控制器单独使用RestAPI，这里是一个例子，我将如何做到这一点:

路由文件:

.when('/tours', {
    templateUrl: 'scripts/partials/pages/tours.partial.html',
    controller: 'TourController',
    controllerAs: 'vm',
    resolve: {
        toursService: function (genericData) {
            return genericData.getTours;
        }
    }
})
.when('/tour/:id', {
    templateUrl: 'scripts/partials/pages/tour-single.html',
    controller: 'TourSingleController',
    controllerAs: 'vm',
    resolve: {
        toursSingleService: function ($route, genericData) {
            // This will get us the current item with specific ID
            var id = $route.current.params.id;
            return genericData.getTourSingle(id);
        },
    }
})

这是我的genericservice.js文件:

function genericData($resource) {
    // ngResource call to our static data
    var TourSingle = $resource('/api/tour/:id', {'id': '@id'});
    function getListData(RestData) {
        return RestData.query().$promise.then(function(results) {
            return results;
        }, function(error) { // Check for errors
        });
    }
    function getSpecificData(id) {
        return TourSingle.get({'id':id}).$promise.then(function(results) {
            return results;
        }, function(error) { // Check for errors
        });
    }
    return {
        getTours: getListData(TourSingle),
        getTourSingle: getSpecificData,
    }
}

这是控制器的例子:

function TourController(toursService) {
    // vm is our capture variable
    var vm = this;
    vm.tours = toursService;
}