Angularjs single route Parameters

Question

Good guys,

I am trying to create a simple parameter on my route in the Angularjs. What I want is for my job page every time I click on an article to open the information in that article on another page. I can get the ID, but the information doesn’t add up. Says the id is not set.

My code is this::

app js.

    .when("/job" , {
        templateUrl: "app/components/job/views/job.html",
        controller: "job"
    })
    .when("/job/:jobId" , {
        templateUrl: "app/components/job/views/jobdetail.html",
        controller: "job_detail"
    })   

job js.

$scope.products = [];

$http.get('app/components/job/controller/teste.json').success(function (resource) {
    $scope.products = resource;
});

$scope.jobId = $routeParams;

job_detail.js

app.controller("job_detail", ["$scope", "$http", "$location", "$route","$rootScope", "$routeParams", function($scope, $http, $location, $route, $rootScope, $routeParams) {

    $scope.products = [];

    $http.get('app/components/job/controller/teste.json').success(function (resource) {
        $scope.products = resource;
    });

    $scope.jobId = $routeParams.jobId;

    console.log($scope.jobId);
    $scope.params = $scope.jobId.get(id);


}]);

html job:

        <article dir-paginate="product in filteredJobs | filter:searchTerm | orderBy: sorting.order:sorting.direction | itemsPerPage:5" id="{{product.id}}" class="productlist product col-sm-12"> 
            <div class="inner-content">
                <div class="clearfix">                        
                    <div class="col-md-8 col-sm-8 col-xs-8">
                        <h4 class="productname" name="{{product.Categoria}}"><a data-ng-href="#/job/{{product.id}}">{{product.Title}}</a></h4>
                        <h4 style="color: gray;"><a data-ng-href="#/empresa">{{product.Empresa}}</a></h4>
                        <span class="glyphicon glyphicon-map-marker" style="float:left; padding-right: 15px;"><h6 style="display: inline">{{product.Localidade}}</h6></span>
                        <span class="glyphicon glyphicon-time" style="float:left;"><h6 style="display: inline;">{{product.Horario}}</h6></span>                        
                    </div>                        
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <a class="thumb" data-id="{{product.id}}" data-ng-href="#/product/{{product.id}}">
                            <img ng-src="{{product.Image}}" class="img_jobs"> 
                        </a>
                    </div> 
                </div>
            </div>
        </article>

job_detail html:

<!-- Job Section -->
<section id="slide" class="job-section">
        <article id="{{product.id}}" class="productlist product col-sm-12"> 
            <div class="inner-content">
                <div class="clearfix">                        
                    <div class="col-md-8 col-sm-8 col-xs-8">
                        <h4 class="productname" name="{{product.Categoria}}">{{product.Title}}</h4>
                    </div>                        
                </div>
            </div>
        </article>
</section>

Answer 1

Getting the code from your job_detail.js:

...
$scope.jobId = $routeParams.jobId; // <- o id vindo do parametro de rota esta aqui no $routeParams.jobId.

console.log($scope.jobId);
$scope.params = $scope.jobId.get(id); // <- esse 'id' não tem referencia dele em lugar nenhum do código da sua controller.
...