AngularJS,Node.js,ExpressJS应用程序集成问题
nir*_*ran 16 node.js express angularjs
我使用Node.js和ExpressJS创建了一个RESTful服务.现在我想实现View部分.为此,我选择了AngularJS.
这里的问题是,我不知道如何组织文件夹结构以及如何将AngularJS与Node.js和ExpressJS集成.
我观看了这个视频,但是没有可用的示例源代码.
让我们来看看CRUDdy:AngularJS和Node.js法拉利示例
项目文件夹结构
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代码.
如果您需要更多信息,请告诉我.
Wil*_*l M 34
如果您使用AngularJS来实现单页体验,那么您应该每次都提供相同的前端代码,然后让AngularJS接管处理URL并显示内容.
请记住,您正在管理两个路由系统.一个用于前端,一个用于后端.Express路由映射到您的数据,通常以JSON格式返回.(您也可以直接渲染html,请参阅选项#1.)角度路由映射到您的模板和控制器.
选项1:
设置静态文件夹以提供前端代码(HTML/CSS/JS/AngularJS).
app.use(express.static(__dirname + '/public'));
看看这些示例代码:
目录结构:
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/指向public /
<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.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
- /sf/answers/731144641/
| 归档时间： |
|
| 查看次数： |
21220 次 |
| 最近记录： |