Maison  >  Article  >  interface Web  >  Explication détaillée des étapes de création de l'environnement AngularJS

Explication détaillée des étapes de création de l'environnement AngularJS

php中世界最好的语言
php中世界最好的语言original
2018-04-16 14:06:071360parcourir

Cette fois, je vais vous donner une explication détaillée des étapes pour construire l'environnement AngularJS. Quelles sont les précautions lors de la construction de l'environnement AngularJS. Voici des cas pratiques, jetons un coup d'œil.

Qu'est-ce qu'AngularJS ?

AngularJS est un framework d'application Web open source. Il a été initialement développé en 2009 par MISKO Hevery et Adam Abrons. Désormais géré par Google

AngularJSFonctionnalités

AngularJS est un puissant framework de développement basé sur JavaScript pour créer des applications Internet riches (RIA).

AngulajJS offre aux développeurs la possibilité (Utilisation de JavaScript) d'écrire des applications côté client de manière propre MVC (Model-View-Controller).

Les applications écrites en AngularJS sont compatibles avec tous les navigateurs. AngularJS utilise du code JavaScript pour gérer automatiquement l'adaptation à chaque navigateur.

AngularJS est open source, entièrement gratuit, développé et maintenu par des milliers de développeurs à travers le monde. Il est publié sous la licence Apache version 2.0.

Dans l'ensemble, AngularJS est un framework permettant de créer des applications Web à grande échelle et hautes performances tout en les rendant faciles à maintenir.

1. Voici une brève introduction aux fonctionnalités d'Angular-cli :

Angular-cli peut rapidement construire un framework et créer des modules, des services, des classes, des directives, etc.

Il a la fonction de webpack, qui peut réaliser la séparation de code, le chargement à la demande, etc.

configurez automatiquement l'environnement de développement , l'environnement de test et l'environnement de production, qui peuvent réaliser le packaging de code, la compression et le déploiement à chaud, ainsi que les tests de modules et les tests de bout en bout

Angular-cli peut identifier automatiquement la précompilation de sass et moins grâce au suffixe

; Angular-cli peut configurer TypeScript lors de la création, et peut également effectuer des configurations personnalisées

 ; La structure d'ingénierie créée via Angular-cli est une bonne pratique et peut être utilisée dans des environnements de production

 ; 2. Installer nodejs

AngularJS nécessite Nodejs, nous devons donc d'abord installer nodejs et utiliser nodejs. L'adresse de téléchargement de nodejs est : https://nodejs.org/en/download/,

. 3. Installez npm et cnpm

La prochaine étape consiste à installer npm,

NPM est un outil de gestion de packages installé avec NodeJS. Il peut résoudre de nombreux problèmes dans le déploiement de code NodeJS. Les scénarios d'utilisation courants sont les suivants :

. Autoriser les utilisateurs à télécharger des packages tiers écrits par d'autres à partir du serveur NPM pour une utilisation locale.

Permet aux utilisateurs de télécharger et d'installer des programmes de ligne de commande écrits par d'autres à partir du serveur NPM pour une utilisation locale.

Permet aux utilisateurs de télécharger des packages ou des programmes en ligne de commande qu'ils écrivent sur le serveur NPM pour que d'autres puissent les utiliser.

L'installation de nodejs et npm est terminée ici, mais il y aura quelques problèmes si vous utilisez npm pour l'installer dans Datianchao, nous utilisons donc cnpm pour l'installer, qui est également un package de npm.

Installez cnpm et exécutez la commande

npm i -g cnpm

Après avoir exécuté cette commande, attendez la fin, puis entrez la version cnpm pour vérifier si l'installation est terminée. Je l'ai déjà installée ici, afin que je puisse y accéder.

Après avoir installé cnpm, nous commençons à installer Angular-cli.

Exécuter la commande

cnpm i -g angular-cli

Ensuite, vous pouvez exécuter la commande ng version pour vérifier si l'installation est terminée et la version d'angular-cli

Une fois l'installation terminée, nous pouvons utiliser la commande ng et commencer à créer le projet.

4. Création de projet

Après avoir installé angulaire-cli, vous pouvez créer le projet directement et exécuter la commande

ng new JustForTest

Où JustForTest est le nom du projet

L'exécution de cette commande crée beaucoup de fichiers et vous devez attendre un moment. Cette étape prendra beaucoup de temps et vous devrez attendre que l'installation de nod_.modules soit terminée

. Commencez directement à utiliser ng serve.

De cette façon, vous pouvez démarrer le projet directement. On saisit : http://localhost:4200 dans le navigateur pour accéder directement à :

. 5. Importer le projet

Si nous recherchons un projet en ligne, comment pouvons-nous le démarrer localement ? Faisons-le en détail :

Je recommande à tout le monde de jeter un œil à ce tutoriel du professeur Da Mo : le didacticiel vidéo Angular2.0 est ici

, ici nous utilisons également un projet de Teacher Da Mo : NiceFish. Nous devons d'abord cloner le projet via git. Nous ne le démontrerons pas ici. Voici l'adresse du projet NiceFish : http://git.oschina.net/mumu. -osc/NiceFish

Une fois le projet cloné, la ligne de commande entre dans le répertoire où se trouve le projet.

Exécuter la commande

cnpm i -g @angular/cli

Laissez-moi vous expliquer ici, nous avons déjà installé le Global Angular-cli.

Attendez la fin de l'exécution de la commande, puis exécutez la commande

cnpm install

Exécutez ensuite la commande

ng serve -prod -aot

Attendez ensuite la fin de la compilation.

Une fois terminé, nous pouvons saisir dans le navigateur :

http://localhost:4200 Accédez au projet.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :



Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn