如何在Windows 7上安装Angular

use*_*985 5 windows buildbot node.js angularjs

嗨,这应该是非常直接但我会卡住.我在我的机器上安装了buildbot(0.9.06b)和Windows 7机器.我已设法启动并运行但是当我尝试显示网页(IE8)时,我得到错误Angular未定义.这是一个全新的窗户盒我不是太惊讶.我继续下载NodeJS可执行文件并在机器上运行它,以便安装Node.然后我去Angular网站下载了zip文件,但我不确定下一步该做什么?我试过了

npm安装Angular

以及一些变体,即指定版本,解压缩文件.但还是无法安装它.我的机器在防火墙后面,所以它不能只是去网上获取更多东西.这一切都必须在当地工作.我该如何安装Angular?如何检查Angular是否已安装?

问候

pet*_*teb 3

长话短说

查看此 github 存储库,了解使用 Node、Angular、Express 和 Bower 的示例工作应用程序。


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

安装 Angular 通常npm意味着您将从node_modules文件夹中提供它,或者您将使用Browserify。我建议不要使用npm install --save angularnode_modules如果您在大多数情况下不使用 Browserify,您应该只包含服务器端依赖项。此外,NPM 包使用 CommonJS,这在浏览器中不是首选。Browserify 是一种流行的解决方案,用于编写 CommonJS 样式代码,可以将其捆绑到浏览器兼容的 js 文件中。他们有文档可供启动和运行。

或者,您可以从Bower.io安装 Angular 。Bower 是客户端包的包管理器。Bower 拥有庞大的包库,其中包括许多也可以通过 NPM 获得的包。

还值得一提的是,除非您正在npm install -g为全局安装执行 a ,否则您应该在为项目依赖项--save执行 annpm install或 an时添加该标志。将您已安装的任何软件包作为依赖项添加到您的文件中。npm uninstall--savepackage.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  
Run Code Online (Sandbox Code Playgroud)

目录结构

- Project Folder
  - node_modules
  - bower_components
  - public
    - app
      - app.js
  - views
    - index.html
  - bower.json
  - package.json
  - server.js
Run Code Online (Sandbox Code Playgroud)

Angular 应用程序 - 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';
    }]);
})();
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

为了使其工作,您需要实际运行一个网络服务器,该服务器将在您调用它们时为您正在查找的文件提供服务。您可以使用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');
});
Run Code Online (Sandbox Code Playgroud)

现在您需要做的就是node server.js访问您localhost指定的站点或任何地方,然后您就应该启动并运行了。