AngularJS and Mongo DB page request Updated

Question

I am working on a site witch pages content is stored into a mongoDB. I am not sure how to proceed.

First: I will build the menu with all my links from this database. So I store all my pages in the scope.pages variable.

This is what a page looks like in my MongoDB hosted on MLAB for development.

{
    "_id": {
        "$oid": "58803eb7f36d2842fdb4aed0"
    },
    "name": "index",
    "file": "index.html",
    "titre": "My title",
    "author": "Me",
    "headline": "the h1 tag content",
    "content": "the text content of my document."
}

So now I load the content of my DB in the scope.pages var

This is what the app looks like.

'use strict';

var mid = angular.module('mid', [
  'ngRoute'
])


mid.controller('pageCtrl', function($scope, $http){
  $scope.pages = [];

  $http({
    method: 'GET',
    url: 'http://127.0.0.1/pages'
  })
    .then(function(pages) {
      $scope.pages = pages.data;
   })
    .catch(function(errRes) {
      // Handle errRess
  });
});

Here the GET method is actualy calling for the data from the node server and it look like this.

app.get('/pages', function(req, res){
  //calling the function
  MongoClient.connect(url, function(err, db) {
    if(err) {
      console.log(err);
      return res.status(500).send(err);
   }
    findPage(db, function(err, pages) {
        if(err){
          res.status(500).json(err);
        }
        else{
            if(!pages){
              res.status(204).send();
              }
              else{
                  console.log(pages);
                  res.jsonp(pages);
                  }
               db.close();
               return;
            }
        });  
    });
  });

So when I type in the address bar mydomain.com/pages I am getting all my pages. My controller call for this url and store the result into the scope.

Now inside the actual html page I am referring to 1 page inside the scope.pages array like this.

<body ng-controller="pageCtrl">
{{pages[0].name}}
</body>

The result of this is "index" since the first page in the array is the page shown above in my mongoDB.

Has you can see i am calling for the entire DB to fill the scope.

I would like my menu to provide links to a certain page and this is where I am not sure how to proceed.

My menu would look like this

<div ng-repeat="page in pages" ng-cloak class="nav-item" >
<a href="#/pages/{{page.id}}">{{page.name}}</a>
</div>

I want to be able to use some route this way.

when("/pages/:id", {templateUrl: "test2.html", controller: "pageCtrl"}).

Now this is all working. When I type mydomain.com/pages/1 in the adress bar I am getting test2.html as a view.

But how do I refer to this ID provided in the address bar so I can load the right content and pass this id to my scope like this

<body ng-controller="pageCtrl">
{{pages[id].name}}
</body>

So I would end up having the one page id I want inside my view

ManuKaracho · Accepted Answer · 2017-01-21 13:45:30Z

1

You can inject the $routeParams provider to your controller and load the content based on your :id parameter

mid.controller('pageCtrl', function($scope, $http, $routeParams){      
  $scope.id = ($routeParams && $routeParams["id"]) ? $routeParams["id"] : 0;
});

answered Jan 21, 2017 at 13:45

ManuKaracho

1,2282 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MadeInDreams Over a year ago

For some reason im getting an error; TypeError: Cannot read property 'id' of undefined

MadeInDreams Over a year ago

I have added your code and changes the {{pages[1].name}} by {{pages[scope.id].name}} im not getting any errors and no data.

MadeInDreams Over a year ago

Nevermind i got it to work i was using {{id}} Thank you

Collectives™ on Stack Overflow

AngularJS and Mongo DB page request Updated

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related