AngularJS call method inside $routeProvider

Question

I'm newer in AngularJS. So I have a simple question, but I can't find answer. I have code:

angular.module('app', ['app.controllers', 'ngRoute']).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/users', {templateUrl: '../pages/list.html', controller: 'UserListCtrl'}).
        when('/user-details/:login', {templateUrl: '../pages/form.html', controller: 'UserCtrl'  /* and here I need to call userDetails(login) from UserCtrl */}).
        otherwise({redirectTo: '/users'});;
}
]);

app.controller('UserCtrl', function ($scope, $http, $location) {
$scope.userDetails = function (login) {
    $http.get(url + login).success(function (data) {
        $scope.user = data[0];
        console.log('tst');
    }).error(errorCallback);
};

$scope.createUser = function (user) {
    $http.post(url, user).success(function (data) {
        $location.path('/users');
    }).error(errorCallback);
};
});

My problem is: I don't know how to call specific method of controller when routing matches. I need to call method and give to it parameter :login from routing. How to solve this? Thanks for your answers

Take a look at this post http://stackoverflow.com/questions/16384134/how-to-call-a-function-in-angularjs-when-route-matches. You can call your userDetails method in your controller like this $scope.userDetails() — Yevgeniy.Chernobrivets, Jun 21 '14 at 10:24
@Yevgeniy.Chernobrivets , this is not solution. I have 2 methods in controller. And I don't want to call userDetails each time when I use this controller. For example, if I will call createUser method, it will call stuff for userDetails automaticaly — Oleksandr H, Jun 21 '14 at 10:38
Then maybe resolve option will help you? https://docs.angularjs.org/api/ngRoute/provider/$routeProvider#methods_when — Yevgeniy.Chernobrivets, Jun 21 '14 at 10:50

gkalpak · Accepted Answer · 2014-06-21T19:37:41.150

If I understand correctly, you are re-using the same controller for two parts of the view (or for two views), one for creating a user and one for fetching the details of the current user.

Since these two aspects are totally different, it is not advisable to use the same controller for both. The controllers should be different and any common or re-usable functionality should be shared through a service.

In any case, code that makes calls to the backend should not be placed inside controllers, but into services. E.g.:

app.service('UserSrv', function ($http) {
    var url = '...';
    this.userDetails = function (login) {
        return $http.get(url + login);
    };
    this.createUser = function (user) {
        return $http.post(url, user);
    };
});

app.controller('UserCtrl', function ($scope, UserSrv) {
    var login = '...';
    var errorCallback = ...;

    // Fetch user details upon initialiation
    UserSrv.userDetails(login).success(function (data) {
        $scope.user = data[0];
    }).error(errorCallback);
});

app.controller('NewUserCtrl', function ($location, $scope, UserSrv) {
    var errorCallback = ...;

    $scope.createUser = function (user) {
        UserSrv.createUser(user).success(function (data) {
            $location.path('/users');
        }).error(errorCallback);
    };
});

You could, also, use $routeProvider's resolve property to "preload" the user's details and pass it to the UserCtrl as an argument.

AngularJS call method inside $routeProvider

1 Answers1