2016-06-28 9 views
0

は、それは私が遭遇した問題について非常に基本的な質問になります(平均スタック)も表示されません。私がやろうとしている作業は特に難しいことは何もありませんが、私のコードはAngularJSのドキュメントのいくつかの例とほとんど同じですが、なぜ動作しないのかわかりません。基本Javascriptが

だからここにある: I)は平均スタックで研究開発を上の自分自身を楽しませるために、基本的なウェブサイトを作成しようとしています。 私は単なる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ページのためです。

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ファイルを使用して、すべてを実行します。私は、次のされ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); 

単純化のために、私はtemporarly同じフォルダ内のすべてのファイルを1つ入れて、そのすべてを(すべてのCCSとのjsファイルは私のhtmlの同じフォルダ内にあります)。 は私がプログラムを実行するときに私が手にすることです:

私は何かを入力するとき以外はほとんど私が欲しいものである

My screenshoot

、テキストは、私にはどんな意味がありません。これは、表示されません。

私は正しくNPMが私のindex.htmlファイルと同じ場所に置かnode_moduleフォルダに前表明インストールされています。そのつまらない問題を気にして申し訳ありません

、私はすでに尋ねた質問のいずれかの解決策のためにその問題ともう一つの検索を修正しようと時間を費やしますが、私が見つけたすべてのものは、問題を解決しませんでした。

NB:私はWindows上で動作します。

+0

は、コンソールにエラーを取得してくださいエラーが出るのだろうか? - Chromeでコンソールを表示するにはF12を、FirefoxではCtrl-Shift-Kを押します(OSXではCmd-Shift-K)。 –

+0

はい私はエラーが発生しますが、Googleのangular.jsファイルにリンクされているようですが、実際にはどうしたらいいか分かりません。 エラーは次のとおりです。 angular.js:13642Error:[ng:areq] http://errors.angularjs.org/1.5.6/ng/areq?p0=mainController&p1=not%20a%20function%2C %20got%20undundined atエラー(ネイティブ) リンクをクリックすると、mainControllerが関数として呼び出されたことがドキュメントで説明されています。 引数 'mainController'は関数ではありません。定義されていません – Alburkerk

+0

エラーを修正するためにng-appを定義しています.. fiddleを確認してくださいhttps://jsfiddle.net/Lt7aP/2927/ – intekhab

答えて

1

主な問題は、あなたが

ng-app="" 

を定義しているとあなたがcontrollerpreBoot上のアプリ

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

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

いずれかのこの

function mainController($scope){ 

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

このコードは、私はあなたのコードのショートやったとjsfiddleをした

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

コントローラの範囲外で形成するためにバインドされています。うまく動作します。 ng-app=""にjsfiddleコード更新ng-app="preBoot"https://jsfiddle.net/Lt7aP/2926/

をチェックしますArgument 'mainController' is not a function, got undefined

+0

本当にありがとうございました。 – Alburkerk

関連する問題