2016-09-03 13 views
0

私は最近、anglejsとnode.jsを教えていましたが、私がこのコードを書いたことから、それは機能していませんでした。それはので、多分それは間違っているのindex.htmlコード何のヒントのログdidntは:(私のコードが乱雑であるか、どちらかといえば、事前に申し訳ありません)Angularjs code not working

<!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コード:

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

}); 
+0

ようこそ!読みやすくするためにコードを書式設定して助けてくれるので、スクロールする必要はありません。 – zhon

+0

こんにちは、うまくいけば、次回はあなたの入力のために、より簡潔で整理された、ありがとう – TheKSH991

答えて

2

あなたが作成していますコントローラは決して使用されません。あなたはそう

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

それは今働いて、ありがとうございますが、別の問題があります、サーバーは私にそれが伝える内部エラーを与えていますデータベースに挿入するプロパティimが未定義です(ブログ) – TheKSH991

+0

@ TheKSH991 Expressミドルウェアの署名は 'function(req、res、next){}'で、 'req'と' res'を入れ替える必要があります。あなたは今応答から身体を得ようとしています。それは要求に添付されています – eltonkamami

+0

ああ、ワット、ありがとうm8、おかげで本当に役立った、私はそれらのマイナーな問題がどのようにマイナーチェンジされたために馬鹿のように感じる、もう一度感謝:) – TheKSH991

0

ようbodyタグに追加しできng-controllerディレクティブ

でDOM要素に、あなたのコントローラーをバインドする必要が

はこれを確認してください。 ng-app、つまりTestとコントローラTestControllerを作成しました。しかし、あなたはそれを使ったことはありません。コントローラー全体、つまりアプリケーション全体に1つのコントローラーを使用する場合は、bodyタグでng-controller="TestController"を使用します。コントローラのscopeを特定の要素の子に限定したい場合は、同様に他の要素に対しても行います。スタックオーバーフローへ

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