Sélectionner une page


Dans ce cas, le cadre signifie simplement une méthode standard de communication entre les différentes parties d’une application Web. AngularJS régule la manière dont le site Web communique avec la logique métier de l’application. Il normalise également la manière dont la logique métier communique avec la base de données, la vue utilisateur, etc. La clé à retenir est qu’AngularJS n’est pas un langage de programmation en soi. C’est juste une structure comme les cadres d’une maison, et TypeScript est tout pour remplir ce cadre: les clous, le stuc, le ciment, etc.

Dans cet esprit, commençons à créer cette application. Tout d’abord, c’est le téléchargement de Node – le moteur qui exécute une application AngularJS. À la fin de ce court didacticiel, vous devriez avoir un écran qui ressemble à ceci:

Télécharger NPM

Vous pouvez utiliser NPM ou Node Packet Manager pour organiser, télécharger et gérer les dépendances de votre application AngularJS. Il peut être considéré comme le moteur de votre application. Nous n’irons nulle part sans eux.

Donc, la première chose que nous allons faire est d’aller sur leur site Web et télécharge le. Veuillez télécharger la version qui dit qu’il s’agit du LTS. (Au moment d’écrire ces lignes, il s’agit de la version 12.18.3.) À ce stade, vous devriez être sur un écran qui ressemble à ceci:

Une fois ce téléchargement terminé, accédez au Terminal sur votre Mac (ou à la cmd sur votre PC), tapez node -v et appuyez sur Entrée. Tapez ensuite npm -v et appuyez sur Entrée. Si votre écran ressemble à quelque chose comme ça, vous êtes sur la bonne voie:

Pour ceux sur un PC Windows

Si vous êtes sur un ordinateur Windows, il y a de fortes chances que le nœud ne fonctionne que s’il est ajouté au chemin de classe. Donc, si vous essayez d’exécuter les commandes ci-dessus et que vous obtenez le message « Il n’y a pas une telle application » ou quoi que ce soit à voir avec cela, cela ne fait pas partie de votre chemin de classe. Corrigeons ça.

Tout d’abord, accédez à l’emplacement de téléchargement de nodejs. Il se trouve sous C: Program Files Nodejs. Ensuite, procédez comme suit:

  1. Accédez à l’icône Windows en bas à gauche et recherchez «Variables d’environnement».
  2. Cliquez sur Modifier les variables d’environnement système.
  3. Cliquez sur Variables d’environnement.
  4. Dans la zone Variables système, recherchez «Chemin» et modifiez-le pour inclure C: Program Files nodejs. Séparez-le de tout autre chemin avec un. (Point-virgule).
  5. Redémarrez votre ordinateur et répétez la commande dans CMD.

Maintenant que NPM est opérationnel, passons à l’étape suivante: télécharger notre IDE.

Obtenez un IDE

La prochaine chose dont vous aurez besoin est un IDE. Un IDE, abréviation de Integrated Development Environment, est un logiciel que les développeurs peuvent utiliser pour coder de manière efficace et efficiente. Le meilleur du marché est WebStorm. Ce n’est gratuit que pendant 30 jours, mais c’est plus qu’assez de temps pour faire ce que nous faisons en ce moment. Vous pouvez également télécharger gratuitement Visual Studio Code. Cependant, ce didacticiel est réalisé avec WebStorm.

Après avoir cliqué sur le lien ci-dessus, veuillez télécharger WebStorm. C’est un logiciel assez gros donc cela peut prendre un certain temps. Une fois que cela est fait, un écran devrait s’ouvrir vous demandant de démarrer un nouveau projet. Cela ressemblera à quelque chose comme ceci:

Cliquez sur « Créer un nouveau projet ». À ce stade, vous devriez voir une variété de cadres différents le côté gauche de l’écran. Cliquez sur la CLI AngularJS. Appelez le nom du projet my-first-rodeo.

Cliquez ensuite sur Créer. Dès qu’il est cliqué, WebStorm crée automatiquement le code standard requis pour une application AngularJS. C’est ce qu’on appelle «l’échafaudage». Vous verrez également beaucoup d’activité dans le terminal de votre IDE. Le terminal est la partie inférieure de l’écran. La navigation dans le répertoire ou le téléchargement des dépendances a lieu ici.

Ensuite, jetez un œil à la structure des dossiers. C’est la zone sur la gauche. Il ressemblera à ceci:

Notez tous les différents dossiers qui ont été créés. Il s’agit de l’ensemble de l’échafaudage requis pour créer une application AngularJS. Le répertoire appelé my-first-rodeo / src / app est l’endroit où la majeure partie du code d’une application Web particulière est écrite. Mais maintenant, faisons fonctionner cette chose!

Exécutez votre application AngularJS

Nous avons donc téléchargé NPM, téléchargé un IDE et créé un projet AngularJS. Il est maintenant temps de le voir en action. Nous utilisons la CLI Dandy AngularJS pratique pour cela. La CLI AngularJS est un Ligne de commande Outil pour interagir avec les applications AngularJS. Il a de merveilleuses propriétés, mais pour les besoins de cet article, nous allons nous concentrer sur deux en particulier, à commencer par ng serve.

Ng Serve est un outil de ligne de commande qu’un développeur peut utiliser pour exécuter son code localement. Tapez donc ng serve dans le terminal et appuyez sur Entrée. En cas de succès, vous devriez voir un écran qui ressemble à ceci:

Une fois que votre serveur local est opérationnel, ouvrez un navigateur et accédez à http: // localhost: 4200. Nous avons officiellement lancé notre première application AngularJS! Admirez la beauté pré-générée. Si votre ordinateur exécute AngularJS 10, cela devrait ressembler à ceci:

C’est bien beau, mais nous n’avons même pas encore écrit de code. Personnalisons-le en créant notre propre composant. Cependant, pour créer votre propre composant, la CLI AngularJS doit revenir en jeu. Cette fois avec ng generate.

Génération de notre propre composant

Accédez au terminal WebStorm dans la zone inférieure et entrez ng generate c my-first-component. Si c’est bien fait, cela devrait ressembler à ceci:

Ng generate est un excellent moyen de créer des composants AngularJS. Les composants AngularJS doivent être créés et déclarés de manière assez systématique. Malheureusement, cela conduit souvent à une erreur de l’utilisateur lorsqu’un développeur tente de créer la structure de fichiers manuellement. Ng generate élimine ce risque en générant automatiquement tout pour vous. Il crée le composant TypeScript, un fichier CSS, un fichier de spécification et enfin un fichier HTML.

N’oubliez pas qu’un composant AngularJS se compose d’un fichier HTML et d’un fichier de composant TypeScript avec lesquels il communique. Modifions donc le fichier HTML nouvellement généré et ajoutons-le à notre site Web.

Accédez d’abord à my-first-component.component.html et remplacez le texte par

Mon premier rodéo !!

Ensuite, allez dans le fichier app.component.html et supprimez tout. Remplacez-le par

Ces lignes de code indiquent à AngularJS d’examiner ce composant et d’afficher le code HTML qui y est intégré. Dans ce cas, le modèle HTML affecté au composant my-first-component s’affiche.

Rechargez l’application et elle ressemblera maintenant à ceci:

Vous vous demandez peut-être comment AngularJS savait qu’il était censé y ressembler. En d’autres termes, comment a-t-il connecté la balise HTML que nous avons placée dans app.component.html au fichier HTML de mon-premier composant?

On savait que lors de l’exécution de la génération ng, MyFirstComponent était placé dans le fichier app.module.ts. C’est le fichier qu’AngularJS analyse pour savoir quels composants ont été déclarés dans le cadre de chaque projet.

Emballer

Phew! Cela a beaucoup de terrain sous les pieds. Nous avons téléchargé les exigences AngularJS, démarré le serveur avec ng serve, généré un composant avec ng generate et même écrit du code. AngularJS est un framework puissant qui intègre de nombreux outils tels que les IDE et AngularJS CLI pour simplifier l’automatisation. Il a également une conception robuste et complexe qui permet aux développeurs de coder tout ce qu’ils (ou le propriétaire du produit) veulent.

Il est très impressionnant, en fait, que tant de code soit généré sans vraiment tout taper. J’espère que vous avez apprécié la création de votre première application AngularJS et que vous êtes maintenant sur la bonne voie pour créer un merveilleux site Web AngularJS!

[a]Lien vers l’article AngularJS



Source link

Recent Posts