angularjs – 如何在Windows 7上安装Angular

发布时间：2020-12-17 10:23:24 所属栏目：安全来源：网络整理

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

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

npm install Angular

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

问候

TL; DR

使用Node,Angular,Express和Bower查看this github repo作为示例工作应用程序.

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

从npm安装Angular通常意味着你将从你的node_modules文件夹中提供它,或者你将使用Browserify.我建议不要使用npm install –save angular,你的node_modules应该只包含服务器端依赖项,如果你是在大多数情况下不使用Browserify.此外,NPM软件包使用CommonJS,即isn’t preferred in the browser. Browserify是一种流行的解决方案,用于编写可以捆绑到浏览器兼容的js文件中的CommonJS样式代码.他们有docs起床和跑步.

或者,您可以从Bower.io安装Angular .Bower是客户端软件包的软件包管理器. Bower有一个huge package library,包括许多也可以通过NPM获得的套餐.

还值得一提的是,除非您正在为全局安装执行npm install -g,否则在执行npm安装或为项目依赖项执行npm卸载时应添加–save标志. –save将您安装的所有软件包添加到package.json文件中作为依赖项.

这是一个如何从Node.js提供Angular的示例

这个例子只使用Node.js,Express,EJS(用于Express View引擎渲染),Bower&角

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');
});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!