Tutoriel de configuration de l'environnement AngularJS pour les débutants

Cet article présente principalement le processus de configuration de l'environnement AngularJS pour les débutants. Les caractéristiques d'Angular-cli sont mentionnées dans l'article. J'espère que cela pourra vous aider.

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 maintenu par Google

Fonctionnalités AngularJS

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é (à l'aide 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. ; >

Oui La fonction de webpack peut réaliser la séparation du code, le chargement à la demande, etc. ;

configure automatiquement l'environnement de développement, l'environnement de test et l'environnement de production, peut réaliser l'empaquetage de code, la compression et le déploiement à chaud , et peut également réaliser des tests de modules et des tests de bout en bout

Angular-cli peut identifier automatiquement la pré-compilation de sass et moins via le suffixe

Angular-cli peut configurer TypeScript lorsque ; créer, et peut également effectuer des configurations personnalisées ;

La structure de projet créée via Angular-cli est la meilleure pratique et peut être utilisée dans l'environnement de production

Installer nodejs

AngularJS doit utiliser Nodejs, nous devons donc d'abord. Pour installer nodejs, vous devez utiliser nodejs. L'adresse de téléchargement de nodejs est : https://nodejs.org/en/download/,

. 3. Installez npm et cnpm

L'étape suivante consiste à installer npm,

NPM est un outil de gestion de packages installé avec NodeJS. Il peut résoudre de nombreux problèmes dans les scénarios d'utilisation courants de NodeJS. inclure les éléments suivants :

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

Permet aux utilisateurs de télécharger et d'installer des programmes en 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, 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é ici, vous pouvez donc y entrer.

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

Exécutez la commande

cnpm i -g angulaire-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 Exécutez la commande

ng new JustForTest

où JustForTest se trouve. 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 en utilisant ng serve.

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

5. Importer le projet

.

Si c'est le cas, comment pouvons-nous démarrer un projet localement si nous le trouvons en ligne ? 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

Pour la démonstration ici, nous utilisons également un projet. du professeur Da Mo : NiceFish, nous devons d'abord cloner le projet via git, ce qui ne sera pas démontré 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écutez la commande

cnpm i -g @angular/cli

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

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

cnpm install

Puis exécutez la commande

ng serve -prod -aot

Attendez ensuite la fin de la compilation.

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

http://localhost:4200 pour accéder au projet.

Recommandations associées :

Gestion des problèmes de connexion des utilisateurs d'AngularJs

AngularJS implémente la fonction de vérification du numéro de téléphone mobile

Quelques utilisations d'angularJS

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!