简而言之
查看this github repo,其中包含使用Node、Angular、Express和Bower创建的工作应用程序示例。
您收到“Angular未定义”消息的原因是您没有将Angular从Web服务器提供给客户端。
从npm安装Angular通常意味着您将从
node_modules
文件夹提供它,或者您将使用
Browserify。我建议不要使用
npm install --save angular
,如果您不在大多数情况下使用Browserify,则
node_modules
应仅包含服务器端依赖项。此外,NPM软件包使用CommonJS,在浏览器中
不是首选。 Browserify是一种流行的解决方案,用于编写可以打包成与浏览器兼容的js文件的CommonJS风格代码。他们有
文档可供参考。
或者你可以从Bower.io安装Angular。Bower是一个客户端包管理器。Bower有一个巨大的包库, 包括许多也可通过NPM获取的包。
值得一提的是,除非你进行全局安装的npm install -g
,否则在为项目依赖项执行npm install
或npm uninstall
时,应添加--save
标志。 --save
将你安装的任何包添加到你的package.json
文件中作为依赖项。
以下是如何使用Node.js提供Angular的示例
此示例仅使用Node.js、Express、EJS(用于Express视图引擎渲染)、Bower和Angular。
npm install -g bower
cd <your project directory>
// answer questions about your project
// this will create your package.json file
npm init
npm install --save express
npm install --save ejs
// answer the questions about your project
// this will create your bower.json file
bower init
bower install --save angular
目录结构
- Project Folder
- node_modules
- bower_components
- public
- app
- app.js
- views
- index.html
- bower.json
- package.json
- server.js
Angular应用程序 - public/app/app.js
(function() {
angular
.module('yourApp', [])
.controller('YourController', ['$scope', function($scope) {
$scope.hello = 'Hello World';
}]);
})();
Angular必须像其他客户端库一样加载,因此需要在页面中包含它,放置在
<head>
标签内。
视图 - views/index.html
<html>
<head>
<script src="/bower_components/angular/angular.js"></script>
<script src="/public/app/app.js"></script>
</head>
<body ng-app="yourApp">
<div ng-controller="YourController">
{{ hello }}
</div>
</body>
</html>
为了使其正常工作,您需要实际运行一个 Web 服务器,当您调用它们时,它将提供您正在查找的文件。您可以使用
Express 来完成这个操作。
Node.js Web 服务器 - server.js
var express = require('express);
var path = require('path');
var app = express();
// Setup View Engines
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
// Serve files from your "public" directory
app.use('/public', express.static(path.join(__dirname + 'public)));
app.use('/bower_components', express.static(path.join(__dirname + '/bower_components')));
app.get('/', function(req, res) {
return res.render('index');
});
app.listen(process.env.PORT || 3000, function() {
console.log('listening');
});
现在你所需要做的就是运行
node server.js
命令,并访问
localhost
或者你指定的地址,这样你就可以启动并运行网站了。
express
和public
中忘记了一个闭合的'
。正确的写法应该是:var express = require('express');
和app.use('/public', express.static(path.join(__dirname, 'public')));
。 - t q