angularjs - Angular GET Request Stuck in Cycle -
i trying use angular make request api made retrieves , manipulates data in postgres database. have 2 running copies of website, 1 uses mongo. problem code below runs fine on server using mongo reason postgres 1 experiencing trouble. when use rest client test api, both versions work (mongo , postgres), leading me believe api not problem. however, main page contains angular controller makes , post requests api. said, time loop happens on server postgres.
here controller in question:
(function() { var postctrl = function ($http, $scope, $log, $location) { $scope.getposts = function() { $http.get("api/posts") .then(function(response) { $scope.posts = response.data; }); } $scope.addpost = function(title, content, image) { $http.post("api/posts", {title: title, content: content, image: image}) .error(function(data) { console.log(data); }); //$scope.getposts(); } //$scope.getposts(); }; app.controller("postctrl", ["$http", "$scope", "$log", "$location", postctrl]); })(); here page using controller:
extends partials/layout block scripts script(src="app/controllers/postctrl.js") block content div(ng-controller="postctrl") .row .col-xs-9 #main .row .col-xs-12 form(class="form-horizontal" ng-submit="post(title, content, image)") .form-group label(for="inputtitle" class="col-sm-2 control-label") title .col-sm-10 input(required type="text" class="form-control" id="inputtitle" placeholder="title" ng-model="title") .form-group label(for="inputcontent" class="col-sm-2 control-label") content .col-sm-10 textarea(required class="form-control" id="inputcontent" placeholder="content" ng-model="content") .form-group label(for="inputimg" class="col-sm-2 control-label") image url .col-sm-10 input(required type="text" class="form-control" id="inputimg" placeholder="image url" ng-model="image") .form-group .col-sm-offset-2.col-sm-10 button(type="submit" class="btn btn-default") post .row .col-xs-12 div(ng-repeat="post in getposts()") hr .well h2 {{ post.title }} h4 {{ post.content }} img(src="{{ post.image }}") .col-xs-3 .row .col-xs-12 #sidebar .well(style="height: 500px;") block footer .row .col-xs-12 hr .footer h4(class="copyright") footer here api in case:
var express = require("express"); var router = express.router(); var pg = require("pg"); var dburl = "postgres://usr:pwd@localhost:5432/vagablog"; // middleware routes. router.use(function(req, res, next) { console.log("api request made."); next(); // go next routes, don't stop here }); // test route ensure routing working router.get("/", function(req, res) { res.json({ message: "hooray! welcome api!" }); }); // on routes end in /posts router.route("/posts") // posts. (accessed @ api/posts) .get(function(req, res) { // connect db var client = new pg.client(dburl); client.connect(); console.log("client connected db"); // select post table var query = client.query("select * post"); // send response on failed query error query.on("error", function(error) { res.send({ status: "failed", reason: error }); }); // add each row result query.on("row", function(row, result) { result.addrow(row); }); // send response on successful query results query.on("end", function(result) { client.end(); res.send(json.stringify(result.rows)); }); }) // create post. (accessed @ post api/posts) .post(function(req, res) { // connect db var client = new pg.client(dburl); client.connect(); console.log("client connected db"); // check if needed request body items valid if(req.body.title !== undefined && req.body.content !== undefined) { // perform insert query var query = client.query("insert post (title,content) "+ "values ('"+req.body.title+"','"+req.body.content+"')"); // send response on failed query query.on("error", function(error) { client.end(); res.send({ status: "failed", reason: error }); }); // send response on successful query query.on("end", function(result) { client.end(); res.send({ status: "success", title: req.body.title, content: req.body.content, image: req.body.image }); }); // send response if missing request body item } else { res.send({ status: "failed", reason: "could not find 1 or more of parameters: title, content, image" }); } }); router.route("/posts/:post_id") // post. (accessed @ api/posts/:post_id) .get(function(req, res) { // todo post }) // update post. (accessed @ put api/posts/:post_id) .put(function(req, res) { // todo: update post }) // delete post. (accessed @ delete api/posts/:post_id) .delete(function(req, res) { // connect db var client = new pg.client(dburl); client.connect(); console.log("client connected db"); // delete post table id equal :post_id var query = client.query("delete post id ="+req.params.post_id); // send response on successful deletion error query.on("end", function(result) { client.end(); res.send({ status: "success" }); }); // send response on failed deletion error query.on("error", function(error) { client.end(); res.send({ status: "failed", reason: error }); }); }); // todo: create api routes table deletion/clearing/creation module.exports = router; server output:
get /api/posts 200 20.691 ms - 73 /api/posts 200 22.513 ms - 73 /api/posts 200 25.023 ms - 73 api request made. client connected db /api/posts 200 17.603 ms - 73 /api/posts 200 19.947 ms - 73 /api/posts 200 13.149 ms - 73 api request made. client connected db api request made. client connected db /api/posts 200 12.391 ms - 73 api request made. client connected db api request made. client connected db api request made. client connected db api request made. client connected db /api/posts 200 16.033 ms - 73 api request made. client connected db api request made. client connected db /api/posts 200 17.256 ms - 73 /api/posts 200 18.421 ms - 73 /api/posts 200 18.786 ms - 73 /api/posts 200 19.534 ms - 73 api request made. client connected db api request made. client connected db /api/posts 200 16.590 ms - 73 /api/posts 200 19.997 ms - 73 api request made. client connected db /api/posts 200 15.494 ms - 73 /api/posts 200 18.389 ms - 73 api request made. client connected db api request made. client connected db api request made. client connected db api request made. client connected db api request made. client connected db /api/posts 200 14.374 ms - 73 api request made. client connected db api request made. client connected db api request made. client connected db /api/posts 200 18.409 ms - 73 /api/posts 200 19.716 ms - 73 api request made. client connected db /api/posts 200 21.166 ms - 73 api request made. client connected db /api/posts 200 23.422 ms - 73 /api/posts 200 23.104 ms - 73 api request made. client connected db api request made. client connected db api request made. client connected db /api/posts 200 23.240 ms - 73 /api/posts 200 23.442 ms - 73 api request made. client connected db /api/posts 200 26.767 ms - 73 /api/posts 200 20.711 ms - 73 /api/posts 200 18.902 ms - 73 api request made. client connected db api request made. client connected db /api/posts 200 20.807 ms - 73 /api/posts 200 22.459 ms - 73 /api/posts 200 23.733 ms - 73 /api/posts 200 20.734 ms - 73 api request made. client connected db api request made. client connected db /api/posts 200 19.195 ms - 73 /api/posts 200 19.811 ms - 73 api request made. client connected db api request made. client connected db api request made. client connected db /api/posts 200 14.928 ms - 73 /api/posts 200 15.960 ms - 73 api request made. client connected db api request made. client connected db api request made. client connected db /api/posts 200 18.811 ms - 73 /api/posts 200 20.031 ms - 73 /api/posts 200 22.332 ms - 73 api request made. client connected db /api/posts 200 19.272 ms - 73 /api/posts 200 19.888 ms - 73 /api/posts 200 20.281 ms - 73 api request made. client connected db api request made. client connected db api request made. client connected db api request made. client connected db api request made. client connected db api request made. client connected db api request made. client connected db /api/posts 200 18.424 ms - 73 api request made. client connected db /api/posts 200 22.150 ms - 73 api request made. client connected db /api/posts 200 23.577 ms - 73 /api/posts 200 24.877 ms - 73 /api/posts 200 27.099 ms - 73 api request made. client connected db api request made. client connected db /api/posts 200 26.699 ms - 73 /api/posts 200 28.815 ms - 73 /api/posts 200 29.594 ms - 73 api request made. client connected db api request made. client connected db api request made. client connected db api request made. client connected db /api/posts 200 24.583 ms - 73 api request made. client connected db /api/posts 200 24.909 ms - 73 /api/posts 200 21.310 ms - 73 api request made. client connected db api request made. client connected db /api/posts 200 25.254 ms - 73 api request made. client connected db /api/posts 200 22.883 ms - 73 /api/posts 200 24.659 ms - 73 /api/posts 200 27.842 ms - 73 /api/posts 200 23.009 ms - 73 /api/posts 200 31.817 ms - 73 api request made. client connected db api request made. client connected db api request made. client connected db /api/posts 200 22.164 ms - 73 /api/posts 200 25.102 ms - 73
functions re-run if angular thinks there change in of models, or if happens triggers digest cycle (this might not 100% correctly phrased, input appreciated here).
$scope.getposts = function() { $http.get("api/posts") .then(function(response) { $scope.posts = response.data; }); } $scope.addpost = function(title, content, image) { $http.post("api/posts", {title: title, content: content, image: image}) .error(function(data) { console.log(data); }); //$scope.getposts(); } the above try run when angular thinks there's model change.
you should try
$scope.posts = []; $http.get("api/posts").then(function (response) { $scope.posts = response.data; }); $scope.addpost = function(title, content, image) { $http.post("api/posts", {title: title, content: content, image: image}) .then(function (response) { //success console.log(response.data); }, function (response) { //error console.log(response.data); });
Comments
Post a Comment