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

【问题标题】：AngularJS Controller initialization by state with $routeProvider使用 $routeProvider 按状态初始化 AngularJS 控制器
【发布时间】：2015-09-21 04:10:33
【问题描述】：

我有一个控制器，旨在支持某个模型的所有 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' });
}

对于补丁 - 我通过检查路径明确区分。我猜这不是角度的最佳实践。

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

【问题讨论】：

可以在路由配置对象中设置其他属性并通过$route.current检查它们或使用resolve在控制器中注入变量
还有哪些属性？ $routeProvider.when 的文档似乎没有相应的属性。我错过了什么？ docs.angularjs.org/api/ngRoute/provider/$routeProvider
hmm...我知道您曾经能够在这些对象上设置属性...。现在您似乎不能，但仍然可以使用resolve。好久没用ngroute 一直用ui-router
由于对这个简单问题缺乏活动，以及您（charliefl）的回答 - 您是否建议 AngularJS 导航的行业标准是 ui-route 而不是本机 angularJS $routeProvider ？
答案可能是肯定的，因为它更加健壮和灵活，并且支持嵌套视图和父状态。角度路由器刚刚进行了重大升级，但新路由器不像您使用的那样ngroute

标签： angularjs

【解决方案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;
}

【讨论】：