Angularjs code not working

Question

I've recently been teaching myself angularjs as well as node.js , from what I've learned I wrote this piece of code , but it isn't functioning , I tried logging something in the controller and it didnt log it so maybe that's a hint on what's wrong index.html code: (sorry in advance if my code is messy or anything )

<!Doctype html>
<html ng-app="Test">
<head>
<title>Test</title>

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script  type="text/javascript" src="angular.min.js"></script>
<script  type="text/javascript" src="angular-route.js"></script>
<script  type="text/javascript">
var app= angular.module('Test' , ['ngRoute']);

app.controller('TestController' , function($scope , $http ){



      $scope.submitBlog = function(){



          $http.post('/blogs' , {blog : $scope.blog}).then(function(){

                alert("success");
          });
      };
});
</script>

</head>
<body ng-app>

<h2>Blog It!</h2>
<br><br>
<div class="test" >
<input type="text" , placeholder="Username">
<br><br>
<input type="password" , placeholder="Password">
<br><br>
<button type="button" > Log In</button>
<br><br>
<a href="">Not a member ? Sign Up!</a>
</div>

<div class="blogfeed">

<h5>Feed :</h5>
<input ng-model="blog"  placeholder="Your thoughts?" >
<button type="button" , ng-click="submitBlog()" ,    class="btn">Submit</button>

</div>
</body>
</html>

Server code :

var MongoClient = require('mongodb').MongoClient;
var ObjectId = require('mongodb').ObjectId;
var express = require('express');
var bodyParser = require('body-parser');
var bcrypt = require('bcryptjs');

var app = express();
var db = null;

MongoClient.connect("mongodb://localhost:27017/test" , function(err,dbconn){
if(!err){
console.log("We are connected");
db= dbconn;
}
});

app.use(express.static('public'));
app.use(bodyParser.json());

app.post('/blogs' , function(res,req,next){
db.collection('blogs' , function(err , blogsCollection){
            var newBlog= {
                text: req.body.blog
            };
      blogsCollection.insert(newBlog , {w:1} , function(err){

            return res.send();
      });
  });
});
app.listen(3000, function(){

console.log('Example app listening on port 3000');

});

Welcome to Stack Overflow! You can help us help you by formatting your code for readability and so we do not have to scroll it. — zhon
– zhon, Commented Sep 3, 2016 at 17:54
Hi :) , alright , hopefully next time it'll be more concise and organized , thanks for your input — TheKSH991
– TheKSH991, Commented Sep 6, 2016 at 12:38

eltonkamami · Accepted Answer · 2016-09-03 17:44:42Z

2

You are creating a controller that is never used.

you have to bind your controller to a dom element with the ng-controller directive

you could append it to the body tag like so

<body ng-app ng-controller="TestController" >

answered Sep 3, 2016 at 17:44

eltonkamami

5,1881 gold badge24 silver badges30 bronze badges

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

3 Comments

TheKSH991 Over a year ago

It worked now , thank you so much , but there's another issue , the server is giving me an internal error in which it tells me that the property im inserting into the database is undefined ( which is blog )

eltonkamami Over a year ago

@TheKSH991 the signatures of the express middlewares are function(req, res, next){} you need to swap req and res. you are trying to get the body from the response now. it is attached to request

TheKSH991 Over a year ago

Oh wow , thanks a lot m8 , you were really helpful , I feel like an idiot due to how minor those issues were xD , thanks again :)

Nikhilesh Shivarathri · Accepted Answer · 2016-09-03 17:49:04Z

Check this. You've created a ng-app i.e Testand a controller TestController. But you've never used it. If you want to use the controller for the whole body i.e one controller for the whole application then use ng-controller="TestController" on the body tag. Similarly do it for other elements if you want the scope of the controller limited to the children of a particular element.

<!Doctype html>
<html ng-app="Test">

<head>
  <title>Test</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.5/angular.min.js"></script>
  <script type="text/javascript">
    var app = angular.module('Test', []);

    app.controller('TestController', function($scope, $http) {
      console.log('In the controller');
      $scope.submitBlog = function() {



        $http.post('/blogs', {
          blog: $scope.blog
        }).then(function() {

          alert("success");
        });
      };
    });
  </script>

</head>

<body ng-controller="TestController">

  <h2>Blog It!</h2>
  <br>
  <br>
  <div class="test">
    <input type="text" , placeholder="Username">
    <br>
    <br>
    <input type="password" , placeholder="Password">
    <br>
    <br>
    <button type="button">Log In</button>
    <br>
    <br>
    <a href="">Not a member ? Sign Up!</a>
  </div>

  <div class="blogfeed">

    <h5>Feed :</h5>
    <input ng-model="blog" placeholder="Your thoughts?">
    <button type="button" , ng-click="submitBlog()" , class="btn">Submit</button>

  </div>
</body>

</html>

Collectives™ on Stack Overflow

Angularjs code not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related