你如何在Windows 7上安装Angular

嗨,这应该是相当简单,但我卡住了。 我在我的机器上安装了buildbot(0.9.06b)Windows 7机器。 我已经设法启动并运行,但是当我尝试显示网页(IE8),我得到错误angular度未定义。 这是一个全新的窗口框我并不感到惊讶。 我继续下载NodeJS的可执行文件并在机器上运行,以便安装Node。 然后我去Angular网站下载了zip文件,但是我不确定接下来要做什么? 我试过了

npm安装Angular

和一些变化,即指定版本,解压缩文件。 但仍然不能安装它。 我的机器在防火墙后面,所以它不能仅仅停留在networking上并获得更多的东西。 这一切都必须在当地工作。 我应该如何去安装Angular? 我如何检查Angular是否安装?

问候

Solutions Collecting From Web of "你如何在Windows 7上安装Angular"

TL; DR

检查这个github回购为使用Node,Angular,Express和Bower的示例工作应用程序。


你是接收Angular未定义消息的原因是因为你没有从你的web服务器向客户端提供Angular服务。

npm安装Angular通常意味着您将从您的node_modules文件夹提供服务,否则您将使用Browserify 。 我建议不要使用npm install --save angular ,如果您在大多数情况下不使用Browserify,那么您的node_modules应该只包含服务器端依赖项。 此外,NPM软件包使用CommonJS,这在浏览器中不是首选 。 Browserify是一种流行的编写CommonJS风格代码的解决方案,可以绑定到浏览器兼容的js文件中。 他们有文件起床和运行。

或者,您可以从Bower.io安装Angular。 Bower是客户端软件包的包管理员。 鲍尔有一个巨大的包库 ,其中包括许多也可通过NPM提供的包。

另外值得一提的是,除非你正在为全局安装做一个npm install -g ,你应该在做一个npm install时添加--save标志或者为你的项目依赖项添加一个npm uninstall--save将你安装的软件包作为依赖项添加到你的package.json文件中。

这里是一个如何从Node.js服务Angular的例子

此示例仅使用Node.js,Express,EJS(用于快速视图引擎渲染),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>标签的页面中。

View – 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或指定的任何地方访问您的站点,并启动并运行。