Question

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

npm install Angular

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

此致

Answer 1

TL; DR

使用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

提供Angular的示例

此示例仅使用Node.js，Express，EJS（用于Express View引擎渲染），Bower＆amp;角

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或您指定的任何地方，您应该启动并运行。

Answer 2

您可以使用以下步骤轻松安装angular-

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>使用带有--open选项的CLI命令ng serve启动服务器。

ng serve --open

9>将浏览器打开到http://localhost:4200/。

如何在Windows 7

2 个答案:

TL; DR

以下是如何从Node.js