ng-route不显示templateurl而是显示来自节点服务器的json数据

时间：2016-09-16 10:27:02

标签： javascript angularjs mean-stack

我正在使用MEAN堆栈处理freecodecamp投票应用（https://www.freecodecamp.com/challenges/build-a-voting-app）。我已经完成了后端部分（截至目前不包括用户身份验证）。

目前我专注于前端部分。我创建了一个html页面，显示了所有民意调查的列表。理想情况下，当我点击特定的民意调查时，我应该被重定向到模板html，它显示每个选项的选项和投票计数。为此，我使用了ng-route库。但是不是获取html页面，而是从节点服务器获取json数组。

以下是我的代码段：

的index.html 

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"  class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/routes.js"></script>
  <script type="text/javascript" src="js/controllers/poll-read-controller.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body class="background" ng-app="votingApp">

  <!-- div for button group><!-->
  <div class="btn-group btn-group-lg" role="group" aria-label="...">
    <button type="button" class="btn btn-default" id="home">Home</button>
    <button type="button" class="btn btn-default" id="login">Log In</button>
  </div>

  <!-- div for header><!-->
  <div class='header'>FreeCodeCamp Voting App</div>

  <!-- div for voting list><!-->
  <div ng-controller="VotingListController as v">
    <ul class='list'>
    <li class='question row' ng-repeat='poll in v.polls'><a ng-href='/{{poll.question}}'>{{poll.question}}</a></li>
    </ul>  
  </div>
  <poll_view></poll_view>   



</body>
</html>

app.js 

(function(){
// Declare app level module which depends on views, and components
var ang = angular.module('votingApp', ['ngRoute']);
ang.controller("VotingListController",['$scope','$http','$location',function($scope,$http,$location){
  var list = this;
  $http.get('https://fcc-voting-app-ajinkya009.c9users.io/list').success(function(data){
    list.polls=data;
  });
}]);
})();

routes.js 

(function(){
// Declare app level module which depends on views, and components
var ang = angular.module('votingApp')
          .config(['$routeProvider',function($routeProvider){
              $routeProvider
              .when('/:question',{
                 templateUrl:'/../template/poll_view.html',
                 controller:'pollReadController',
                 controllerAs:'pollRead'
              });
          }]);
})();

轮询读controller.js 

(function(){
    angular.module('votingApp')
    .controller('pollReadController',function($http,$routeParams){
       var controller = this;
       $http.get('https://fcc-voting-app-ajinkya009.c9users.io/'+$routeParams.question).success(function(data){
          controller.vote = data; 
       });
    });
})();

poll_view.html 

<div ng-repeat="vote in pollRead.vote">
    <ol>
       <li>
           <p>Option:{{vote.option}}</p>
           <p>Count:{{vote.count}}</p>
       </li> 
    </ol>
</div>

这里是一个示例json数据，而不是html页面：

[
    {
        _id: "57d90d6bbb1828e112ff70dc",
         question: "google or yahoo",
        __v: 0,
        vote: [
                {
                  option: "google",
                  count: 2,
                  _id: "57d90d6bbb1828e112ff70de"
                },
                {
                  option: "yahoo",
                  count: 0,
                  _id: "57d90d6bbb1828e112ff70dd"
                }
             ]
    }
]

服务器/ index.js 

var express = require('express');
var path = require('path');
var bodyParser = require("body-parser");
var app = express();
var mongoose = require('mongoose');
var polls = require('./models/poll');
var methodOverride = require('method-override');
var port = 8080;
var ip = process.env.IP;
var db = mongoose.connect('mongodb://localhost/meanapp');
var poll = db.model('poll',polls);
mongoose.connection.once('open', function() {

  console.log('Listening on port: '+ port);
  app.use(express.static(path.join(__dirname + "/../client")));
  app.use(bodyParser.json());
  app.set('view engine','html');
  //app.use(express.logger('dev'));
  //app.use(express.methodOverride());
  //app.use(app.router);

  // Add Middleware necessary for REST API's
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(methodOverride('X-HTTP-Method-Override'));

// CORS Support
app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});


  app.get('/list',function(req,res){
    console.log('received')
    poll.find({},function(err,list){
        if(err)throw err;
        res.json(list);
    });
  });

   app.get('/:question',function(req,res){
    poll.find({question: req.params.question},function(err,data){
        if(err)throw err;
        res.json(data);
    });
  });

  app.post('/question',function(req,res){
      var p = new poll({question:req.body.question,vote:req.body.vote});
      p.save(function(error){
          if(error){
              throw error;
          }
          res.json(p);
      });
  });

  app.put('/:question',function(req,res){

     poll.update(
         {
           "question": req.params.question,
           "vote.option":req.body.option
         },
         {$inc:{"vote.$.count":1}},
         function(error){
             if(error)throw error;
         }
     );
     res.json(poll);
  });

  app.put('/question/update/:id',function(req,res){


     poll.update(
         {"_id":req.params.id},
         {"$set":{"question":req.body.question,"vote":req.body.vote}},
         function(error){
           if(error)throw error;
         }
     );

  });



  app.listen(port);
});

这是我项目的链接：https://ide.c9.io/ajinkya009/fcc_voting_app

P.S。我从两个月开始学习MEAN堆栈（非常初学者），所以如果你发现代码中有任何错误，无论多么微不足道，请告诉我。

1 个答案:

答案 0 :(得分：0)

终于解决了!!我没有在index.html的锚点href链接中添加“片段标识符”（＃）。除此之外，我还必须调整一些其他代码。

以下是更新后的工作代码：

<强> 的index.html 

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"  class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/routes.js"></script>
  <script type="text/javascript" src="js/controllers/poll-read-controller.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body class="background" ng-app="votingApp">

  <!-- div for button group><!-->
  <div class="btn-group btn-group-lg" role="group" aria-label="...">
    <button type="button" class="btn btn-default" id="home">Home</button>
    <button type="button" class="btn btn-default" id="login">Log In</button>
  </div>

  <!-- div for header><!-->
  <div class='header'>FreeCodeCamp Voting App</div>

  <!-- div for voting list><!-->
  <div ng-controller="VotingListController as v">
    <ul class='list'>
    <li class='question row' ng-repeat='poll in v.polls'><a ng-href='#/list/{{poll.question}}'>{{poll.question}}</a></li>
    </ul>  
  </div>
  <div class='container' ng-view></div>



</body>
</html>

<强> 的客户机/ app.js 

(function(){




// Declare app level module which depends on views, and components
var ang = angular.module('votingApp', ['ngRoute']);

ang.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
              $routeProvider
              .when('/list/:question',{
                 templateUrl:'/../template/poll_view.html',
                 controller:'pollReadController',
                 controllerAs:'pollRead'
              });
              //$locationProvider.html5Mode(true);
          }]);


ang.controller("VotingListController",['$scope','$http','$location',function($scope,$http,$location){
  var list = this;
  $http.get('https://fcc-voting-app-ajinkya009.c9users.io/list').success(function(data){
    list.polls=data;
  });
}]);

ang.controller('pollReadController',function($scope,$http,$routeParams){
       var list = this;
       alert($routeParams.question);
       $http.get('/list/'+$routeParams.question).success(function(data){
          list.polls = data;
       })
       .error(function(){
           alert("An unexpected error occured!");
       });
    });



})();

<强> 的客户机/ poll_view.html 

<div class='container' ng-repeat="poll in pollRead.polls">
    <h2>{{poll.question}}</h2>
    <div ng-repeat = "v in poll.vote">
        <ul>
            <li>
                <p>Option:{{v.option}}</p>
                <p>Count:{{v.count}}</p>
            </li> 
        </ul>    
    </div>

</div>

<强> 服务器/ index.js 

var express = require('express');
var path = require('path');
var bodyParser = require("body-parser");
var app = express();
var mongoose = require('mongoose');
var polls = require('./models/poll');
var methodOverride = require('method-override');
var port = 8080;
var ip = process.env.IP;
var db = mongoose.connect('mongodb://localhost/meanapp');
var poll = db.model('poll',polls);
mongoose.connection.once('open', function() {

  console.log('Listening on port: '+ port);
  app.use(express.static(path.join(__dirname + "/../client")));

  app.use(bodyParser.json());
  app.set('view engine','html');
  //app.use(express.logger('dev'));
  //app.use(express.methodOverride());
  //app.use(app.router);

  // Add Middleware necessary for REST API's
//app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
//app.use(methodOverride('X-HTTP-Method-Override'));

// CORS Support
/*app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});*/


  app.get('/list',function(req,res){
    console.log('received');
    poll.find({},function(err,list){
        if(err)throw err;
        res.json(list);
    });
  });

   app.get('/list/:question',function(req,res){
    poll.find({question: req.params.question},function(err,data){
        if(err)throw err;
        res.json(data);
    });
  });

  app.post('/question',function(req,res){

      console.log(req.body);
      console.log(req.body.vote);

      //res.json({success:"200"});
      var o = req.body.option;
      var c = req.body.count;
      /*var p = new poll(
          {question:req.body.question,vote:{option,count}}
          );*/
      var p = new poll({question:req.body.question,vote:req.body.vote});
      p.save(function(error){
          if(error){
              throw error;
          }
          res.json(p);
      });
  });

  app.put('/:question',function(req,res){

     poll.update(
         {
           "question": req.params.question,
           "vote.option":req.body.option
         },
         {$inc:{"vote.$.count":1}},
         function(error){
             if(error)throw error;
         }
     );
     res.json(poll);
  });

  app.put('/question/update/:id',function(req,res){

     console.log(req.params.id);
     console.log(req.body);
     poll.update(
         {"_id":req.params.id},
         {"$set":{"question":req.body.question,"vote":req.body.vote}},
         function(error){
           if(error)throw error;
         }
     );

  });



  app.listen(port);
});
相关问题
最新问题