IONIC - 3.4 Project structure with Angular

Click here for more videos available on our youtube channel !

Hello everyone, and welcome to this video. To carry out our project, we will need to know Angular functionalities. First we will see the structure, and then some guidelines we will need. To learn more, we will look in detail at all of our files when creating an Ionic project, me for example, my folder is called "Angular-test", it's a project that is blank that I just installed and created. So we first have the "e2e" subfolder and inside there are files. This file is useful for all that is unit test, we will not need it it is not the subject of our course so we will not be interested in it, it is to do functional and integration tests. Then we have the Node_modules folder, node module that we installed beforehand. And we have source, and source, it is in this folder where we will generally use it to work in order to develop our project. Inside this folder there is an "App" component, by default with all the files for example CSS HTML, so it's SCSS to have more packages, we also have the TypeScript file. So for example, we have the file "app-routing.module.ts" which will allow routing, then we have the file "app.module.ts" which is the heart of starting our project, inside we will be able to enter the modules that we will need via Angular which is separated by several modules that we need. We also have the "environments" folder, inside there are 2 types of file, a prod which is here and a dev, so simply to develop, and the second "prod" which will allow to deploy in production. We have an "index.html" file in Angular which contains only one page, in our project. We have the "main" file right here, to be able to launch the application, CSS for styling, or you can also import bootstrap. And also another test file for unit testing. Then we have "angular.json" which is the configuration of Angular cli, which allows us to create many things, with all the tools inside, everything related to the Angular CLI. We also find the "karma.conf.js" file for the unit test, the necessary packages, so to install the libraries, which will be integrated in this file with the dependencies. There is also the "config" file which provides information about the typescript. So we have seen the necessary functionalities depending on the files. Now that we have seen in detail the functionalities of our files, we will see together some Angular commands, which we will need for our project. So we will have the "NgIf" command, the "NgFor", the "NgModel" and the "(click)", so these are all called directives. So we will first see the “NgIf”, you can see the little star in front, because it is an arbitrary syntax so that Angular knows that it is a structural structure, so if you forget it, it won't work. This directive comes from the "CommonModule" that you find with all its modules that you create via this "CommonModule". We will see how to use it. Here is our example case, here we have a component with 2 properties, a boolean with the value true, which is stored in "isUserLoggedIn", and we have a character string, a string which has the value "John Doe" for example, which is stored in "userFullname", and which indicates that the user is logged in, we will display the name of the user if he is logged in, if the "isUserLoggedIn" condition is true, the user's name will be displayed, otherwise, nothing. Me what I advise you is to create your properties first, which contains the condition you are going to test. Why ? Because your code is very often evaluated by Angular, and for it to be well updated, it will go through your condition again and test it, re-test, re-test… So this is an example of how to use this directive. Now we are going to see "*ngFor" this directive allows you to loop over an array and inject the elements into the DOM. It is possible to retrieve other information such as the index of the element. So there for example we have the "ngFor" we will fetch the index, we will also look for first, or odd, inside this list, we did *ngFor=“let book of bookList” and inside, as I explained to you, we are going to recover all the elements. Now let's go to the "ngModel", so we have the "ngModel" which is a built-in directive that creates a "FormControl" instance in other words, from the domain model by binding it to a form control element. It binds the value of HTML controls to application data to perform two-way binding with 'input', 'select', 'selectarea' via an 'NgModule' which is used to register anything you create in Angular, and group them together. So there for example, In this case of example, I will insert it in an input, concerning the to-do list, where it will retrieve all the tasks that we have entered. With the Angular framework, it is possible to fully develop your web application or website, without using other tools or other languages. The framework applies the MVC model for this. The controller sends the information to the view which displays it. It is by using this relation that we can call a function when clicking on an element. The notation is however different between AngularJS, the very first version of the framework and the following versions. In your code, you must use the event by indicating it between parentheses: (click). This is the same type of notation for all events in Angular. The rest of the writing is identical to the classic HTML code for a button click. On our side, this is all we will need for this project, if you ever need detailed information, I advise you to read the official documentation, here is the link, anyway, there is nothing better, I do not advise you to go to forums like "stackoverflow" where you can exchange and ask anyone about your request, but each one has a typical problem defines who can, not match yours, that's a first point, and sometimes, the date of the post to which you want answers is dated a year or more, and it may take time to have an up-to-date and therefore different version in the meantime. The forums are good, the documentation is better, but it remains a personal conclusion, the same I put the link just below. This video is coming to an end, now we are ready for our project, let's go!