so hello everyone today I’m gonna talk about a workshop on PhoneGap Plus Angela GS + top coat so after after the workshop we’re gonna be a this simple application called to do application and it’s very simple you can what I do is you can add to do like me and and yo you can also delete it and I will also try to add animation so if you add some stuff in here like to make something you can see the animations coming and also when you delete it you can also see the animation goes out the zooming so without further ado let’s start but to make the workshop easier to to do so I would like to use some moniker so with its are ideally on the clouds and it’s also have a Monica debugger weeks to run on the mobile application mobile phones so I am gonna screw stream my my mobile phone screen to this okay so this is my my iPhone’s and if you go to the App Store it is here and search for Monica you can see the Monica debugger and just install it and after that it can’t open it and you need to login information so see this is strange text coming here but I think okay so you need an account just go to a monocot movie and eat your headphones if you haven’t signed up yet just sign up for free and I already signed up so I just login okay so let’s start with the template there I already create a template so we can get started quickly what you need to do is to copy this your HTTP github.com I want us to do copy it and click the new projects and you have two tabs here project templates and import projects so just click on the import projects tab in the airport from URL box just paste in what you copy and then click import and wait or have a copy yeah so after that just click them a project okay and then you can click on the lounge idly okay so now the template has index dot HTML CSS I already include topcoats CSS here and there’s a J as lipoly like I already include angularjs library and into the animation library for you so you don’t need to download it and the intake is a simple like we have a team ahead body tag and h1 if you see this it’s working so now the test strip project we have and we need to click on the project that we have just imported which is the first one okay so as you can see it’s working and if I change

something that if you see these it’s me and then when I click on a sailboat on here you can see the debugger is will refresh the content so it’s very handy okay so we have everything set up now let’s go to topcoat dot IO and there’s a demo and click on code MobileLite we have like the dark scimitar but for now just just like you know and if you scroll down you can see your navigation bar here so as you can because I’m in our application we will use the navigation bar on the top and to do so you’re gonna use this one and you can see there is a show code snippet here it just click on it and you can see what is the element or tags with fire for using this navigation and on the right there is a serious section that if you are eager to learn you can you can check out this part and learn from it so first we just need to – you see so just copy everything in the deal here and you don’t need if you see this it’s me and just leave it and pass this so just click – yeah and you can see this header here so change – to do and click on so again you can see to do so another thing is there’s a list here so let’s go to top coat and when you scroll up just about the navigation there’s a list so just copy this copy it and put it just below the navigation bar so I hope I pass this and I need to save it and see what’s looking ok so you can see it’s not working and the the the upper the first list element I want to have a text input so if you go to topcoat there is a text input just for a book from the bottom so stick on snow show code snippets and you can see this three here one there’s no more one second one is miscible it’s so one it’s a error statement so we need only one the first one let’s copy it and then you delete the category press ENTER and then pass it so just click sale so now the category part is replaced with the text impossible and now we need the add button if you scroll all the way up three from the top is a belong here and if you click show Ghazni pants you can copy the button the first one below the the sorry nabis below the input tag just past the bottom and change the word on to plus so click Save okay now we have it okay so now the down puppets so this this is basically top coat and let’s go add some more stuff so that’s some stuff we need Angela chase for the logic so for Angela

chase we need to have ng equal and you can name your application whatever you like so in my case I feel like my let’s say to do up OK and in a script you need to initialize like angular module the application name and your dependencies you don’t need anything for now so just put in T bracket and that’s it so another thing is with angel chest yeah we have controller so let’s say ng-controller equal onto the controller and so we’re where this control you for that we need to add a JavaScript file let’s say to do das and so we we mentioned that we need to do controller so we need to define it and we have what we have to do is to create a new function name called to do controller and just pass in the scope here and the scope here is actually the blue between this Java C controller and the ATM well sighs so whatever you put inside the scope you can access it in the in the HTML side so if I put that school not to do equal an array and you like to say the first one should have let say learn angular yes then I save it and now you see nothing because we haven’t told anything yet what I do is I really list the second item here so what we want to do here in the list is we want to display all the items inside to do array here so an George S has a direct eco ng-repeat and you just want to repeat equal to do in to do so with this line you say that for everything inside the to dues just I to air through it and for every item assign it to do wearable so now you can access because here we have a text tree so we want to display it to do dot text so if I save it yes nothing so something wrong here yeah I know what the problem because we created it to do the chairs but we haven’t included in the script tag so we need to include this in to do dot serious I see and this Malik yeah so now you can see you’re a lone angular JS here and the next thing I want to do is to implement this add button because now when I click and click it it does nothing now so let’s do this what Angela yes have is the Loretto form and put the input and button inside the phone and angular this has this ng subject just like the actual ER and a team uh that submit Leko so and anticipate equal add to do and the bottom I I need to specify the type

equal submit and also the input here I we want to get there in the value from the input element so we can add ng model we need we can link the inputs arrival to the Angeles model so let’s say new to do or that’s a to do text ok and so now you have now you can link this input with the Angela chase ng model so if you do this to do text here it will be bound it to the input so if I save it and if I type something you can see the to do text will is bounded to the input here so whenever I type it is get up early so what I want to do is I want to pass this to the our head to do message here and we need to add this method to our scope as I see as I told like the scope is like the glue in it so and then because we passed this new to do to do text here we need to prescribe that’s ready to do text and what we do is were to do and then scope to those doctors so I just add this to do to the arrays that we already have in here oh if I save it and at bottom you can see it’s the thing is order yet for you so the anti repeat all will Auto refresh when the array is changed okay so the next thing is to add the at the delete delete’ button so what I need to do is I want to make this a bit more ball so let’s put it in h3 so what I did I have is like this a autocomplete you put a sorry and press tab you can status and we need to have a button here so you already have just copy this button and you don’t need types of it and change this plus to cross all right and when you save it you can see the the deeper tone but it’s a bit ugly so I want to make it to the right so we already already have this after CSS we have this float right so just after class load right and then when you save it you can see the the delivered and gone to the right okay so now their interfaces already we need to add some logic so now when you click it it does nothing and let’s do this so this ng-click so when you click this button we wanted to call the Remo to do and as you can see we are inside and Chi repeat so we don’t know what which to do to be deleted so energy repeat they have

index so whatever the item that we click just remove that item index so we need to implement list remove method inside school Thanks so school taught to do thought so too to delete an array I will use splice method and you just specify the start index and the end index so and how not sorry and how many items you wanna delete so we we only need to leave it once so it is so it’s a scope multi-tool equal function okay so I add anyone and when I click deletes it got a little yeah so yes this this is how the basics application function already already done but to make it small cool let’s play with some animation so what I want to do is copy this script in general yes and put if you go to a cherub yes Angela yes Angela animate ojs so just include Angela and inmates Proteus and in this dependency you just specify ng any made how we know that this isn’t in a matter the quick trick here is to go in into the animate you can search for mode work yeah so it’s say the name is anjana made so we just leave this empty image in our application and what we can do and read in so in ng-repeat they have a more enter more orally so whenever you add a new to do they will have inter even and when you delete the to do you have a exit or live even so what you do is here I have already have CSS animations for MGMT Dave and Timo and stuff so in here if it inter I will put it us I will hide first but when it’s become active I will make it visible and then scale it to 100% and when it’s live I will just scared to I mean if he had to leave it or scale it to one other person and when it’s ready to leave then we just scale it down so so here you see there’s my DP animations so if you add this modified animation to ng-repeat directive so if you put it into class here multiple animation and when you click still you can see the relation working so let’s click it and I want yeah so when as you can see the

animation is working yeah yeah so I think that’s it we have the basics to do this working with some animation based code and if you somehow follow it in it doesn’t work I already have the complete source code available and get her let me take this out so you can go through this and then see the source code and compare what do you have yeah as you can see and george’s and talk code is not enough you need other stuff for mobile like fast click so the mobile application webview they have a double click to zoom so it waits 300 millisecond so you need fast click so that it doesn’t wait and yes I must the stuff also that can help make your application more successful like page measurement so if your application the mobile application is the screen is very limited so you need to transition between paste and stuff like that and that’s why we sing it’s better to create a framework so to handle those for for us so it’s easy like we don’t need to start over again and just use the framework and it will do everything that big one so that’s why we created this framework called Anki and light and we it’s open source it’s in a github and you can see it has be able to dock we have like navigator and stuff so to do this kind of cheondung machine is very easy to do it using this framework I think that’s the end thank you very much

You Want To Have Your Favorite Car?

We have a big list of modern & classic cars in both used and new categories.