AngularJs view user details

Question

I'm building a website and I have some users, or clients. For this, I have a general table with just some basic information like name, type and e-mail, and I want to show all the client/user information in another page, because each client/user will have a lot more information, like phone, address, etc..

Old Method
Since I'm new to angularjs, I couldn't do it yet. I have an old website, working with HTML and PHP. The way I do it is to send the user id through the url, then, in the new page (det_user.php), I get this URL parameter to call all the user information and then load it into a table.

Is this the best way to do it with AngularJS? If there is another method to it without sending the id through the URL, but to keep the user able to refresh/share the page link, please tell me.

What I tried to do

I was looking for an answer everywhere I could, but couldn't found any complete answer, just some parts. So here is what I tried so far:

scripts.js

var myApp=angular.module("myApp",["ngRoute"]);

myApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Home',
        {
            controller: 'HomeCtrl',
            templateUrl: 'content/home.html'
        })
        .when('/cliente',
        {
            controller: 'ClienteCtrl',
            templateUrl: 'content/cliente.html'
        })
        .when('/detcli/:id',
        {
            controller: 'DetCli',
            templateUrl: 'content/detclinte.html'
        })
        .otherwise({
            redirectTo: '/Home'
        });
});

myApp.controller('ClienteCtrl', function ($scope, $http, $routeParams) {
    $scope.get_cliente = function() {
        $scope.loading = true;
        $http.get("scripts/php/db.php?action=get_cliente")
        .success( function(data) {
            $scope.pagedClientes = data;
            $scope.loading = false;
        })
        .error(function(data) {
        });
    };
});

myApp.controller('DetCli', function ($scope, $http, $routeParams) {
    var clienteId = $routeParams.clienteId;
    //more functions here?
});

cliente.html

<div class="block" ng-controller="ClienteCtrl">
<tbody ng-init="get_cliente()">
    <tr ng-repeat="cliente in pagedClientes | filter:searchField | filter:clifilter | orderBy:sortType:sortReverse">
        <td>{{cliente.nome}}</td>
        <td>{{cliente.tipo}}</td>
        <td>{{cliente.email}}</td>
        <td >
            <a href="#/detcliente/:clienteid">View</a>
            <a ng-click="cli_edita(cliente.id)">Edit</a>
            <a ng-click="cli_deleta(cliente.id)">Del</a>
        </td>
    </tr>
</tbody>
</div>

detcliente.html
I'm not really sure how to work the code on this page

<div class="block" ng-controller="DetCli">
    <tbody ng-init="get_detcliente()">
        <tr>
            <td>Name</td>
            <td>{{cliente.nome}}</td>
        </tr>
        <tr>
            <td>Email</td>
            <td>{{cliente.email}}</td>
        </tr>
        <tr>
            <td>Phone</td>
            <td>{{cliente.phone}}</td>
        </tr>
        [...more data...]
    </tbody>
</div>

Thank you for now.

Edit:

Thanks to @pankajparkar i'm almost there, i could pass the id from the cliente.html to the detcliente.html the problem now seems to be to integrate the data i'm getting from the server with the code to filter it by the id. After some search i could get this code, but still not working.. It seems to be the json data, i need to send it to filter by the id. Any idea? This is the code.

myApp.controller('DetcliCtrl', function ($scope, $http, $routeParams, $filter) {
    var clienteId = $routeParams.id;

    $scope.mainmsg = "Detalhes do cliente " + $routeParams.id;
    $scope.search = function() {
        var url = 'scripts/php/db.php?action=get_cliente';
        $http.get(url).success( function(data) {
            $scope.pagedClientes = data;
        }).error(function() {
            alert('Unable to get back informations :( ');
        });
    }

    var resultado = $filter('filter')(data.results, {id:clienteId})[0];
    $scope.nome = resultado.nome;

});

Answer 1

In your DetCli controller it should be $routeParams.id; instead of $routeParams.clienteId;

myApp.controller('DetCli', function ($scope, $http, $routeParams) {
    var clienteId = $routeParams.id; //<--change here
    //more functions here?
});

& Your href should be <a ng-href="#/detcliente/{{cliente.id}}">View</a> so that href will get created correctly. Then you would get correct clientId from url using $routeParams.

Markup

<tbody ng-init="get_cliente()">
    <tr ng-repeat="cliente in pagedClientes | filter:searchField | filter:clifilter | orderBy:sortType:sortReverse">
        <td>{{cliente.nome}}</td>
        <td>{{cliente.tipo}}</td>
        <td>{{cliente.email}}</td>
        <td >
            <a ng-href="#/detcliente/{{cliente.id}}">View</a>
            <a ng-click="cli_edita(cliente.id)">Edit</a>
            <a ng-click="cli_deleta(cliente.id)">Del</a>
        </td>
    </tr>
</tbody>