在MEAN应用

时间:2015-12-24 11:41:23

标签: angularjs node.js api express ngresource

我在开发MEAN堆栈应用程序时遇到了一些麻烦。 这就是问题所在:

在后端,我有一个从Mongo数据库返回数据的API。如果我从URL调用此api,一切都很好,但是当AngularJS执行此操作时,问题就出现了。

这是我的服务器端路由文件的代码:(注意,这不是完整的代码,只是不工作的代码块)

var users = require('../../app/controllers/users.server.controller'),
articles = require('../../app/controllers/articles.server.controller');

module.exports = function(app) {
    app.route('/api/:userId/articles/')
        .get(articles.listArticulosUsuario)
        .post(users.requiresLogin, articles.create);

    app.param('articleId', articles.articlesByUser);
}

这是服务器端控制器中的功能:

exports.listArticulosUsuario = function(req, res) {
    // Usar el método model 'find' para obtener una lista de artículos
    Article.find({creador:{_id: req.params.userId}}).sort('-creado')
        .populate('creador', 'firstName lastName fullName  username').exec(function(err, articles) {
            if (err) {
                // Si un error ocurre enviar un mensaje de error
                return res.status(400).send({
                    message: getErrorMessage(err)
                });
            } else {
                // Enviar una representación JSON del artículo
                res.jsonp(articles);
            }
        });
    };
 exports.articlesByUser = function(req, res, next, id) {
    // Usar el método model 'findById' para encontrar un único artículo
    Article.find({creador:{_id: req.params.userId}}).populate('creador',     'firstName lastName fullName').exec(function(err, articles) {
        if (err) return next(err);
        if (!articles) return next(new Error('Fallo al cargar el artículo ' + id));

        // Si un artículo es encontrado usar el objeto 'request' para pasarlo al siguietne middleware
        req.articles = articles;
        //console.log('hola')
        // Llamar al siguiente middleware
        next();
    });
};

如果我直接从URL发出请求,例如传递http://localhost:3000/api/5679df50c735551804206812/articles会返回:

[{
"_id":"5679df6ec735551804206813",
"creador":{
    "_id":"5679df50c735551804206812",
    "firstName":"Guest",
    "lastName":"1",
    "username":"guest1",
    "fullName":"Guest 1",
    "id":"5679df50c735551804206812"},
"__v":0,
"contenido":"efsdafasfasd",
"titulo":"ese",
"creado":"2015-12-22T23:40:30.793Z"
}]

但问题是当我尝试将资源实现到AngularJS时,这里是客户端代码块:

这是配置文件。

文件:users-articles.client.config.js(配置文件)

//invocar modo javascript 'strict'
'use strict'

//configurar el modulo routes de 'articles'
angular.module('usersArticles').config(['$routeProvider',
  function($routeProvider){
    $routeProvider.
    when('/:userId/articles' ,{
      templateUrl: 'users-articles/views/user-articles.client.view.html'
    });
  }
]);

这是控制器文件

文件:users-articles.client.controller.js

//invocar modo javascript 'strict'
'use strict';

//crear el controller 'articles'
angular.module('usersArticles').controller('UsersArticlesController',  ['$scope', '$routeParams', '$location', 'UserArticles',
   function($scope,$routeParams,$location,UserArticles) {
     //Exponer el service Authentication

     //crear un nuevo metodo controller para recuperar una lista de articulos por usuario
     $scope.findByUser = function(){
     //usar el metodo 'query' de article para enviar una peticion GET apropiada
     $scope.articless = UserArticles.query();
   }
  }
]);

这是服务文件

file:users-articles.client.services.js

//Invocar modo javascript strict
'use strict';


 //crear el service 'articles'
angular.module('usersArticles').factory('UserArticles', ['$resource' ,
    function($resource) {
    //usar el service '$resource' para devolver un objeto '$resource' article
         return $resource('/api/:userId/articles', {}, {
             query: { method: 'GET', params: {userId: '@creador._id'}, isArray: true }
        })

 }]);

这是视图文件

file:users-articles.client.view.html

<!-- La view listar articulos -->
<section data-ng-controller="UsersArticlesController" data-ng-init="findByUser()">
  <h1>Articulos del user</h1>
  <h5><a data-ng-href="#!/articles" >Volver a todos los artículos</a></h5>
  <ul>
    <!--La lista de articulos -->
    <li data-ng-repeat="article in articless">
        <h3>
          <a data-ng-href="#!/articles/{{article._id}}" data-ng-bind="article.titulo"></a>
        </h3>
        <br>
        <small data-ng-bind="article.creado | date: 'medium'"></small>
        <small>/</small>
        <small>
          <a data-ng-href="#!/users/{{article.creador._id}}/articles" data-ng-bind="article.creador.fullName"></a>
        </small>
        <p data-ng-bind="article.contenido"></p>
    </li>
  </ul>
  <!-- Si no hay articulos en la lista, sugerimos al usuario que cree un nuevo articulo -->
  <div data-ng-hide="!articless || articless.length">
    Aún no hay articulos, ¿Por qué no <a href="/#!/articles/create">creas  uno</a>?
  </div>
</section>

因此,所涉及的所有代码,我现在都会显示错误的行为。 当资源调用&#34; / api /:userId / articles&#34; 时,它会调用&#39; / api / articles&#39; 并且:userId似乎不存在..

如果我拨打&#39; / api / Hello:userId / articles&#39; ,它会尝试拨打 / api / Hello / articles < / p>

所以看起来冒号(:)之后的单词会神奇地消失

你带给我的任何帮助都很好,谢谢你,对不起我的英语不好。

0 个答案:

没有答案