Es wird eine sehr grundlegende Frage zu einem Problem, das ich angetroffen habe. Nichts ist besonders hart in der Arbeit, die ich vorhabe, aber ich sehe wirklich nicht, warum es nicht funktioniert, da mein Code fast der gleiche ist wie einige Beispiele in der AngularJS-Dokumentation.Basic Javascript nicht gut angezeigt (Stack Mean)
Also hier ist es: Ich versuche, eine grundlegende Website zu schaffen, um mich auf die Entwicklung mit Mean Stack zu unterhalten). Ich habe eine bloße index.html Seite:
<!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>
Und das ist für die HTML-Seite, der interessante Teil benachrichtigt. Ich benutze eine serveur.js Datei, die folgt:
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: ''};
};
});
Schließlich laufe ich alles mit der serveur.js Datei, die ich mit der Option node.js Befehl laden.
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);
Der Einfachheit halber habe ich temporarly jede einzelne Datei im selben Ordner abgelegt, so alles (alle ccs und JS-Datei ist im selben Ordner meiner html). Was ich bekomme, wenn ich das Programm laufen soll:
was ziemlich viel ist, was ich will, außer, wenn ich etwas eingeben, wird der Text nicht angezeigt, die keinen Sinn für mich macht.
Ich habe die npm Express zuvor in einem Ordner node_module korrekt installiert, der an derselben Stelle wie meine index.html-Datei abgelegt wurde.
Entschuldigen Sie die Störung dieses uninteressanten Problems, ich verbringe Stunden damit, dieses Problem zu beheben, und suche noch eine Lösung in den bereits gestellten Fragen, aber alles, was ich gefunden habe, hat das Problem nicht gelöst.
NB: Ich arbeite unter Windows.
Sie in der Konsole Sie Fehler bekommen? - Drücke F12, um die Konsole in Chrome anzuzeigen, Ctrl-Shift-K unter Firefox (Cmd-Shift-K unter OSX). –
Ja, ich bekomme einen Fehler, aber es scheint mit der angular.js-Datei von Google verknüpft zu sein, und ich sehe nicht wirklich, was ich damit machen soll. Der Fehler, den ich bekomme, ist: angular.js: 13642Fehler: [ng: Areq] http://errors.angularjs.org/1.5.6/ng/areq?p0=mainController&p1=not%20a%20function%2C % 20got% 20undefined bei Fehler (nativ) Wenn ich auf den Link klicke, wird in der Dokumentation erklärt, dass mainController als eine Funktion aufgerufen wird; Argument 'mainController' ist keine Funktion, wurde undefined – Alburkerk
definieren Sie die ng-app, um den Fehler zu beheben .. Überprüfen Sie die Fiddle https://jsfiddle.net/Lt7aP/2927/ – intekhab