Angularjs代码不起作用

时间:2016-09-03 17:36:10

标签: javascript angularjs node.js

我最近一直在教自己angularjs和node.js,从我学到的这些代码编写,但它没有运行,我尝试在控制器中记录一些内容并且它没有记录它所以也许这是对index.html代码错误的暗示:(如果我的代码很乱或任何事情,请提前抱歉)

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

});

2 个答案:

答案 0 :(得分:2)

您正在创建一个从未使用过的控制器。

您必须使用ng-controller指令

将控制器绑定到dom元素

您可以将其附加到body标记,如此

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

答案 1 :(得分:0)

检查一下。您已创建了ng-app,即Test和控制器TestController。但是你从未使用它。如果要将控制器用于整个应用程序,即整个应用程序的一个控制器,则使用ng-controller="TestController"标签上的body。如果您希望控制器的scope仅限于特定元素的子元素,请对其他元素执行此操作。

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;