web-dev-qa-db-fra.com

Comment installez-vous Angular sur les fenêtres 7

Bonjour, cela devrait être assez simple, mais je suis bloqué. J'ai installé buildbot (0.9.06b) sur ma machine, une machine Windows 7. J'ai réussi à le faire fonctionner, mais lorsque j'essaie d'afficher la page Web (IE8), l'erreur Angular n'est pas définie. Etant donné qu’il s’agissait d’un tout nouveau Windows Box, je n’étais pas trop surpris. J'ai ensuite téléchargé l'exécutable de NodeJS et je l'ai exécuté sur la machine pour que Node soit installé. Je suis ensuite allé sur Angular website j'ai téléchargé le fichier Zip, mais je ne suis pas sûr de ce qu'il faut faire ensuite? J'ai essayé 

npm installer angulaire

et quelques variations, c’est-à-dire spécifier la version, décompresser le fichier. Mais je ne peux toujours pas l'installer… .. Ma machine est derrière un pare-feu, elle ne peut donc pas simplement aller sur le Web et obtenir plus de choses. Tout doit fonctionner localement ... Comment puis-je installer Angular? Comment puis-je vérifier que Angular est installé?

Cordialement

angularjsnode.jswindowsbuildbot
5
user595985

TL; DR

Checkout ce github repo _ pour un exemple d'application fonctionnelle utilisant Node, Angular, Express et Bower. 

La raison pour laquelle vous recevez le message Angular non défini est que vous ne fournissez pas Angular de votre serveur Web au client. 

Installer Angular à partir de npm signifie généralement que vous allez le servir à partir de votre dossier node_modules ou que vous utiliserez Browserify _. Je vous déconseille d'utiliser npm install --save angular, votre node_modules devrait contenir uniquement des dépendances côté serveur si vous n'utilisez pas Browserify dans la plupart des cas. En outre, les packages NPM utilisent CommonJS, qui n'est pas recommandé dans le navigateur . Browserify est une solution populaire pour écrire du code de style CommonJS pouvant être intégré dans un fichier js compatible avec les navigateurs. Ils ont docs pour se lancer. 

Vous pouvez également installer Angular à partir de Bower.io . Bower est un gestionnaire de paquets pour les paquets côté client. Bower a une énorme bibliothèque de paquets , comprenant de nombreux packages également disponibles via NPM. 

Il est également intéressant de noter que, sauf si vous effectuez un npm install -g pour les installations globales, vous devez ajouter l'indicateur --save lorsque vous utilisez un npm install ou un npm uninstall pour les dépendances de votre projet. --save ajoute les paquetages que vous avez installés à votre fichier package.json en tant que dépendance. 

Voici un exemple montrant comment servir Angular à partir de Node.js

Cet exemple utilise uniquement Node.js, Express, EJS (pour le rendu Express View Engine), Bower et 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

Structure du répertoire

- Project Folder
  - node_modules
  - bower_components
  - public
    - app
      - app.js
  - views
    - index.html
  - bower.json
  - package.json
  - server.js

L'application 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 doit être chargé exactement comme toute autre bibliothèque côté client. Il devra donc être inclus dans vos pages avec la balise <head>.

La vue - 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>

Pour que cela fonctionne, vous devez avoir un serveur Web en cours d'exécution qui servira les fichiers que vous recherchez lorsque vous les appelez. Vous pouvez le faire en utilisant Express .

Le serveur Web Node.js - 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');
});

Maintenant, tout ce que vous avez à faire est node server.js et visitez votre site à localhost ou à l'endroit que vous avez spécifié. Vous devriez donc être opérationnel.

3
peteb

Vous pouvez facilement installer angular en utilisant ces étapes-

1> Angular nécessite Node.js version 8.x ou 10.x., Vérifiez la version de node.js par

node -v

2> Installez node.js, allez à nodejs.org .

3> Installer npm-

npm install -g @angular/cli

4> Créer un projet-

ng new my-app

ici my-app est le nom du projet

5> Souhaitez-vous ajouter le routage Angular? Non

6> Quel format de feuille de style voudriez-vous utiliser? CSS

7> Allez dans le dossier de l'espace de travail

cd my-app

8> Lancez le serveur en utilisant la commande CLI ng serve, avec l’option --open.

ng serve --open

9> ouvre votre navigateur sur http: // localhost: 4200/ .

0
Sapna