AngularJS和Mongo DB页面请求**已更新**

时间:2017-01-21 13:11:19

标签: javascript angularjs mongodb

我正在一个网站上工作,将页面内容存储到mongoDB中。我不知道该怎么办。

首先:我将使用此数据库中的所有链接构建菜单。所以我将所有页面都存储在scope.pages变量中。

这是我在MLAB上托管开发的MongoDB中的页面。

{
    "_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."
}

现在我在scope.pages var

中加载我的数据库的内容

这就是应用程序的样子。

'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
  });
});

这里GET方法实际上是从节点服务器调用数据,它看起来像这样。

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;
            }
        });  
    });
  });

所以当我输入地址栏mydomain.com/pages时,我收到了所有的页面。我的控制器调用此URL并将结果存储到范围中。

现在在实际的html页面中,我指的是scope.pages数组中的1个页面。

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

结果是“索引”,因为数组中的第一页是上面显示的mongoDB中的页面。

您是否可以看到我呼吁整个数据库填补范围。

我希望我的菜单提供指向某个页面的链接,这是我不知道如何继续的地方。

我的菜单看起来像这样

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

我希望能够以这种方式使用某种路线。

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

现在这一切都在发挥作用。当我在地址栏中输入mydomain.com/pages/1时,我将test2.html视为一个视图。

但是如何引用地址栏中提供的此ID,以便我可以加载正确的内容并将此ID传递给我的范围

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

所以我最终会在我的视图中找到我想要的单页ID

1 个答案:

答案 0 :(得分:1)

您可以将$routeParams提供商注入您的控制器,并根据您的:id参数加载内容

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