IONIC - 3.4 Structure du projet avec Angular

Bonjour à tous, et bienvenue dans cette vidéo. Pour réaliser notre projet, nous aurons besoin de connaître des fonctionnalités Angular. Dans un premier temps nous allons voir la structure, et dans un deuxième temps quelques directives dont nous aurons besoin. Pour en savoir plus, nous allons regarder en détails l’ensemble de nos fichiers lors de la création d’un projet Ionic, moi par exemple, mon dossier s’appelle « Angular-test», c’est un projet qui est vierge que je viens d’installer et de créer. Donc nous avons dans un premier temps le sous-dossier « e2e» et à l’intérieur on y retrouve des fichiers. Ce dossier est utile pour tout ce qui est test unitaire, on en aura pas besoin ce n’est pas le sujet de notre cours donc on ne va pas s’y intéresser, c’est pour faire des tests fonctionnels et d’intégration. Ensuite nous avons le dossier Node_modules, node module que nous avons installer au préalable. Et nous avons source, et source, c’est dans ce dossier ou globalement on va l’utiliser pour travailler afin de développer notre projet. A l’intérieur de ce dossier il y a un composant « App », par défaut avec l’ensemble des fichier par exemple CSS HTML, donc la c’est SCSS pour avoir plus de packages, on a aussi le fichier TypeScript. Donc par exemple, on a le fichier « app-routing.module.ts» qui permettra de faire du routage, ensuite on a le fichier « app.module.ts» qui est le coeur de démarrage de notre projet, à l’intérieur on va pouvoir rentrer les modules que nous aurons besoin via Angular qui est séparé par plusieurs modules que nous avons besoin. Nous avons aussi le dossier « environments», à l’intérieur on retrouve 2 types de fichier, un prod qui est ici et un dev, donc tout simplement pour développer, et le second « prod» qui permettra de déployer en production. On a un fichier « index.html» dans l’angular qui contient q’une seul page, dans notre projet . Nous avons le fichier « main» juste ici, pour pouvoir lancer l’application, le CSS pour le style, ou vous pouvez également importer bootstrap. Et également un autre fichier test pour les tests unitaire. Puis nous avons « angular.json» qui est la configuration d’Angular cli, qui permet de nous créer bon nombre de choses, avec tout les outils à l’intérieur, tout ce qui concerne l’Angular CLI. On retrouve aussi le fichier «karma.conf.js» pour le test unitaire, les packages nécessaires, donc pour installer les bibliothèques, qui seront intégrer dans ce fichier avec les dépendances. On retrouve aussi le fichier « config» qui permet d’avoir les informations concernant le typescript. Donc on a vu les fonctionnalités nécessaires en fonction des fichiers. Maintenant qu’on a vu en détails les fonctionnalités de nos fichiers, on va voir ensemble quelques commandes Angular, dont nous auront besoin pour notre projet. Donc nous aurons la commande "NgIf", le « NgFor», le « NgModel» et le « (click)», donc tout ceci s’appelle des directives. Donc on va voir dans un premier temps le«NgIf», vous pouvez voir la petite étoile devant, car c’est une syntaxe arbitraire pour que Angular sache que c’est une structure structurelle, donc si vous l’oubliez, cela ne va pas fonctionner. Cette directive vient du « CommonModule» que vous retrouvez avec tout ses modules que vous créez via ce « CommonModule». On va voir comment l’utiliser. Voici notre cas d’exemple, ici on a un composant avec 2 propriétés, un boolean de valeur true, qui est stocké dans "isUserLoggedIn», et on a un chaîne de caractères, un string qui a la valeur « John Doe» par exemple, qui est stocker dans « userFullname»,et qui indique que l’utilisateur est connecté on va afficher le nom de l’utilisateur si il est connecter, si la condition « isUserLoggedIn» est vrai, le nom de l’utilisateur va s’afficher, sinon, rien. Moi ce que je vous conseille c’est de créer vos propriétés d’abord, qui contient la condition que vous allez tester. Pourquoi ? Parce que votre code est très souvent évaluer par Angular, et pour qu’il soit bien mis à jour, il va repasser par votre condition est la tester, re-tester, re-tester… Donc ça c’est un exemple de comment utiliser cette directive. Maintenant nous allons, voir « *ngFor» cette directive permet de boucler sur un array et d'injecter les éléments dans le DOM. Il est possible de récupérer d'autre informations telles que l'index de l'élément. Donc là par exemple on a le « ngFor» on va aller chercher l’index, on va également chercher first, ou odd, à l’intérieur de cette liste, on a fait *ngFor=« let book of bookList» et à l’intérieur, comme je vous l’ai expliqué on va aller récupérer l’ensemble des éléments. Passons maintenant au « ngModel», donc nous avons le « ngModel» qui est une directive intégrée qui crée une instance « FormControl» en d’autres termes, à partir du modèle de domaine en la liant à un élément de contrôle de formulaire. Il lie la valeur de contrôles HTML aux données d’application pour réaliser la liaison bidirectionnelle avec « input», « select», « selectarea» via un « NgModule» qui sert à enregistrer tout ce que vous créez dans Angular, et les grouper ensemble. Donc là par exemple, Dans ce cas d’exemple, je vais l’insérer dans un input, concernant la to-do list, où il va récupérer l’ensemble des tâches que nous avons saisies. Avec le framework Angular, il est possible de développer entièrement son application web ou son site internet, sans faire appel à d'autres outils ou d'autres langages. Le framework applique pour cela le modèle MVC. Le contrôleur envoie les informations à la vue qui les affiche. C'est en utilisant cette relation que l'on peut appeler une fonction lors d'un clic sur un élément. La notation est cependant différente entre AngularJS, la toute première version du framework et les versions suivantes. Dans votre code, vous devez utiliser l'évènement en l'indiquant entre des parenthèses : (click). Il s'agit du même type de notation pour tous les évènements dans Angular. Le reste de l'écriture est identique au code HTML classique pour un clic sur un bouton. De notre coté, c’est tout ce dont nous aurons besoin concernant ce projet, si jamais vous avez besoin de renseignements détaillés, je vous conseil de lire la documentation officielle, voilà le lien, de toute façon, il n’y a rien de mieux, je vous déconseille pas d’aller sur des forums comme « stackoverflow» ou vous pouvez échanger et demander à n’importe qui concernant votre demande, mais chacun à un problème type définit qui peut, ne pas correspondre aux votre, ça c’est un premier point, et parfois, la date du post auquel vous souhaitez des réponses et daté d’un an ou plus, et il faut peut de temps pour avoir une version à jour et donc différente entre temps. Les forums c’est bien, la documentation, c’est mieux, mais ça reste une conclusion personnelle, pareil je vous ai mis le lien juste en dessous. Cette vidéo touche à sa fin, maintenant, nous sommes paré pour notre projet, c’est parti !