CODEWITHSUNDEEP
javascriptangularjsnode.js
TheKSH991
TheKSH991

Reputation: 1

Angularjs code not working

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

});

Upvotes: 0

Views: 127

Answers (2)

Nikhilesh Shivarathri
Nikhilesh Shivarathri

Reputation: 1670

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>

Upvotes: 0

eltonkamami
eltonkamami

Reputation: 5190

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" >

Upvotes: 2

Related Questions