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

发布时间：2020-12-17 08:08:08 所属栏目：安全来源：网络整理

导读：我已经使用Node.js和ExpressJS创建了一个RESTful服务。现在我想实现View部分。为此我选择了AngularJS。这里的问题是，我不知道如何组织文件夹结构以及如何将AngularJS与Node.js和ExpressJS进行集成。我看过这个视频，但是没有可用的示例源代码。 Let’s Ge

我已经使用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'});
  }]);

当我打到网址http://www.domain/view1时，应该显示index.html。但我得到404代码。

如果您需要更多信息，请通知我。

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

请记住，您正在管理两个路由系统。一个用于前端，一个用于后端。快速路线映射到您的数据，通常以JSON格式返回。 (您也可以直接呈现html，请参阅选项#1)。角度路线映射到您的模板和控制器。

选项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服务器

<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.controllers'])
   .config(['$routeProvider',function($routeProvider) {
     $routeProvider.when('/view1',controller: 'MyCtrl1'});
     $routeProvider.when('/view2',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或$资源服务在角度控制器中访问这些路由：

$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
> http://stackoverflow.com/a/10444923/243673

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!