Continuing with the navigation theme of this lesson. In this exercise, we're going to add one more component and a couple of services to our Native Script application, where we'll integrate the component into our application and then provide the navigation to that new component from within our application. So, let's proceed forward to add the new component and some services to our application. To proceed with this exercise, first we will go to the share folder and add a new interface, the typescript interface called "promotion.ts". And here, we will export the interface named "promotion" which contains ID, name, ID number (semi-colon), name, image, label, price,

featured, which is Boolean and description which is a string. And similarly, we will add another file named "leader.ts", and in here again, we will add an interface named, "leader". We need these for our application. So we'll have for the leader an ID which is a number, name, which is a string, image: string, designation: string, abbreviation: string, featured: boolean, and description which is also a string. So, these two will help us to define two new services which will go and fetch data about the promotions for the restaurant, and the leaders of our restaurant from the JSON server. So, going into our services, we will create two new services here called "promotion.service.ts". And also another service called "leader.service.ts". So we'll build up these two. Now, to build up these two, I will start with the dish service. So, I'm just going to copy the dish service, because the structure of the promotion and the leader service is exactly the same as the dish service. So let me copy the code from the dish service in here, and then edit this. So in here, we need the injectable, and then we will import the promotion from shared promotion, and all these are all required. And then this service will be called "promotionService". And so in the constructor, we inject the HTTP message and so on. And this one will getPromotions (getPromotions), and then the second method will be, getPromotion, and the third method will be, getFeaturedPromotion. And the corresponding observable will be returning of the type promotion, and this will return promotion and this will also return promotion. And, in here, the end.py will be instead of dishes it would be promotions with a small "p". So, this is promotions, and promotions. That's it. Now we have a new service called the promotion service, which will help us to fetch all the promotions, a chosen promotion, or a feature promotion from that server site. Now same thing. I'm going to copy this code, and then moving to the leader service. And then in the leader's service, obviously inside of the promotion will be importing the leader from shared leader, and this would be the LeaderService. So, let me copy the leader here, and then this will be named "GetLeaders", "GetLeader" and "getFeaturedLeader. Now, when you're making changes, make sure that every instance of promotion here is replaced by the leader. If you don't, then you will end up with errors that are hard to discover. So ObservableLeaders. And this will access the end.py at leaders. So, inside of promotions we'll access leaders. That's it. So you can see that, because we have structured all three services in a similar rate, it's very easy to copy and paste the code and then edit the code to get two new services, the promotion service and the leader service here. Speeds up the development. Right? Next, we will add in a new component named "home component". So this will act as the home page or the main page for our application. So, going to the app for that let me add in a new folder named home. And then in the home folder, we will add in a file named "homecomponent.ts, and homecomponent.html. So, working on the typescript file, let me save this and then close this promotion and leader so that I can see. We are now working on the home component. So, for the home component, we will add in a new component here. To get started, again, I will go to that menu component and copy a few things from the menu component to get myself started very quickly, because we'll be doing similar things in that home component also. So, copying this from the menu component and pasting here. Very often, this is a quicker way of getting started when you're developing new components. I will still need the dish and the dish service. I will also be importing promotion and promotion service. So let me copy this and then import promotion from shared promotion. And then PromotionService from services, promotion.service. And again, we'll import the leader from shared/leader. And LeaderService from services/leader/service. So we need all of these, and then we of course need the drawer page. And then for the component, the selector will be app-home and the template url will be, home.component.html. And this will export the class named, HomeComponent, and you'll see that we already are extending the drawer page and implementing the OnInIt. So that's the reason why I chose to just copy and paste the page. Now here, we're going to introduce some variables here. So this would be dish of the type dish, because this home page will feature only the featured dish, the featured promotion, and the featured leader. So dish, we will have promotion of the type promotion, and leader of the type leader, and then the corresponding error messages I will call dish errorMessageString, promoErrorMesssage of the type string, and then leaderErrorMesssage of the type string. So, corresponding to each one of this, so we are now going to fetch dish promotion and leader from the corresponding services. So, we already have injected the dish service here. We need to inject the PromotionService

from PromotionService. And then we'll also inject the LeaderService. So now, I can go and fetch the data from all the three services, and this part remains the same. So in the ngOnInIt, I'm going to go to the dishService and fetch the, getFeaturedDish. We'll call the getFeaturedDish to fetch the featuredDish. And so this will return a dish and then so, at that point I will initialize the dish variable to dish. And then if it returns an error message, then I will in initialize the dishErrorMessage to errorMessage. So, with this, I am fetching the featuredDish. I'm going to copy this code, and we are going to do the same to fetch that featuredPromotion and the featuredLeader. So, to fetch the featuredPromotion, we'll go to this PromotionService and we'll say getFeaturedPromotion. And when the promotion is fetched, we will say this promotion is promotion. And error message, this promoErrorMessage would be the errorMessage. And finally the last one will be, from the leader service we'll fetch the getFeaturedLeader, and then this will return me a leader — and leader. Again, remember to update everything correctly. We are fetching from the dish service the featuredDish, from the promotionService the featuredPromotion, and from the leaderService the featuredLeader. So, on my home page, I will include the featuredDish, the featuredPromotion, and the featuredLeader in the form of cards. So, going to the home.component.html page, we will now construct the view for the home component. To construct the view from the home component, I will start with the menu component. This part is pretty much the same as the menu component. So I'm just going to copy that from menu.component.html, and then paste it in here. And then for the action bar, we'll say home and this part, the sidedrawer will remain the same here. Now, below here, we will introduce a scrollView with the orientation set to vertical and this will act as the mainContent. And inside here, we will have the actual content. And then let me close the RadsideDrawer here. So, in here, I'm going to construct three cards to show the featuredDish, the featuredPromotion, and the featuredLeader. To construct the card, now, you'll recall that we had a card that we had constructed earlier in the dishdetail.components. I'm going to go and borrow that card but to put that into the view, I'm going to start out inside the scrollView with a gridLayout, with the class set to m-5. You know what m-5 is. And it will have three rows of

automatic height, and gridLayout. And inside here, I will have three stackLayouts with the first one being in row zero. Similarly, I will copy this and then paste two more. The first row I will show the dish. The second row I will show the promotion and the third row I will show the leader. So I have pasted the three stackLayouts here. Now, I'm going to go into the detail.component. And here, we had constructed this card here. So I'm just going to copy this code from this card here and then come back to the home.component. And right there, I'm going to paste that code and then modify this code. Just to speed up the design of our application. So, we'll say stackLayout, this is not row = zero, this will be "class p-10 border". And this will be shown only if the dish is not null. And so in here, the image base url plus dish image and then h-2 dish image and body. All these I will retain as such. So, quickly got the stackLayout to show the featuredDish in the form of a card here. Now, when this card is not ready, then obviously I need to show the activity indicator and the error message. So I'm going to go to the dishdetail.component and copy this part activityIndicator and the errorMessage coming back to the home.component. One good thing about having a very structured layout is that you can reuse some of the code that you have created in another component. So, this activity indicator will be shown whenever the dish or the errorMessage here will be the dishErrorMessage is not true. And then down below here this would be shown if the dishErrorMessage is not null. So, will show the dishErrorMessage here. So with this, I have constructed out the card that will show the featured dish. Now, since I have the featured dish here, I'm going to copy this code and then use the same structure to create the card for the featured promotion. So, I will paste that code in here, and the second card. So, see that the row one, the card would be for the promotion. So I would show for the promotion — promotion. And from the activityIndicator, this would be promotion and this is a promoErrorMessage. So I'm just going to copy the promoErrorMessage from here and then replace this one and replace this one. That is it. I have the promotion card now constructed here. The last one is of course the leader card. So I'm just going to copy this code again, and then going into that second row we will paste that. And in the second row, I will show this, then leader is not null, so, I will show the leader.image, leader.name, leader.description, and this one will be leader, and this one will be leaderErrorMesssage. I'm going to copy this and then replace this here. That is it. Now I have the layout for the leader, but for the leader in addition to the leader.name, I'm also showing the leader's designation down below here. So, I'm going to construct the leader's designation with another label here. So notice that since this is a stacked layout I can include labels here and they will be stacked one below the other. For the second one, I will give the classes h-3 rather than h-2. And then, the second part will show the leader designation. That is it. My home component is now ready. It's time for me to integrate this into my application. So to integrate this into the application, let me go to the app.routing.ts file. And then here, let me get the home component into place here. So let me import the homeComponent from home/home/component. And then, their default I will redirect it to the home page rather than the menu page. So when my apps starts it will show the home page by default. Let me also add in the home page here and then set the path to home. And this one will be the home component. All done. Now, the last thing of course is to go to the drawer.component.html file. And then in here, you only had the menu link there, so I'm going to add in the home link right on top of that menu link. So I'm just going to copy that great layout and then paste it right there. And this one will be leading me to home and the text would be "home", and that is it. Now, I will have two links in my sideDrawer that allows me to navigate to the home and the menu component. Let me save all the changes. And updating the app module, going into the app module or I am also importing the home component here, and along with the dishService, I should also import the PromotionService from services/promotion/service and then the LeaderService also from services/leader/service. And then, once we have them in here, going to the declarations, I need to add in the home.component to their declarations. And in the providers, I need to add in the PromotionService and LeaderService there. With this, we have completed the updates, let's save all the changes and then go and take a look at our application. And once your app gets deployed to your device, you now see the application starting with the home page where it shows three cards, one card with the dish. The second card with the promotion, and the third card with the leader. Now, in addition, when we go to the menu, you can see that the home and the menu links are there. So when you click on the menu link it will be taken to the menu page and similarly clicking on the home link brings us back to the homepage here. With this, we complete this exercise. In this exercise, we have added one new component, the home component, for our application and two new services. And we have used the services to fetch the data from the server and then render their view in the home component. We have also integrated the home component into the navigation in the side draw. With this we complete this exercise. This is a good time for you to do a getcomment with the message navigation part two.

Exercise (Video): NativeScript Navigation Part 2

Multiplatform Mobile App Development with NativeScript

Meet the Instructors