Creating News Application With Ionic 4 and Angular

hello everyone in this video we will take a look at how we can create a news application with ionic for an angular ionic 4 is currently in beta but it is quite stable to create real applications so if you want to read more about the version 4 of the flavor you can head over to beta note ionic framework dot-com slash Docs and read about the framework so yeah let's get started first we need to make sure we have node and NPM installed so for this on our terminal we can write node - V and NPM - V now if you don't see the version numbers what you can do is you can head over to node J esto 200 G and then download the node for the specific platform like either you are on Windows Mac or Linux now we can install the ionic bacteria globally so we can run NPM install - G and then ionic so if you press ENTER then it will install ionic on your local machine I already have it installed so I won't run this step so after you run this you will be greeted with this ionic utility so if you press ionic - and if you see this screen that means ionic is successfully installed on your machine so what we can do is now we can create new project with ionic so what we can do is we can write ionic start my app this is the name of the project so I will say ionic for angular news as we want to create a news app and for the next parameter we will use a template so it can be blank then tabs and then side menu actually side menu so what I want to use is I want to use tabs menu I like tabs templates so I will write tabs here and the last parameter we need to pass is - - type equal to angular as ionic is framework EGNOS so what we can do is if you want to use angular version but we have to specify the type here so currently I think only angular is spotted maybe in the future react or view is view will be supported I'm not sure so now we can press ENTER then it will create our new project with the tabs template for now I don't want to integrate the SDKs and then it will install the dependencies it might take some time so I will be back when it finishes alright now that our project is created so what we can do is we can open the project inside the visual studio code or any editor that you prefer so we will change the directory to a newly created folder and then we can use code door to open it inside the visual studio code alright so this is the folder structure that you get with the ionic 4 project this is like slightly different from like I know 2 or 3 project so you will use a angular routing in this case like in the version 4 of the ionic and don't use push and pop navigation that you used with ionic 2 and 3 so here you can see we have these default pages so about page contact page home page and then the tabs page that will display the tabs and we also have the components folder way we will put our shared components all right so now let's see how we can view this project in the browser so we will open the integrated terminal in the VIS code and then we will run ionic serve now this will open the project inside of our browser so this is a default template or tabs template you get with ionic alright so we can open the developer console here and then we can press this icon toggle device toolbar and then it will show the application inside the different screens as you can see cannot be I have selected iPhone 6 so maybe we can expand it alright this looks better actually let's close this also so what we can do now is we can go back to our vs code and then actually I will open the terminal again we will create two new pages so the first page will be the news page and the second page will be new single page so in the first way we will show the different news and when we click on that we will open the new page which will show that signal news so what we can do is we can use ionic generators for that so for this we can write ionic generate or short for G and then page and then the page name is news in that case we can pass maybe dry run in that case so what it will do is it it will run the command but it won't create any file in our directory this is similar to ionic angular right and actually using the angular CLI if you see here it is running a nd generate page so so it will show us what files it will create or what files it will update as you can see here so if we feel like this is what we require then we can run the command again without dry run so what I would recommend is whenever you want to generate something you should first try it with a write on this if you feel like the folder structure that it will be generating is okay then you can run that command again without that idea so as we have run this command so it has created this news page or folder here as you can see we when we generate a page it will create these five files so news module then page dot HTML source file then spec file for testing and then the main D is file so also we will create a new page news single alright so I will press ENTER here again so now you can see we created two new pages News and new single and actually we can maybe add it to the gate add news and news single page this is a good practice so that maybe you can revert back to the changes if something went wrong in your project so what we can do now is we can go to our tabs module and here we need to import our news page actually I have may have to write it here import from news slash news module and here I can write news page module so here I will write news page module so I have to save it now and then after that I can go to tabs router module and here you can see the tabs actually I will minimize this terminal here you can see the tabs routes so that you are seeing on the tab space so first one home then second is about and contact so instead of home I want to use news page so i will write maybe news here in actual news and for the component I will use news page so we don't need that homepage I will remove that here and here for the page this is news and then for the outlet this is news again so path and outlet and paths match full I think that is OK if I save it and then I go back to the browser ok so we are getting an error let's see what is it actually there is one more stuff we need to do so we have to go back to the editor and then inside of devs page dot HTML here we can write news the news and again here I will say may be news for the label I will also use yes we can keep the icon home for now so now if we go back alright so you can see we are getting that news page instead of the home page so we are keeping this news page about and contact alright so inside of the news page but I want to show is I want to show articles from a news outlet so in this case I will be using an API called News API dot-com so if we go here and actually I'm already logged in I can click on that get API key so this is a one maybe you should generate your this key won't work after I complete this tutorial so you should create your own so I can copy it and maybe I can go back here actually let's first go back to our code editor and then here in the environments file and here I will create two properties so first one will be API URL and I will put the URL in a second and then I will put API key so this is a one we just copied so for the API URL I will copy this one and I will paste it here and now let's create a service so I will open the terminal again and actually I will maybe close this one and let's use that split terminal and I will generate a new service i only generate it so if you just write ionic generate and press enter you will be asked to create everything that the ionic generator provide so we can use that also so if I select maybe service then it will ask us the name of the service so I will say maybe News and then press Enter so it will create a new service for us and now I can open that and here maybe we can create a constant for API URL and that will be environment dot API URL we can create another constant for the P key and that will be environment dot API key all right now we can create a method to maybe get data so let's say get data in that case what we will do is we will pass a URL here and then we will return actually we have to pass HTTP module here so what we can do is we can say private HTTP then HTTP client this is not one so we will say angular / comment / HTTP so before that what we need to do is we have to go to app module and here in the imports we can write HTTP client model so yeah this is the right path and then here this will work and now what we can do is we can use this HTTP service actually I will close this terminal and turn this dot HTTP dot get and then we will pass a URL so we will use the template strings and here we can use API URL then slash we will use that URL and then I think we have to pass API key so we can use a query string here and then API key equal to and then we can use this constant for API key all right and then we can save that now we can go back to our newest component and we can open news page and here we can inject our service so that will be News Service and we have to import new service make sure you add this statement and here in the NGO net we can write this dot new service dot get data and here we have to pass a URL so we can go back to our browser and let's just use this one top headlines top business where headlines in the US so we will copy this and we can go back to the editor and then we will paste this here actually we have to put it inside the codes and then we can subscribe so let's say maybe data and then we will output it to the console so if I say wait actually I am saying one mistake here in the new service we first have to add and instead of caution mark and also if we go back to environment files we have to remove that /we because we are using the slash here alright now if we go back to our editor actually there is one more thing if we go here I think this will work so let's go back to our browser and now in the ionic app so here you can see currently we are on the new staff and this functional rain and we are getting these articles alright so these are the articles so actually what we can do is we can go to our network tab and see the URL here and we can actually open it in a browser directly so that we can see the entries here so now what we can do is we can head over to ionic Docs and see what component we want to use to show these articles so we will go to components tab here and then what I am thinking is let's use this card component so it will look something like that and what I can do is I can copy this and let's go back to the browser Oh PS code and now let's close other tabs and then we can open news page dot HTML and here inside the content I will paste it here so if I save it and go back to the browser in our app you can see this card here alright actually let's remove the padding here so I will remove that so now if I go back you can see this looks much better so now let's see how we can use the articles here so if you remember and then news page HTML we are getting this data here so we can create new property so let's say articles of type may be any and here we can use maybe this dot articles equal to data actually we can also specify the interface here maybe if we want to only accept the data of certain type but I won't do that in that tutorial maybe another one so yeah so currently our articles property holds sie entire data so here what we can do is we can use the ng for directive and then we can say article of actually one one second maybe let us change this articles data and figures but that will with data and here in the news app news page to HTML we can say data dot articles articles so if I save it and I go back to the browser so you can see we are getting they all right we are getting this hell because we don't have image here so that will change in a moment actually say article subject I will change that in a second so if I go back here actually we're oh yeah here so that will be 20 cards so what we can do is we can go back here and then we can change the properties here so so here in the image let's use property binding and then I want to use article dot URL to image and for the title I want to use article dot title and for the paragraphs this is a content then we can use the property description so that will be article dot description so now if I save you time I go back to the browser you can see the news here with the images all right now to get rid of this error we can go back to the / editor and then here we can specify this caution mark after the data so that means articles property is optional so if I save it and go back to the browser you can see the error is gone and now we are seeing all the articles here on the page now let's make some small changes to application so if we go back to the news page and here we can use uppercase news we are also using about page so I will use about here and in the content maybe I can write this is a sample news application and for the contact let's write maybe my Twitter username so I will save that and let's close it and go back to the browser and here we can see that app request news and here in the about you can see that sample application and in the content you can see my Twitter username alright alright now let's see how we can populate the new single page so we will go back to our editor and here in the new service I will create a new property called current article that will be of type any for now and then I can go back to news page dot HTML and here let's add a click listener and let's pause a function on go to news single page so I will copy that actually let's pass article two so now I can go back to the component TS file and let's paste it and now what we can do is we have to first inject the router service here so that will be router and yeah angular router so you need to import that and here we can write they start new service dot current article equal to article that we have passed to the function so that will set the current article in the service to the article that we click on and last we can pass this dot router actually that will be router so dot navigate and here we have to pass that new single page so if we go back to our app routing module we can copy this path new single and here we can paste that one and if we save that and now we can go to our new single page that will be here and here we can inject a service so that will be a new service and here in the NGO net we can check if the value is being set so we can write this dot name service dot current article so if we save that now we go back to the browser and when we click on any article so you can see we are getting the spawns back in the console so if we click on another article so this is a different article all right so now we can show that like in our page so if you go back to the editor now for now actually let's copy this card again and for the main news page I don't want to show the image here and you also don't want to show the description I just article so now we can go to the new single page and we can paste it here and then we can go back to the TS file new single TS file and here we can specify the article property and then we can use this dot particle equal to then we can use this statement so I can save it and here I don't want this entire line for the image that will be article I think that will wait so actually let's use title here also article dot title so if I save it and I go back to the browser so it should be that page let's refresh it here now here you can see on the news way we are only seeing the title and when we click on any title you can see the description with the image and then the title here and the title at the top also let's move the padding here also so let's go back to the editor and let's remove padding so if I save it and I go back to the browser so when I click on it now you can see the news without the padding's now if I click on another news so you can see that one all right I think that makes sense so that will be all for this tutorial Thanks

Channel: Baljeet Singh

Views: 120,192

Keywords: ionic4, Angular, ionic, ionic native, tutorial, javascript, webdev, ionic ios, ionic android, app development, angular

Id: NJ9C7iY9350

Length: 26min 1sec (1561 seconds)

Published: Fri Jul 27 2018