Question

这是我遇到的问题的一个非常基本的问题。在我打算做的工作中没有什么特别难的，但我真的不明白为什么它不起作用，因为我的代码与AngularJS文档中的一些例子几乎相同。

所以这里是：我正在尝试创建一个基本网站来娱乐自己使用Mean Stack进行开发。我做了一个仅仅是index.html页面：

<!DOCTYPE hmtl>

<html class="ng-scope" ng-app="">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>PreBoot</title>


<!-- Bootstrap import -->
<link href="./bootstrap.min.css" rel="stylesheet">

<!-- just a little CSS -->
<style>
body {
    padding-top: 70px;
    /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
</style>
</head>    
    <body ng-app="preBoot">
<div id='main'> 
<!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-    toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">PreBoot</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a href="">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

<!-- Page Content -->
<div class="container">

    <div class="row">
        <div class="col-lg-12 text-center">
            <h1> PreBoot </h1>
            <p class="lead">zqesiediuhzsbadehzdebshobsezd</p>
            <form ng-submit="post()" ng-controller="mainController">
                <input required type="text" placeholder="Your name" ng-model="newPost.created_by"/>
                <textarea required maxLength="200" rows="3" placeholder="Say something" ng-model="newPost.text"></textarea>
                <input class="button" type="submit" value="Preboot that!"/>
            </form>
            <div id="post-stream">



   <!--  INTERESTING PART  !!!!!!!! --> 



                <h4> PreBoot Feed</h4>

                    <div class='post' ng-repeat="post in posts" ng-class-odd="'odd'" ng-class-even="'even'">
                        <p> {{post.text}} </p>
                    </div> 
            </div>

      <!-- END OF IT !!!!! -->


          <!-- <ul class="list-unstyled">
                <li>Bootstrap v3.3.6</li>
                <li>jQuery v1.11.1</li>
            </ul> -->

        </div>
    </div>
    <!-- /.row -->

</div>
<!-- /.container -->
</div>


        <!-- JScript imports --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="./preBoot.js"></script> 

<!-- jQuery Version 1.11.1 -->
<script type="text/javascript" src="./jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script type="text/javascript" src="./bootstrap.min.js"></script>

对于HTML页面，有趣的部分会得到通知。我使用了以下的serveur.js文件：

var app = angular.module('preBoot', []);

app.controller('mainController', function($scope){
$scope.posts = []; 
$scope.newPost={created_by: '', text: '', created_at: ''};

$scope.post= function(){
    $scope.newPost.created_at = Date.now();
    $scope.posts.push($scope.newPost);
    $scope.newPost = {created_by: '', text: '', created_at: ''};
};


});

最后，我使用node.js邀请命令运行的serveur.js文件运行所有内容。

var express = require('express');
var path = require('path');

var app = express();

app.use(express.static(__dirname));

app.get('/', function(req, res) {
res.sendFile('./index.html');
});

// Allow the error 404 selection

/* app.use(function(req, res, next){
res.setHeader('Content-Type', 'text/plain');
res.send(404, 'Page introuvable !');
}); */

app.listen(8081);

为了简单起见，我暂时将每个文件放在同一个文件夹中，所以一切（每个ccs和js文件都在我的html的同一个文件夹中）。我运行程序时得到的是：

My screenshoot

这几乎是我想要的，除非我输入内容时，文字没有出现，这对我没有任何意义。

我之前在与index.html文件放在同一位置的node_module文件夹中正确安装了npm express。

很抱歉打扰这个无趣的问题，我花了好几个小时试图解决这个问题，并在已经问过的问题中再寻找任何解决方案，但我找到的所有问题都没有解决问题。

注意：我在Windows上工作。

Answer 1

主要问题是你已经定义了

ng-app=""

您已在controller应用

上定义了preBoot

var app = angular.module('preBoot', []);

app.controller('mainController', function($scope){

像这样定义控制器

function mainController($scope){

或define the ng-app="preBoot"

其他错误

您的控制器仅限于

<form ng-submit="post()" ng-controller="mainController">
                <input required type="text" placeholder="Your name" ng-model="newPost.created_by"/>
                <textarea required maxLength="200" rows="3" placeholder="Say something" ng-model="newPost.text"></textarea>
                <input class="button" type="submit" value="Preboot that!"/>
            </form>

此代码超出控制器范围

<div class='post' ng-repeat="post in posts" ng-class-odd="'odd'" ng-class-even="'even'">
                        <p> {{post.text}} </p>
                    </div>

我做了简短的代码，并制作了一个jsfiddle。工作正常。核实 https://jsfiddle.net/Lt7aP/2926/

在jsfiddle代码更新ng-app="preBoot"到ng-app=""，您将收到错误Argument 'mainController' is not a function, got undefined

基本的Javascript不能很好地显示（堆栈平均值）

1 个答案: