web-dev-qa-db-ja.com

Windows 7にAngularをインストールする方法

こんにちはこれはかなり簡単なはずですが、行き詰まっています。私のマシンにWindows 7マシンにビルドボット（0.9.06b）をインストールしました。なんとか稼働させましたが、Webページ（IE8）を表示しようとすると、エラーAngular not defined。this is a new new windows box is not was not too驚いた。NodeJSの実行可能ファイルをダウンロードしてマシンで実行し始めたので、Nodeがインストールされています。次に Angular Webサイト に移動しましたが、Zipファイルをダウンロードしましたが、 m次に何をすればいいのかわからない

npmインストールAngular

いくつかのバリエーション、つまりバージョンの指定、ファイルの解凍。しかし、それをインストールすることはできません。私のマシンはファイアウォールの背後にあるので、Webにアクセスしてさらに多くのものを取得することはできません。それはすべてローカルで動作する必要があります。 Angularのインストール方法は？ Angularがインストールされていることをどのように確認できますか？

よろしく

angularjsnode.jswindowsbuildbot
5
user595985

TL; DR

チェックアウト このgithubリポジトリ は、Node、Angular、Express、Bowerを使用したサンプルの作業アプリです。

Angular未定義のメッセージを受け取る理由は、WebサーバーからクライアントにAngularを提供していないためです。

Angular from npmをインストールすると、通常はnode_modulesフォルダからサービスを提供することになります。そうしないと、 Browserify を使用することになります。 npm install --save angularを使用しないことをお勧めします。ほとんどの場合、Browserifyを使用していない場合、node_modulesにはサーバー側の依存関係のみを含める必要があります。さらに、NPMパッケージはCommonJSを使用します ブラウザーで推奨 。Browserifyは、ブラウザー互換性のあるjsファイルにバンドルできるCommonJSスタイルのコードを作成するための一般的なソリューションです。これらには docs を使用して実行できます。

または、Angular from Bower.io をインストールできます。Bowerはクライアント側パッケージのパッケージマネージャです。Bowerには 巨大なパッケージライブラリ があります。 、NPMからも利用できる多くのパッケージを含みます。

また、グローバルインストールでnpm install -gを実行している場合を除き、プロジェクトの依存関係で--saveまたはnpm installを実行する場合は、npm uninstallフラグを追加する必要があることにも言及する必要があります。 --saveは、インストールしたパッケージを依存関係としてpackage.jsonファイルに追加します。

Angularを提供する方法の例を次に示します

この例では、Node.js、Express、EJS（Express View Engineレンダリング用）、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>タグ内のページに含める必要があります。

ビュー-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または指定した場所にアクセスして、稼働しているはずです。

3
peteb

あなたは簡単に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

ここで私のアプリはプロジェクト名です

5> Angular routingを追加しますか？いいえ

6>どのスタイルシート形式を使用しますか？ CSS

7>ワークスペースフォルダに移動します

cd my-app

8> --openオプションを指定したCLIコマンドng serveを使用してサーバーを起動します。

ng serve --open

9>はブラウザを http：// localhost：4200 / に開きます。

0
Sapna