AngularJS、Node.js、ExpressJS 应用程序集成问题

Posted 2023-03-07

技术标签:

【中文标题】AngularJS、Node.js、ExpressJS 应用程序集成问题【英文标题】：AngularJS , Node.js, ExpressJS application integration issue 【发布时间】：2013-07-01 08:52:41 【问题描述】：

我使用 Node.js 和 ExpressJS 创建了一个 RESTful 服务。现在我想实现 View 部分。为此，我选择了 AngularJS。

这里的问题是，我不确定如何组织文件夹结构以及如何将 AngularJS 与 Node.js 和 ExpressJS 集成。

我观看了此视频，但没有可用的示例源代码。

Let's Get CRUDdy: AngularJS and Node.js Ferrari Example

项目文件夹结构

ExpressJS 文件

var express = require('express'),
http = require('http'),
path = require('path'),
photos = require('./routes/photos');

var app = express();

app.configure(function () 
    app.use(express.logger('dev'));     /* 'default', 'short', 'tiny', 'dev' */
    app.use(express.bodyParser());
    app.use(app.router);
);

app.get('/photos', photos.findAll);
app.get('/view1', photos.index);

AngularJS：

 // Declare app level module which depends on filters, and services
 angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
  config(['$routeProvider', function($routeProvider) 
    $routeProvider.when('/view1', templateUrl: 'partials/partial1.html', controller: 'MyCtrl1');
    $routeProvider.when('/view2', templateUrl: 'partials/partial2.html', controller: 'MyCtrl2');
    $routeProvider.otherwise(redirectTo: '/view1');
  ]);

当我点击 url http://www.domain/view1 时，它应该显示 index.html。但我得到了 404 代码。

如果您需要更多信息，请告诉我。

【问题讨论】：

好的，我已经添加了文件夹结构和代码。现在我遇到了集成问题。您好，我是演示文稿的人。代码在这里：github.com/jprichardson/talks-ncc3-demo 请记住，通过 express 向 Angular 发送自定义代码的方法很不稳定，不推荐使用。 【参考方案1】：

如果您使用 AngularJS 来实现单页体验，那么您应该每次都提供相同的前端代码，然后让 AngularJS 接管处理 URL 并显示内容。

请记住，您正在管理两个路由系统。一个用于前端，一个用于后端。 Express 路由映射到您的数据，通常以 JSON 格式返回。（您也可以直接渲染 html，参见选项 #1。）Angular 路由映射到您的模板和控制器。

选项#1：

设置静态文件夹以提供前端代码 (HTML/CSS/JS/AngularJS)。

app.use(express.static(__dirname + '/public'));

查看这些示例代码：

https://github.com/btford/angular-express-seed https://github.com/btford/angular-express-blog

目录结构：

public/
  index.html
  js/
    angular.js
  css/
  partials/
     partial1.html
     partial2.html

app/
node_modules/
routes/
web-server.js

选项 #2：

在不同的服务器上提供前端代码和后端代码。

这并不意味着您必须拥有两台机器。

这是在您的 本地计算机 上使用 Apache 的可行设置：

目录结构：

public/
  index.html
  js/
    angular.js
  css/
  partials/
     partial1.html
     partial2.html
node/
  app/
  node_modules/
  routes/
  web-server.js

设置主机文件

    127.0.0.1       domain.dev

设置http://domain.dev/指向公共/

<VirtualHost *:80>
  DocumentRoot "/path/to/public"
  ServerName domain.dev
  ServerAlias www.domain.dev
</VirtualHost>

设置http://api.domain.dev/指向正在运行的节点web-server

<VirtualHost *:80>
  ServerName api.domain.dev
  ProxyPreserveHost on
  ProxyPass / http://localhost:3000/
</VirtualHost>

（改编自：http://www.chrisshiplet.com/2013/how-to-use-node-js-with-apache-on-port-80/）

启动（或重新启动）Apache 并运行您的节点服务器：

node web-server.js

角度路线：

 angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 
   'myApp.controllers'])
   .config(['$routeProvider', function($routeProvider) 
     $routeProvider.when('/view1', templateUrl: 'partials/partial1.html', controller: 'MyCtrl1');
     $routeProvider.when('/view2', templateUrl: 'partials/partial2.html', controller: 'MyCtrl2');
     $routeProvider.otherwise(redirectTo: '/view1');
 ]);

index.html：

   <!DOCTYPE html> 
   <html>
     <head><title>Angular/Node exmaple</title></head>
     <body>
       <div id="main" ng-view></div>
     </body>
   </html>

快速路线：

app.get('/', photos.index);
app.get('/photos', photos.findAll);

通过 $http 或 $resource 服务在 Angular 控制器中访问这些路由：

$http.get('http://api.domain.dev/photos').success(successCallback);

其他资源：

https://github.com/ithkuil/angular-on-server/wiki/Running-AngularJS-on-the-server-with-Node.js-and-jsdom http://briantford.com/blog/angular-express.html https://***.com/a/10444923/243673

【讨论】：

它不起作用，我已经添加了 angularjs 代码。如果您需要更多信息，请告诉我嘿，Will，您是指photos.index 而不是app.index？是的，是的，app.index。我没有使用它所有这些示例服务器翡翠文件。我想要服务器 .html 文件好的，我已关注 Option1，但我收到此错误错误：无法在 Function.app.render (d:\era\startup\learnnod\restfull_angular2\node_modules 查找视图“partials/undefined”) \express\lib\application.js:494:17) 在 ServerResponse.res.render (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\response.js:756:7) 在exports.partials ( d:\era\startup\learnnod\restfull_angular2\routes\wines.js:104:9) 在回调 (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\router\index.js:161:37 )【参考方案2】：

我有一个现有的 Angular 项目，其文件结构如下（大致）：

/
  app/
    img/
    scripts/
    styles/
    templates/
    index.html
  test/

我刚刚创建了一个新的 express 应用程序，并将我的应用程序目录的内容复制到 express 中的 /public 目录，然后从 /public 中删除所有现有内容

然后在 express 的 app.js 文件中，我对默认配置进行了以下更改：

var express = require('express');
var routes = require('./routes');
// ** required my route module
var menu = require('./routes/menu'); 
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
// ** I moved this above the app.router line below, so that static routes take precedence
app.use(express.static(path.join(__dirname, 'public'))); 
app.use(app.router);


// development only
if ('development' == app.get('env')) 
  app.use(express.errorHandler());


// ** removed the default index route
// app.get('/', routes.index); 
// ** defined my route
app.get('/api/menu', menu.list); 

http.createServer(app).listen(app.get('port'), function()
  console.log('Express server listening on port ' + app.get('port'));
);

然后显然在express中编写了我的路由文件并更改了角度服务中的URL以使用新的api。

还有更多的工作涉及决定将规范放在哪里以及合并凉亭和节点依赖项等，但这可能对我的情况过于具体，无法包含在此答案中，但如果有人发现它有用，我们很乐意分享。

【讨论】：

以上是关于AngularJS、Node.js、ExpressJS 应用程序集成问题的主要内容，如果未能解决你的问题，请参考以下文章

在 Node.js 中加载 html 页面

如何将 mongodb 数据从服务器（node.js）检索到我的 AngularJS 路由

创建 AngularJS ACL 的最佳方法是啥？ [关闭]

Angular js 表达式在 Node js 项目中不起作用

node.js

AngularJS 不使用 socket.io 刷新视图