嗨,这应该是非常直接但我会卡住。我在我的机器上安装了buildbot(0.9.06b)和Windows 7机器。我已设法启动并运行但是当我尝试显示网页(IE8)时,我得到错误Angular未定义。这是一个全新的窗户盒我不是太惊讶。我继续下载NodeJS可执行文件并在机器上运行它,以便安装Node。然后我去Angular website下载了zip文件,但我不确定下一步该做什么?我试过了
npm安装Angular
以及一些变体,即指定版本,解压缩文件。但还是无法安装它。我的机器在防火墙后面,所以它不能只是去网上获取更多东西。这一切都必须在当地工作。我该如何安装Angular?如何检查Angular是否已安装?
问候
使用Node,Angular,Express和Bower查看this github repo以获取示例工作应用程序。
您接收Angular未定义消息的原因是因为您没有从Web服务器向客户端提供Angular。
从npm
安装Angular通常意味着你将从node_modules
文件夹中提供它,或者你将使用Browserify。我建议不要使用npm install --save angular
,如果你在大多数情况下不使用Browserify,你的node_modules
应该只包含服务器端依赖。此外,NPM包使用CommonJS,isn't preferred in the browser。 Browserify是一种流行的解决方案,用于编写可以捆绑到浏览器兼容的js文件中的CommonJS样式代码。他们有docs起床和跑步。
或者,您可以从Bower.io安装Angular。 Bower是客户端软件包的软件包管理器。 Bower有一个huge package library,包括许多也可通过NPM获得的套餐。
还值得一提的是,除非你为全局安装执行npm install -g
,否则在为项目依赖项执行--save
或npm install
时应添加npm uninstall
标志。 --save
将您安装的所有软件包添加到package.json
文件中作为依赖项。
此示例仅使用Node.js,Express,EJS(用于Express View引擎渲染),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 App - public / app / app.js
// This is a super simple Hello World AngularJS App
(function() {
angular
.module('yourApp', [])
.controller('YourController', ['$scope', function($scope) {
$scope.hello = 'Hello World';
}]);
})();
必须像任何其他客户端库一样加载Angular,因此它需要包含在<head>
标记内的页面中。
视图 - views / index.html
<html>
<head>
<!-- load Angular into our HTML Page -->
<script src="/bower_components/angular/angular.js"></script>
<!-- load our Angular App in -->
<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)));
// Serve files from your "bower_components" directory
app.use('/bower_components', express.static(path.join(__dirname + '/bower_components')));
// GET index.html route
app.get('/', function(req, res) {
return res.render('index');
});
// Start our server and start to listen
app.listen(process.env.PORT || 3000, function() {
console.log('listening');
});
现在您需要做的就是node server.js
并访问您的网站localhost
或您指定的任何地方,您应该启动并运行。
您可以使用以下步骤轻松安装角度 -
1> Angular需要Node.js版本8.x或10.x.,检查node.js版本 -
node -v
2>安装node.js,转到nodejs.org。
3>安装npm-
npm install -g @angular/cli
4>创建一个项目 -
ng new my-app
这里的my-app是项目名称
5>您想添加Angular路由吗?没有
6>您想使用哪种样式表格式? CSS
7>转到工作区文件夹
cd my-app
8>使用CLI命令ng serve,使用--open选项启动服务器。
ng serve --open
9>打开浏览器到http://localhost:4200/。