IONIC Section 5 - 5.4 Analyser le projet créé

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Bonjour à tous, comme je l’ai mentionné, dans ce projet, nous avons généralement un projet Angular normal. Si vous explorez le dossier source, vous trouverez les fichiers principaux. Comme vous pouvez le constater, nous lançons une application Angular normale, dans le fichier main.ts, vous ne trouvez absolument rien à propos d’Ionic ici, c’est tout le code que vous trouvez dans une application Web Angular Normale. Le fichier "index.HTML" a également l’air d’un fichier basique, on peut apercevoir le titre indiquer la correspondance avec Ionic, mais à part cela, c’est un fichier HTML normal dans lequel nous avons notre component racine d’application. Si vous savez comment une application Angular démarre, vous devriez savoir que le sélecteur « app-root » est sélectionné par notre module d’introduction, qui est le module que nous amorçons, nous démarrons notre application qu’on peut retrouver dans le dossier de l’application, notamment avec le fichier « app.component.ts » dans lequel nous retrouvons bien notre sélecteur parmi nos components. Par conséquent, le contenu de notre sélecteur dans notre fichier HTML, monte donc notre component Angular « app-root »,sur le DOM réel et tout autre components que nous incluons dans notre template et fera donc parti de notre application Angular. Effectivement, pour ce cours, il est bénéfique d’avoir des connaissances concernant ce framework, cependant, j’essaierai de vous expliquez en détails les fonctionnalités que nous allons devoir utiliser concernant Angular. Voici une nouveauté, c’est le dossier thèmes. Ici, nous observons les extensions « SCSS » qui nous est donné par défaut pour le style. Ce dossier sera important, car si on observe de plus près ce fichier, nous voyons une syntaxe assez étrange qui est en fait une fonctionnalité CSS fortement utilisée par Ionic, des propriétés personnalisées CSS également appelées variables CSS et, en fin de compte, il ne s’agit pas d’une toute nouvelle fonctionnalité proposé par Ionic, c’est une fonctionnalité CSS standard, qui vous permet de définir vos propres variables pouvant contenir toutes sortes de valeurs telles que les couleurs, mais vous pouvez également stocker des unités, des tailles, etc… Vous pouvez stocker ce que vous voulez puis réutiliser ces variables et les affecter dans votre application. Voilà concernant le dossier thème, le plus intéressant est bien sûr de savoir comment cette application interagit maintenant avec Ionic et comment est-elle connectée ? Si nous regardons le fichier « angular.json », nous verrons que si nous faisons défiler un peu, on a une configuration « build » qui s’exécute lorsque notre application Angular build. Et juste en dessous on peut observer l’import des « assets » et la première chose ici est que nous voyons que les « ion-icons » sont inclus en tant qu’actifs. Ce n’est bien sûr pas le cas dans un projet Angular standard, mais Ionic a créé un projet Angular standard dont la configuration est déjà ajustée pour inclure ces icônes afin que nous puissions les utiliser dans notre application Angular ici. Donc ça c’était la première partie intéressante, nous avons aussi ce fichier « ionic.config.json » ici qui est très simple mais cela vous permettra de définir l’application, par exemple nous avons « name » qui sera l’identifiant de votre application. Dans le fichier « package.json », nous pouvons observer de nombreuses importations Angular, mais nous avons également quelques importations Ionic et, ce qui est particulièrement intéressant, c’est l’importation Ionic/Angular ici. Nous allons trouver que ce package est utilisé dans notre « app.module.ts » ou on y retrouve du code Angular avec notre « NgModule », avec « bootstrap » également. Et ce que nous allons éclaircir dans la prochaine vidéo, c’est de voir comment Ionic et Angular vont pouvoir travailler ensemble ?