Problem with details view


#1

Hello ionics, I’m new in AngularJS and I have a problem when I try to show view of details of posts
I have this “test” json:

[{“titulo”:“Encontrar trabajo después de los 43”,“foto”:"",“autor”:“Francesc”,“id”:“0”,“apellido”:“Ramírez”},{“titulo”:“ultima noticia buena”,“foto”:“http://tecnonewstest.ebdsoft.com/files/3-4739-foto/shot.png",“autor”:"Redacción TNI”,“id”:1,“apellido”:""},{“titulo”:“prueba”,“foto”:"",“autor”:“Redacción TNI”,“id”:2,“apellido”:""},{“titulo”:“COn foto”,“foto”:“http://tecnonewstest.ebdsoft.com/files/3-4733-foto/Boston City Flow.jpg”,“autor”:“organizacion”,“id”:3,“apellido”:""},{“titulo”:“prueba para actualizar yeah”,“foto”:“http://tecnonewstest.ebdsoft.com/files/3-4732-foto/Crisantemo 76.jpg”,“autor”:“Jordi”,“id”:4,“apellido”:“Aguilar”},{“titulo”:“noticia modificable yeah”,“foto”:“http://tecnonewstest.ebdsoft.com/files/3-4730-foto/Boston City Flow.jpg”,“autor”:“redaccion Tecnonews”,“id”:5,“apellido”:""},{“titulo”:“edicion 01234”,“foto”:"",“autor”:“Tecnonews”,“id”:6,“apellido”:""},{“titulo”:“YO”,“foto”:“http://tecnonewstest.ebdsoft.com/files/3-4728-foto/felipe rey leon.jpg”,“autor”:“Tecnonews”,“id”:7,“apellido”:""},{“titulo”:“prueba noticia”,“foto”:"",“autor”:“Redacción TNI”,“id”:8,“apellido”:""},{“titulo”:"&¿PU’BLICA?& |·\/()ñ:ç¬=*¨_-ºª€`´^´{[œ",“foto”:“http://tecnonewstest.ebdsoft.com/files/3-4720-foto/Boston City Flow.jpg”,“autor”:“Redacción TNI”,“id”:9,“apellido”:""}]

and this my controllers, first one the view of POSTS (this run fine):

.controller('NoticiasCtrl', function($scope, $timeout, servicioInformacion) {
    $scope.items = [];

    servicioInformacion.GetFeed().then(function(items){
        $scope.items = items;
    });
})

and this, controller view of POST detail (not run fine):

.controller('NoticiaCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
    $http.get('$routeParams.itemId').success(function(data) {
        $scope.item = data;
    });
}]);

Anyone help me please?

Thanks so much in advance!


#2

What does your html markup for the posts look like? And are you getting any errors in your console?


#3

Hello brandyshea, thanks for your answer.
my html code for view POSTS:

        <ion-list>
            <a href="#/app/noticias/{{item.id}}">
                <ion-item class="item-thumbnail-left" ng-repeat="item in items" href="#/app/noticias/{{item.id}}">
                    <img src="{{item.foto}} "/>
                    {{item.titulo}}<br/><span style="color: limegreen">{{item.autor}} {{item.apellido}}</span>
                </ion-item>
            </a>
        </ion-list>

and my html for view detail post:

        <div class="item">
            <h3>{{item.titulo}}</h3>
            <h2>{{item.autor}}</h2>
            <p>{{item.apellido}}</p>
        </div>
        <div class="item item-body">
            <img class="full-image" ng-src="{{items.foto}}">
            <p>{{item.texto}}</p>
        </div>

Console show this error:

Error: [$injector:unpr] Unknown provider: $routeParamsProvider <- $routeParams <- NoticiaCtrl


#4

Thanks for the markup.

Are you using $routeProvider in your config or are you using $stateProvider? This can be found in app.js if you haven’t moved it:

app.config(function($urlRouterProvider, $stateProvider) {
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'templates/home.html',
            controller: 'HomeCtrl'
        })
        ...
});

If you are using $stateProvider you need to use $stateParams not $routeParams in your topic controller.


#5

Thanks so much! I use stateProvider.
I corrected my error but the console now show this:

GET http://localhost:8100/$stateParams.itemId 404 (Not Found)

thanks for all


#6

You’re wrapping the $stateParams.itemId in quotes which is causing it to read it as a string instead of a variable.


#7

Yes! you’re right

my controller looks like this:

.controller('NoticiaCtrl', function($scope, $stateParams, $http) {
    $http.get($stateParams.itemId).success(function(data) {
        $scope.item = data;
    });
});

and now I have this error:

GET http://localhost:8100/1 404 (Not Found)

thanks brandyshea :smile:


#8

$http is expecting a URL, and it uses that to request the page. The page you are passing to it doesn’t exist.

If you’re trying to get the details of the topic with that specific id, you should be calling a service.

See this blog post (specifically the PeopleService section) for a way to do this:


#9

nice @brandyshea !!

it all works, thanks you a lot! :smile: