如何在Windows 7上安装Angular？

Question

如何在Windows 7上安装Angular？

5

你好，这应该很简单，但我遇到了困难。我在我的Windows 7机器上安装了buildbot（0.9.06b）。成功运行后，当我试图显示网页（IE8）时，出现了Angular未定义的错误。考虑到这是一个全新的Windows系统，我并不感到意外。我随后下载了NodeJS应用程序并在机器上运行，因此已安装了Node。然后我去Angular网站下载了zip文件，但我不确定下一步该怎么做？我尝试了npm install Angular和其他几种变化形式，例如指定版本、解压文件等，但仍然无法安装它。我的机器在防火墙后面，因此无法直接到网络上下载所需内容。所有东西都必须在本地工作。我该如何安装Angular？如何检查是否已安装Angular？谢谢！

- user595985

2个回答

0

您可以按照以下步骤轻松安装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> 使用CLI命令ng serve启动服务器，并使用--open选项。

ng serve --open

9> 可以将您的浏览器打开到http://localhost:4200/。

- Sapna

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- peteb · Accepted Answer

简而言之

查看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

// 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 或者你指定的地址，这样你就可以启动并运行网站了。