2
私は理由はわかりませんが、ここでAngularの作業は強制できません。誰がなぜこのことがあるのかというアイデアはありますか? 私はバインドされたモデルで単純な入力フォームを作ることさえできません。 /そこだけ{{モデル}}は常にあり、このExpressはExpressとPugで動作しません
ファイルツリー
/app.js
var express = require('express');
var app = express();
var port = process.env.PORT || 3000;
var bodyParser = require('body-parser');
app.use(express.static(__dirname + '/client'));
app.use(bodyParser.json());
require('./app/routes.js')(app);
app.listen(port,() => {
console.log('Server listening on port 3000...');
});
/アプリroutes.js
var sqlite3 = require('sqlite3').verbose();
var db = new sqlite3.Database('./db/mes.db');
var _ = require('underscore');
module.exports = function (app) {
app.get('/messages', (req, res, next) => {
try {
var messages = [];
// Some db stuff
res.json(messages);
} catch (err) {
next(err);
}
});
app.set('views', './views');
app.set('view engine', 'pug');
app.get('*', (req, res) => {
res.render('index');
});
};
/client/controller.js
angular.module('myViewerController', [])
.controller('mainController', ['$scope','$http','Messages', function($scope, $http, Messages) {
$scope.formData = {};
$scope.loading = true;
Messages.get()
.success(function(data) {
$scope.messages = data;
$scope.loading = false;
})
.error(data => {
console.log('Error: ' + data);
});
}]);
/client/core.js
angular.module('myViewer', ['myViewerController', 'myViewerService']);
/client/service.js
angular.module('myViewerService', [])
.factory('Messages', ['$http', function ($http) {
return {
get: function() {
return $http.get('/messages');
}
}
}]);
/views/layout.pug
doctype html
html(ng-app='myViewer')
head
meta(charset='utf-8')
link(href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', rel='stylesheet')
body(ng-controller='mainController')
block content
block scripts
script(src='http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js')
script(src='../client/controller.js')
script(src='../client/service.js')
script(src='../client/core.js')
/views/index.pug
extends layout
block content
.container(ng-controller='mainController')
.row
table.table-bordered
thead
tr
th Id
th Caller
th Message
th Date
tbody(ng-repeat='m in messages')
tr
td {{m.id}}
td {{m.caller}}
td {{m.text}}
td {{m.date}}
中に
を変更しましたクライアント(ブラウザ)が受け取ったjsを見ると、おそらくjavascriptの代わりにHTMLが含まれていることがわかります。これはサーバーの設定方法と関係があります。ここでは、ノードを(ビューエンジンなしで)設定するスニペットを示します。少なくともこれはあなたを正しい方向に向けるでしょう。 https://github.com/muliyul/mean-seed-project/blob/master/bin/index.js#L39 –
ありがとうございました!わかった。 –
@ValSavenでpugをレンダリングし、そのループのhtmlを送信するか、ng-repeatを送信して、クライアント側で繰り返しインスタンスを作成しますか? –