Calling controller from function and passing it a URL-encoded parameter

I am developing a CRUD interface for a Rest service. Currently, I could manage to get the list of teams in the system.

What I like to do is to show details for the when I click the show link. Currently clicking on the link calls a function (not yet implemented) that is supposed to load the details part into the ng-view. The function should pass a parameter to the ViewTeamController which will subsequently invoke the Rest service and give the result to a $scope variable.

I am not sure about how to call the ViewTeamController possibly using a URL encoded parameter from the showTeam() function. And I would also like to know how to read the URL-encoded parameter inside the ViewTeamController.

Thanks in advance.

<!doctype html>
<html>

<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular-route.min.js"></script>

    <script>
        var teamApp = angular.module("teamApp", ['ngRoute']);

        teamApp.controller('teamController', function($scope, $http) {

            $http
                    .get('/teams')
                    .success(function(response) {
                        $scope.teams = response;
                    }
                    );
        });

        mainApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider.

            when('/addTeam', {
                templateUrl: 'addTeam.htm',
                controller: 'AddTeamController'
            }).

            when('/viewTeam', {
                templateUrl: 'viewTeam.htm',
                controller: 'ViewTeamController'
            }).

            otherwise({
                redirectTo: '/addTeam'
            });
        }]);

        mainApp.controller('AddTeamController', function($scope) {

        });

        mainApp.controller('ViewTeamController', function($scope) {

        });

    </script>
</head>

<body>

<div ng-app = "teamApp" ng-controller="teamController">

    <a ng-click="newTeam()">new</a>

    <div ng-repeat="team in teams" >
        Name: {{team.name}}
        <br />
        Description: {{team.description}}
        <br />
        <a ng-click="showTeam(team.id)">show</a>
    </div>

    <div ng-view></div>

    <script type = "text/ng-template" id = "addTeam.htm">
        <h2> Add Team </h2>
        To be implemented later.
    </script>

    <script type = "text/ng-template" id = "viewTeam.htm">
        Name: {{team.name}}
        Description: {{team.description}}
    </script>
</div>
</body>
</html>

Solution

Your controller functions can get access to route parameters via the AngularJS $routeParams service like this:

 mainApp.controller('ViewTeamController', function($scope, $routeParams) {
              $scope.param = $routeParams.param;  // will hold your encoded params
        });

Considering you are passing the parameters as something like this in your URL,

/viewTeam/23535t4645645g4t4

Now your $scope.param will hold 23535t4645645g4t4