Angular 不适用于 Express 和 Pug答案

【问题标题】：Angular doesn't work with Express and PugAngular 不适用于 Express 和 Pug
【发布时间】：2016-09-06 23:11:25
【问题描述】：

我不知道为什么，但我不能强迫 Angular 在这里工作。有人知道为什么会这样吗？我什至不能用绑定模型制作一个简单的输入表单。总是只有 {{model}} 和这个

文件树

/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...');
});

/app/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，您可能会注意到它包含 HTML 而不是 javascript。这与您设置服务器的方式有关。这是一个用于配置节点的 sn-p（没有视图引擎）。至少这将为您指明正确的方向。 github.com/muliyul/mean-seed-project/blob/master/bin/…
@ValSaven 与 pug 渲染并发送该循环的 html 或仅发送 ng-repeat 它将在客户端创建重复实例？

标签： javascript angularjs express pug

【解决方案1】：

谢谢Muli Yulzary。我刚刚变了

在 /app/routes.js

var path = require('path');

// .. 

app.get('/', (req, res) => {
    res.render('index', {root: path.join(__dirname, '../client')});
  });

并在 /views/layout.pug

script(src='./controller.js')
script(src='./service.js')
script(src='./core.js')

【讨论】：