2016-09-03 8 views
0

저는 최근이 코드 조각을 작성한 것으로부터 nodejs뿐만 아니라 angularjs도 가르쳐 왔지만 작동하지 않습니다. 컨트롤러에 로깅을 시도했고 그것은 어쩌면 그 잘못 index.html을 코드 ​​무엇에 대한 힌트의 로그 didnt는 (내 코드가 지저분하거나 어떤 경우 사전에 죄송)Angularjs 코드가 작동하지 않습니다.

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

서버 코드 :

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

당신은을 만들 컨트롤러는 사용되지 않습니다. 당신이 ng-controller 지침

와 DOM 요소에 컨트롤러를 결합해야

당신은 너무

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

지금은 효과가 있었지만 다른 문제가 있습니다. 서버에서 내게 오류가 있음을 알려줍니다. 데이터베이스에 삽입 한 속성이 (블로그 인) 정의되지 않았다. (블로그) – TheKSH991

+0

@ TheKSH991 Express middlewares의 서명은'req'와'res'를 바꾸기 위해'function (req, res, next) {}'이다. 당신은 지금 응답에서 몸을 얻는 것을 시도하고있다. 그것은 요청에 붙어있다 – eltonkamami

+0

와우, 고마워요. 많은 m8, 당신이 정말로 도움이되었다, 나는 그 사소한 문제가 xD 였기 때문에 바보처럼 느껴진다. 다시 한번 감사드립니다. :) – TheKSH991

0

확인이 같이 body 태그를 추가 할 수 있습니다. ng-app, 즉 Test 및 컨트롤러 TestController을 만들었습니다. 그러나 당신은 그것을 사용한 적이 없습니다. 컨트롤러 전체를 사용하려는 경우 즉, 전체 애플리케이션에 컨트롤러 하나를 사용하려면 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>

관련 문제