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
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.
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.
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/ .