welcome back everyone so in this video what we are going to do is first we are going to create a get weather function that function will have the entire UI script that we have already brought the reason why I'm creating because I'm going to create here button which will have naturally and click events so whenever we are going to click on our button is going to trigger that function ok let's first create our button button it's going to be equal to function let's save it and let's go yeah it's great where we gonna create our give it a function equal to function function and here everything which comes which we have here is gonna put inside ok so whenever I'm going to click on the button it should give me it should elderly the summary so what can I say that I have right now tonight so let's see the result okay I do have a button here so it's still loading I'm going to check on it and see if he is going to give me something so I have give me and foggy so I do have the summary of the day we have today in tonight so let's now focus on how we're gonna use angularjs in order to take the data that we have here so we do have variable place temperature summary time zone you have values in that variables that we get from the callback functions were a direct response so how we can use these variables and how we can push it in our VIP how we can bring it to the front end here how we can like make it visible in our page like when we launched the page okay so for that we're gonna use a framework called angularjs I'm going to just write the code and then every time I'm gonna explain you why you're writing in scope so the first thing is going to be angular dot module the cranium module this is the module name so the syntax does you just need to write this following syntax nothing else so I create a module in angular it's called better app I'm gonna just say this one and in my VI page I'm gonna relaunch my image in my VI page I have to create in this case a div tag which will have a directive called ng-app equal to whether it should be exactly the same name that is given so it should be inside codes codes okay so what we are doing right here is we are telling languages within which part of the HTML you should see a starting point of of the application so we have our screen this is our first line up the code we have a module created and it's called by the app and by having this information it's going to the VIPs it's looking in the HTML tags where we have ng app better app and if it only everything that is good we're gonna have inside our angular code here it will only apply in this block so we can have as many blog of Dave here but only the one which has this one will take in consideration so only this block the world okay only for this block we have as a starting point of application so that's the one that's the ten here it's more like a reference that's how ions the second thing we do have to work with the variables right we gonna have to take the value that we have here for place and push it there in our friend in our VI page the same thing for temperature summary time zone sometimes miss result sometimes if we have an input field in our app we wanted have it here for example I don't want to have to not here all the time so it should have some sort of code here which can take the input value that we are going to have in our form so in here what I'm going to do right next line is to create what we call a controller the controller is a JavaScript function which will allow us to manipulate data in between a page and write script so let's create that goes exactly the same thing I'm ready now controller the controller will basically have a function but I'm gonna give a name for my function which is going to be better controller this is our controller and then write function and my function will have inside as a parameter school okay open closed curly brackets and so I'm gonna take this bar and I'm gonna build the entire code that I have I'm gonna okay so we don't have now the JavaScript controller function which contains all the function everything that we should do for that specific block so this is going to this function going to allow us to manipulate data but dollar scope variable variable will allow us to access few data that we have here and so we can use it so let me demonstrate you one example here I have on clip function on k-kevin JavaScript even I can't delete that and put mg in the same way we have ng app and I can put ng click okay and then we don't need double quotes single to cool it's enough right now and now I can access this function in the way here I can't lead bar and get better so in this way we do have particular syntax here this is a directive whenever you're gonna click you should trigger this function and angularjs understand like this and then it goes to your script that is the function I do have it here we are accessing in this way so it will trigger everything that we are here we have to do one more thing which is whenever we create our controller we have to say the same way we have done for the module you have to say we have a controller so it's going to be in controller equal to application the name that we have here should be exactly the same so now let's move on for the second part which is now what I can do the way we have used get to the function I could actually change in the same okay so I can replace it by the fact I can for example create an input field okay so it's going to be okay so in here I'm going to create another character which is going to be ng-model which will be equal to location put that one here so everything that goes inside so we have a variable called location and that variable will contain whatever the information that we have in our input field so let me save this one so I can show you now we do have we should have in our page an input field so you can see we do have input field we have our search button so whatever values that we are going to enter here it will exactly be stored in this variable called location so as we have now this variable we can actually use the same way we have get another here okay so all we need to do is just apply you deny by dollar hope that location so it's fair enough now whatever the value that we're going to enter in our input field in here it should be replaced by here and trigger give that information for example summary for that city so if I enter so I'm going to close this page and then relaunch and see what's gonna happen if I search I have most cloudy there it's not very significant because now what I can I could do I'm gonna put place here so it's going to be proper so now let's reload the page and look for any city we should have the city the country so I'm gonna put for example small city Czech Republic so I have Brno and then the country so it's working perfectly so what about the value that we are entering as input is storing this variable that we can actually use it in here in our VI script this is a way to work in angularjs in order to work with the data so how we can send back in our from the view year from the view of the page that we have in our page right here and in house a you know in the backend so loud now what we are going to do is to be gonna I'm going to show you one more thing also which is called expression so I'm going to create an and I'm gonna call this is going to be location because we do have location so which means what about the value that I'm going to type in my input field it should be immediately visible the same page so that's what we are doing right here okay so let's save it and upon our page in a private window so the expression is basically going to show us immediately whatever the value that we have in location so if I type some text here you can see right away we have the text so as you can see so this is will be it will be useful because we can use in our VI script to bring place temperatures some rainy times on in our page right we just need to replace this place and then we can actually use that in here we can put dollar scope okay place and we can replace here replace that's another way to work in fact it expression so you have to imagine here ng click ng model is actually we are using the same dollar scope variable in order to access this function in order to use this variable location but here we are using a different type which is called expression and we're gonna use the same type here which is we as we used for dollar scope get weather toss complication you're using dollars both places so you have notice that is kind of different here we are we are having directives here we are having expression here okay so I'm going to just repeat create more expression okay so one for summary one for a temperature and the last one is going to be x oh okay save it so all I need to do in my UI script is just put dollars now I don't need any more I'll save it so now what about the value I'm going to enter it should it should like give me the response and it should display in the same page okay so I'm gonna close this one and then just open though let's see if he's going to give us the result or not okay so I'm going to enter tonight search for red have nothing okay okay I do have now probably took some time now I'm going to put London I have nothing I will tell you right now I have some results okay so now I'm putting the city I'm calling the function right now I have the result but it's not visible but if I click here and then just raise it I'm going to get the result this is because we do have some kind of issues with the problem with a synchronous call from here get XML and angularjs so I have explained some good amount of time now to find out why this is happy because we can actually see you have the result but is not appearing so it's not fault of the code that we have wrote it's not fault of we are not getting the result be we actually getting the result I can type another city and I can search for it but it's not appearing but only if I enter I click again or if I change it okay so in this case I can see the results so it's not I need to call once more the function by clicking on search we have the result it's just because there is a problem in between angularjs and the synchronous call of the you know to get the results I get XML so now to solve this problem so I found in the Internet basically we need to use we need to push in it sorry we need to let's say there is one thing which is making in angularjs to make the result available in the page so we should force that function so I'm going to create for that dollar scope dot dollar apply okay so we should use this syntax that's the information that I got if we want to make it available immediately because that's how it can work so I'm gonna just save it and test now what's going to happen so here i'm gonna type Paris okay so it's not happening so now I have probably actually open one more time the page for Paris here let's say this is going to give as you can see here we do have the result I haven't I did not click somewhere else London I will have the result directly okay so this is something it took me time to find out and basically there is some article saying hey this is that you should use I haven't explored yet how this thing exactly works but what we what we should do is to use in that function if you write this function at Jack's function which is Jack's response callback function is getting us the result here working on them you should include this part of the code not to push angularjs hey you should we have the result just show it on the page okay that's all you need to understand so now we have done pretty much 95% of the creation of the application so the next thing is just work on the design of the page not to get a decent look so thanks for watching and bye