Angular JS Advance Tutorial Build a Quiz App

all my guys this is a waste back with another tutorial on the channel this is going to be a project-based tutorial for angularjs I'm gonna be creating a quiz application in angularjs I'm gonna give you a demo of this application first and you guys know what we're going to build so right now you can see I'm running this angularjs quiz application on a local server so the main feature of this application is that you can create quizzes and you can save them in a JSON file and after that once you want to take those quizzes you can just open or load that JSON file into a quiz application and you will be able to take that quiz now this application will help basically teachers who wants to create a quiz and then later on there when I give it to students and let them take that quiz so let's go and create a quiz first in this application so I have three buttons quiz app create quiz and take quiz so we're gonna create a quiz and then we'll take a quiz so let's click on create quiz and I'm gonna type the author name - my name's always and quiz name I'll just say general and I'm going to talk to questions here so I'll talk to I'll click on create and new now after that we need to drop the question so I'll just say what is your name and then I'll type my name for the choice one so I'll just say aways twice to old talk my brother name twice three aspen is my brother name who's there is my brother name right I'm gonna select the correct answer so we'll click on its correct button and that means this is going to be the correct answer for this question and I will click on add question and then we basically type two questions so we will try to type a second question as well so I'll just say what do you do for living and then the first rice will be programming second nothing third would be making YouTube videos playing video games and now I'm gonna select programming as a correct answer so let's click on correct and then we'll click on add question true so now it's showing us our first question and the choices and a second question and choices and then here we have a button save quiz so click on save quiz button and there we go so we have this file downloaded into our computer I'm gonna open that in brackets editor and show you guys what JSON file do we get so this is the JSON file for our quiz that's what we just created and now we can save this JSON file and we can take this quiz in this application whenever we wanted so this is a JSON file I'm gonna close this and now I'm gonna load that quiz into the applications let's refresh the page and we'll click on take quiz and we'll click on open quiz and then I'm gonna go navigate into my computer and this is the file what we created for word quiz so let's select that now once I double click on that it loads that quick load that quiz into your application and you have Auto name and quiz name and how many questions are there so there are two questions and then we can click on start quiz and it's gonna ask you the first question and you have to select the right answer for the first question we select the right answer so I'll click on a wise and then I'll click on next question and then for the second question we'll right let's say we select the wrong answer so I'll click on playing video games and I will click on next and now it's gonna show me the result so the correct answer was always and I selected aways and it says it's a correct answer and then the correct answer was prolonging and it's showing me your answer that means whatever I selected so it's wrong so this application 3 advanced will be using angularjs to build this application there's gonna be a lot of functionality for that so enjoy this tutorial but before you go and watch this I wanna talk to you guys about few things well I've been putting a lot of time into YouTube and making a lot of tutorials and if you guys really appreciate that these tutorials then you can basically help me out by donating so I've dropped my PayPal link down here so if you like the video and my other tutorials on YouTube channel because I was gonna make this course on udemy and make it paid course so instead of making paid I'm just making it for free for you guys so any one of you guys want to donate some thing then yeah that I really appreciate that and second thing I have dropped a link of a couple of books which are basically really good books to learn angular chair so if you haven't learned angularjs and you want to learn angular chest I would highly recommend to get those books so those books I explain everything in details so I drop a link in the description check out the description for angularjs book and angular 4 book as well and those links are basically from Amazon so it's gonna help me out as well so yep enjoy this tutorial it's gonna be a bit long so we will create this application from scratch welcome back guys in this video we are going to start our crease app project I'm really excited about it so let's go and create a new project in web strong and set up a project for a quiz app I'm gonna go create a new project and I'm gonna create a new empty project I will type the name here well I'll just say please application and let's create a project now in web Strahm if you're using webstorm it this ID is pretty great so here we have an empty folder with the quiz app so now let's create a few directories first so we are going to create a directory for j/s we are going to create a directory for with CSS and we are going to create a directory for our templates alright and then the first thing we need to create this index dot HTML file index dot HTML file and then the title we just make it takes a bit bigger so for the title we'll just say angular 2's crease app if you save the file and the next thing we need is a file called app dot J's so just say app.js file and then we are going to use NPN to install few modules so here we don't see any package JSON files so here we can first check whether we have an old install or not so you can check it by node space - we yes we do have and then we check NPM yet we haven't been installed as well so I'm just going to type here NPM oops not there you know what app dot J's file so here we'll just start npn in it and now it's gonna ask me to try the name of the project so we'll just say please and version 1 source find descriptions we are creating a crease app using angular yes enter yep and then test no script no git repository no author and we just say yes that's fine now if we go to the directory which you see this we have this package JSON file now to organize our dependencies we need to use kind of a dependency manager so for this project I'm gonna be using bowler so let's install that using NPN so here we have NPN install - - save - death so this flag basically tells tells the compiler or tells the wefts want to add that to our dev dependency not in the dependency and we'll just say lower so it's gonna go and grab the bowl and it's gonna install for that for us for a word and it's gonna add that in or package.json file as well so here we can see we have North modules and we have a bulb or installed there now if I go and look at our package JSON file we should have a bowler but we need to run a cannot npm install right it's up to date so we can say NPN update and then we have file of package JSON and here we can see we have a dev dependencies section and we have a bowler installed there so that's pretty cool it's working fine and now we the next thing we need is use a bulb or dot JSON file to add a dependencies for us so we create that so we just say go work in it and here we just leave the name as Chris Erbe description we'll leave as NPN we have in package JSON app is fine keyword we just say angularjs auto aways Mirza license MIT home page we don't want to define yet so yep and then yes - yes yes all right so we have a bobo installed now and we can look at it by going through the board JSON file so right now we don't have any dependency but we do have Bobo installed then we can use Bobo to bring over dependency and add them into a project so the first thing we need in our project is angular so we use the bulb or install - that save and then we'll just say angular and it's gonna go and grab angularjs for us here we can see we have a bowl components now where we have this angularjs file now how easy is that right so next thing we're gonna do is we are going to install Babur and we need to install bootstrap so save bootstrap and bootstrap is gonna get jquery as well because boots up relies on jQuery so we should see in a bowl components we have a jQuery we have a bootstrap and jQuery the next we need is we need another package borrow install - that's a low - install low - which is basically a library which helped us to do a bit of functions in JavaScript it's gonna help us a lot next we need installed bolvar installed - that save angular - wrote enter and we will have that dependency there all right so we have angularjs we have bootstrap jquery and lo - I'm gonna close Boer War and package.json we don't need them anymore so we are going to create our first module first and then so it's just create a variable and we can say quiz app and we're gonna set equal to angular dot module and the name of our module so we just say that crease up as well and then inside our dependencies we can add ng road or maybe we can just leave that empty for now we'll add that later if we need it now we'll create a module now let's go and go to index.html and try to bring in our our dependencies first so we will go and first of all we are going to create our CSS file let's just go and create a CSS file we'll just name it style and then we're gonna bring some stuff in so we go to Bo we with angular and first thing we need is angularjs file next we need is bootstrap so bootstrap needs two J's files so we'll go distribution version KS and bootstrap J's father's there next we need a jQuery so let's grab the jQuery as well that's the jQuery there and then we are going to bring this down so I'm just gonna cut them and paste them here now Jacob needs to be on the top because it's gonna need to be on the top for bootstrap that he has to work and then we have this angularjs file now we can add our app dot J's file here so let's just bring it all the way now and that should be fine now so we just do a bit of ident a shoe to make our application text looks alright so we have our jQuery there with a bootstrap there with angularjs there and we have app dot J's file as well so now what we're gonna do here we are going to add our CSS file let's just grab this and put it here and then we need a CSS file from bootstrap as well so let's go distribution CSS and we grab this year alright now there's a few things we can do here we're gonna be running an HTTP server to run our application so what I'm gonna do first of all let's install the HTTP server so let's just go here and P and install - save - dev and then there we type HTTP - server now it's gonna go and grab that package for us and it's gonna put that in our JSON file for package JSON and here we have NP and servic install it now we need to configure this we need to have some kind of a script that will run the server and run it from a specific folder for that first of all let's organize our folder structure so here I'm going to create a directory called app and inside that app I'm just gonna drag this and push it there so I'm going to drag all the folders and I'm gonna move those folders into an app so let's just grab Jace as well put it there and we're gonna have to have template folder inside our app folder and we can grab this Bober components as well all right it's gonna take a bit of time to actually move this there's a lot of stuff to move we just wait for it all right solar power company folder is in our app folder now so if we look at index.html here it automatically changed our so spot for our boiler components which is great right now we need to tell the bulbar to actually install the future components in this folder so how do we do that so to do that we are going to create another file so let's just go and create a new file which we're gonna be talking dot for our C so B OWR or C and here we'll just add an object here and we just say the factory should be and then we add app - for war and the sword components all right so if you have watched my first section of this course you know that I've explained that why we have to do this because the future components needs to know there is a power component folder so we we do a configuration file here and then we just basically tell boa to look or look for app slash Bowl component folder and then install the dependency in that I'm just gonna move this outside we don't really need that in our app folder so let's just close that and it should be fine now now we have all the all the dependencies there we need to move our app dot J's file inside that as well and then we have installed HTTP server so we take a look at HTTP server now so if I go the h1 hello world save it and here we look at package.json file where we don't have any script to start the HTTP server so that's what we right now so inside of us wave we add a comma first and we just add a key here what's the ball will just say start and that's gonna take a valley here so the valley is going to be first of HTTP server - a localhost and then - PFLAG and then PFLAG is gonna take the port's we were gonna run this so we wanna run this on 8,000 or we can say dat it's up to you and then the folder part from way it should start over server so type here C - 1 and then dot slash app and that's about it so it's gonna go inside of our main container main folder it's gonna look for the folder app and inside that it's gonna start running our application so we can test it now so if I go here I'll talk NPM start command and if I stand pin start command and I'll just go localhost 8080 x-file there we have app CSS all this folder the reason why it didn't actually run the index.html because index action is outside so I'm gonna drag this and move this inside our app folder as well so it's gonna go and search for indexing and change the dependency here so here we see we don't see any app anymore so it very this IDE is very small so change the source for us gonna save the file I'm gonna go back to our server let's refresh this and we should see hello world and this is why we can see that our app is up and running and we can start building your angularjs quiz ad from the next video welcome back in this video we are going to create a controller and we are going to organize different files for the project and use gulp to make them production ready so let's get started first of all I'm going to remove this h1 heading from here and then we are going to go into J's file and here I have a folder called controller inside that I'm going to create a J's file so I'll just name it Chris controller inside that we are going to write a code for our controller so how to write a controller will trap angular dot module and we want to select a which module we want to use so we want to use this quiz app let's copy that and then here we'll try the name of your module and then dot controller and then add parenthesis single quotes and your name of your controller so in this case we are making a quiz application so table quiz controller and now after that it takes a callback function so coma and then a function and the function needs a scope object so we add a scope object now there's a few things I want to talk about here is that when you are going to ship your application for production ready you need to minify to make that file size smaller and make it faster basically so if you're not sure about minifying i'll basically have a separate video explaining what do you mean by minifying and i have a separate JavaScript course as well you can check that out as well okay so how do we make this mini parity so we are going to actually add an array and then inside that we go single codes and the name of our scope object and then dot function and here we are just going to basically remove these lines of code and let's just remove this as well and then here we'll just say function and then here we have a scope object inside that and then we have we close the array and then we close the parent assist so now our controller is ready for a mini five version as well so every time we add a dependency here for example q service or we had a long service will type that as a string here and then add so I'm just gonna make it smaller I think it's to be to look at so this size is perfectly fine alright so we have successfully made our controller and we're gonna attach our app module and in the controller in our index.html file now we are going to go and here I'm just gonna say ng app and I'm just say I'm gonna say quiz app so this module is gonna use for a whole file in the body we are going to charge over controller so ng-controller we say please control right now it doesn't know what is mean by chris control because we haven't attached that script file in over HTML so here we go - controller we go drag that file if you don't use webstorm then you can just write this tag and we have to put this after our ab PS file so it needs to know where is the module and after it loads this file now here inside of a controller we can simply test it if it's working fine so we're just gonna go to controller file and on the scope object we are going to add a variable so just say message is equal to hello world we save the file and we go back to index.html and I use the binding expression to display that message I'll use the binding expression and then use message I'm gonna refresh the page and here we can see we have the hello world coming from our scope object so that means of a file is working now we have few problems here the problem is that I don't want to attach every single script file here whenever I create a new one so our application is gonna be broken apart into various different files we can have a quiz factory we're gonna have a question factory we're gonna have some models we're gonna have some services we're gonna have a lot of directives so to basically make that one file we need to do few things we need to have we need to use a tool called gulp which will concatenate all the files into one file so instead of that's attaching all this Jason so JavaScript files separately we just attach one file and we name it app so let's go and do a bit of work on that in this video we are going to install all the modules in order package JSON file so here I'm gonna go to package JSON file and in the dev dependency I'm going to copy and paste some dependency here so yeah let's get the gold dependency so I'm just gonna grab all the gold dependency I'm just gonna comma here and then paste those dependencies yeah and the last dependency we need is a main board file we have a dependency call name bowler file which basically grab all the main files for example in a way in XHTML we used angular which has this file and eulogy so we are separately attaching the libraries so if you want to get all the files at once and then concatenate them you can use that package there but we're not gonna use it so I'm just letting you know that there is a package called main dashboard - files I'll maybe except make a separate video how to use that now we got all the dependencies in our package JSON file it's time for us to install them when I open a new terminal here and inside time you know I'm just going to say NPM install oops npm install and now it's gonna go and read our package JSON file and install all of these dependency for us and after that I'm gonna show you in the next video how to use gulp to concatenate all those files so now if we go to node modules we should see gulp here so if I go down there we go we have dope dope angular files are canned but normalise clean can card and can card CSS as well so in the next video we'll use this golf tool to get all the files into one file what my guys in this video we are going to look at gulp in the last video we installed some packages for gulp so install gold we install gulp angular file sort gold angular template cache a gold concat can cut ceases so now we're going to use these to basically organize our application into few files ok let's do it now for that we are going to create a new file in our app quiz application and I'm gonna name it gulp file yes now we have the file here right so inside that first of all we need to let's just say we use strict ok let's come down we need to bring our packages in for this file so first of all let's create var just get a gold first or required this is if you're not sure about this this is basically an old stuff so if you require any package from the node module you have to write this so we type a variable gulp and we require gulp and then we require let's just say can cat as well so required and we'll just say dope can cut we need this package and then we need let's just say angular file sort we named the variable and they'll just say require and angular file sort yet there is a package there then we have another package to import or we can call it template cache a is equal to require and we are going to type go angular template cache a and then we have another one so we need ng I know take require add single calls and we'll just say gold ng annotate so this is the one all rights for now we only need these packages we need to bring in few other packages but we'll do that when we need them so now let's go down now the gold works with the tasks so there are mainly three or four tasks I'll just take you to the documentation of gold here so just say gold and go to go J's file and inside that if you want to learn gold then you can come to this website and go to dogs on github and mainly there are three things that you need to remember gulp dart sauce kill that desk because that task and kill that watch right so we'll use these now so here inside that first of all we are going to grab all our app a module so for example we add controller we add directives we had services then we're gonna concatenate all of them into one file so we'll start by using gulp dot task and then here we name our task is like app modules ok and then it takes a callback function and then we go and return from something from this function so here's a return and turn it go dot source ok it's inside that first of all we need to say which we want to which task our rich source we want to use for the start so here we can say that in a single codes and I'm just going to grab the location for this J so I'm going to right click on it and I'm gonna say copy relative part I'm gonna paste that here so it says AB GS and then after that we'll just use forward slash and star star forward slash star dot J s alright and then after that we go and type it so we just say pipe and then we use this module ng annotate and then we pipe let's just say we need to sort or angular files as well so just angular sort file then we can cut in it as well by using this concatenate package so concat and then what is the name of our file one at RP a-- so we just call it a script CAS okay then we pipe something let's just say and then we use the gold dot dest okay so go dot test and here we are going to use another folder which the gulp is going to create for us and we'll just name it dist slash source ok and then after that we are going to just close this now here we have created a gulp task for app module now we are going to use another task for our CSS so type gulp dot task and then you name over a task which will just say let's just say CSS it takes a callback function and then it will return the gold dots source or way which sources we want to take from here we will take this CSS file so I'm just going to right click and then right click and then find the relative part for this and then we'll just paste that part and then I'm gonna say slash dot yes okay and here what are the files we have in there and then we're gonna pipe it as well so pop it and we'll use the contact and then we name our file style dot CSS and then where we want to put it so we'll use pipe and it's the gold dot test and then we'll just say this slash source all right and it's gonna copy all the files from here concatenate them named and CS style dot CSS and then it will just put them here all right okay so now let's go and create another task for templates so we go golf dot task and name off for his templates and then the top function here which will return gulp dot source and then the source we wanna say it which is going to be let's just say AB dash templates I'm just gonna copy this relative power so I don't make any spelling mistake so just paste that here and then after that we just use for slash and static storage and static dot HTML so only use HTML files okay and then we'll just pipe it and we will choose another module sorry package which we bring it in so template cache a gold angular template cache a and then here we'll say name or file template dot J s okay and then after that we are going to add few things here so temple caching needs to know the module name and then the root as well so for that we can add comma and I will just give it an object so there's an object and I will just add a key say module and the name is Chris app and I believe this is the name of four modules here so I'll just copy from here and then paste it here in case I make any mistake so let's just copy and then paste that here and then add a comma here then we just wanted to point route and then the route is going to be the part for this template folder so here we'll just say right click copy relative part and then here I'm just going to type that but here so this is going to be our route for that and after that we're going to pipe this so let's just say Pike and go dot test and then we want to copy that file into app actually this and that's about it actually doc source okay so let's just add a semicolon here as well now we can actually create another task to combine our libraries as well so if we go back to index.html we see that we are actually using power to grab our dependencies so how we can fix this how we can get all of these libraries into one file for that I'm going to go and install one a package here so here we type the package name is going to be main board files so we'll just I'm just kind of copy and then paste it here and then after that I need to run NP and update so I can just click on it it's gonna go and install main boiler files as well so it's just gonna run okay and then here we got the terminal and we'll just say anything install and it's gonna go install main board files let's have a look at node modules as well so we do we have a main board file so we'll just go down down down down down okay and and so we have a main board fault yes so we can use that now to grab all the dependency files and put them into one file so we are going to use that package so I'll just say we can name it let's just say you can call it Bob or files or mainboard files it's up to you love to say mean bowler files is equal to require and required main boiler files all right now to do that we are going to create another task for our library so let's go and have a look at that now for that we are going to go up and here we'll just say go dot task and then we are just say let's just say lips take the function and then it will return the go p-- dot source so the source we are going to take is from Bob or component folder right for that we are going to use main power file package and then it will have an object and objects going to take a base I'm gonna tell it look for let's just say app slash Bober underscore components I'm just going to copy the relative path for this so we don't make any mistake here so just paste it here so this just needs a single code here okay so that's the object it's gonna take and then we need to use another package which is dope bore and normalize we for now we'll just leave that here we don't worry about it but we should use that normalized package let's just do one thing let's just pipe it and we'll just say you don't dot that's and then you're just gonna name it our lips the lips is going to be inside over let's just say this slash source okay and let's see if this thing works you know there are ways that you can run gulp so you could run this task separately or you can create another task which will run all of these tasks which is a lot simpler right first of all let's just look at can we install or can we run gulp so if I say go and I'll just say CSS and we'll say that yep it's gonna go grab the CSS and it should create a dist folder for us so here we have a dist folder in the source we have this style that's the CSS file so in the style as he said we don't have anything yet but if we did it we'll just copy and paste that file there right so one more thing we can do we can actually get this Bruce web dot CSS file from our board components if I go bootstrap I'll just go and I'll just copy this file and then I'm just gonna come and just paste it here all right so it's gonna grab this file and then just concatenate with our own CSS let's look at the demo now so here we go to CSS file and here we'll just say dot h1 and actually just say h1 and we'll just say color to be let's just set this color right just for demo purposes now I'm just gonna just minimize those folder and then we are going to let's just say come down here and just say go and the name of the task which is CSS I'm gonna run it and it's gonna go grab those files and then create a dist folder for us and we have a CSS file now and so I look at it and now this time if I go to this CSS file I have I can see I have a bootstrap file here which is all the Bhoots related CSS and all the way down we have our own source mapping URL as well so we have this color and this thing as well this is our own CSS all right so we create a task for our library as well I want to modify that task so we're getting libraries from Bava components from using this base now the newer version of bovver main board files actually can grab all the main files automatically so we don't really have to tell it what is the base so what I'm gonna do I'm just gonna delete this line of code this line of code and after that I will just delete it and we just pipe this to over gulp that desktop source but we need to grab a few things here to actually concatenate them into one file for example if you have an angularjs library and you have an angular dog angular - - wrote library so what if just you know this concatenate that file before it concatenate the angular chest which is going to cause an error so we want to make sure that our main files can be on the top so when it that file gets loaded it gets loaded properly so we don't have any error for that we are going to grab all the files from the board by using paste and then after that we're you to pipe it with another package which we installed install angular file sort right and then we're gonna pipe this as well again and we're gonna pipe this bit can cut and taken cattle we're gonna name it leap start yes then we are going to use another package which we have it installed yet which is going to be ugly fire so let's go back to package the JSON file actually package dodges and fall not a bulb or JSON file there you go and there is over package that JSON file and here we have a package to install we will call it this is called gulp - Levi okay and the top version is three point something so we installed that to install that we need to terminal and we just say npm install and it's going to solve that and then we go back to our gulp the JS file and then we can use that here announcer but use that we're gonna bring it in it's a gold and we just say gold ugly phi and then we can say require go i believe i whoops it's not going to work we need to put that into single code so dope there we go we have a package called adult uglify alright so here we'll just use that as well so go ugly Foy and then we just make that file and put that into our deist so now let's try a few of the top so we'll just say gold lips alright so it's saying that bootstrap the last line it unexpected talk gun so if we go down here we see we have all the files it but it could not actually concatenate this file which has a lot of stuff going on so we want to get rid of this file so we go to here I'm just gonna delete this source folder from now to actually remove that file we gotta bail one we go here and then here we have a dist folder we have a JSON we have a boot frog we have okay bootstrap dot unless file we need to find this boo so the less so here we want to just ignore this so you here if I just go and delete this and in the border JSON file we are just going to get rid of this main here okay now save this file and now it's not gonna worry about bootstrap dot a less file because we don't really need that file alright so let's try running gold lips again and it's gonna go grab all the lips for us and it's gonna go and put those leaves into our this folder and then source and there you go so we have lips folder and it's it's already gone concatenated and it's basically properly organized for us and it's minified version as well so it's much faster all right so we have lips and then we can have our modules as well and so here to say gulp app module now here it's gonna go and grab Osgood file inside and then we have our CSS as well go CSS and you will see we have a CSS file there as well now instead of running them separately I'm actually going to be a smartass here and I'm just going to delete that source folder and down here we are going to create another task which will run all of these tasks for us but first let's quickly create a task toggle index or HTML so we need true files we need app dot J's file and an index.html file as well so here I'm just going to create a task which we actually I have the task written there so I'm just gonna copy and paste the task here so here we have this task and we have another task for over fjs as well alright so here we have two task index and an app and main so now we need to tell it a way to look for this file so here it's going to look for app and an index.html and to look for AB and AB dot J's file as well so now we create a task here so you say go dot task and we're gonna run a multiple task right so here we can just say go to task and then name your task as build and then we can define an array of the task which we want to run so we wanna run first of all we want index comma templates oops it's caused an error how to be in a single coat so tank weights comma we have a d'etat CSS yes CSS and then we have another task called leaps and then we have app modules so app modules all right so one two three four five tiles so here we have one two three four five and six so what we're missing missing app main so here I'll just go add in the last app main okay I'm just gonna save this file and this 15 we need to modify now once we build this project our index file has to have a different kind of allocation now so here we'll modify that but first let's run and task called go there which we just build so here it's getting index file templates and sleeps app modules main template index all the file now if I go to this this folder here we can see we have this source folder we have CSS sleep and lips okay now I'm not sure why it didn't actually bring it in our app or index dot JS file as well so here I'm just gonna go to Col dot yes file and here we're gonna find out yep we need we had a different parties if you got this here it's gone into this folder so I'm just gonna delete that folder there so here we'll just say this this okay slash for index and app is going to be this / okay let's try running - don't build again so it's gonna go and grab all the files and it's gonna organize this for us now normally okay so we have app this file we have index.html we have the source files here as well now if I go to exercise you know it's saying that okay we have the power components which it doesn't know where to look for so we need to modify our index.html so when we run it on server it will have a proper part to the files so let's do that so for that we are going to go to index.html file here let's get rid of this message and let's get rid of these scripts as well let's get rid of this script as well link as well okay so here we are going to use the disk folder this time so here we need to define our libraries first so he will just grab the libraries and then we are going to remove this so we just say source slash leap start yes and then we need a script so we'll just go and delete this is what source slash this and then we're going to use a style so which will have the same thing here so the source slash style dot CSS we are live script and then we need an app dot JS file which is going to be all the way down so here we just say AB dot GS right and then we are going to SRC that's fine now we don't really need anything else so we're you're just going to push them down and I'm just gonna grab all of these and push them down actually we need to style the CSS in the links okay alright so cool now we have gone above bars here know type message alright and now we go to the lips we got script we got AB dot JS file now we need to modify a couple of things in our packet or JSON file so here we go to package.json file and here you can see we have a task start which start or HTTP server on this folder dot slash app which we need to modify now so we don't have to go to our folder we'll just simply go to this folder now let's save it and now if I go and type a command NPM start it is going to start a server from dist folder so here we have this folder now if I go refresh the page we have a problem here it says J's controller used or just error and we don't have this boa files because the index file here doesn't have these more these this file is not modified yet so we need to start another we're gonna stop our server by pressing ctrl C and then he'll try to go build one more time so once we do gulp build here and then we are going to look at this folder and index.html inside that now it's perfectly fine alright so let's start over server and pain start let's start it and now if i refresh the page and we should see something like here so we have style vine-leaves files good file Abdo jess is fine as well now the reason why we're not getting we're not getting our message message there is something wrong with our script file our we can look at our console so here it says bootstrap Java requires jqe angular is not defined angular is not defined and in the next video we're going to fix these issues because this video is already very long what am i guys in the last video we finished our configuration for adult and we were having these errors the reason why we were having these errors is because this package a main bowl of files this is a promise so before it executed date it start running the next next command which basically doesn't really recognize where is the jQuery and release the angular file so we're gonna have to modify this so we can create another task here and we are not going to add that task into our go to us a build alright so we're going to just grab all the libraries from Bobo and then paste them somewhere here in the folder so once we have that folder ready then we can use that folder to build other libraries so let's create a go dot task and here I will just say well we just say build lips or maybe we can just say build lips right in lower case it's gonna give me an error so not a religious recommendation that use the capital a camel case they take the function and then we're going to return and we just have a gulp dot source and then here we describe the main both files and then we just pipe it so let's just pipe it and then here we just use a golf dot desk and then we just put them into a folder where basically we have a blue folder named ellipse okay and then we just add a semicolon and then another semicolon here now we're gonna just run this task for bomber so just say gold and then build lips and then it's gonna go and grab all the files and then make another folder for us ellipse inside the lips we have all the libraries we have angularjs Road bootstrap jQuery and lodash now we have all of these files in this ellipse folders so we can use this instead of just using main board files here so here I will just go and delete this line and I will just say go to lips folder and grab all the files from there and then juice angular sword can cut it and a glyph I them and then push that file into our this folder in the source and make a lead file so now we are going to run another help build toss and it's gonna go grab all the files and this time as you see that we did not add this build and lips inside of it so we just have to run the stars and manually and then we got all the lips here and then we use this folder to build over the main concatenated files now we got that and now if i refresh the page and i should see there is no error it knows where to look for jquery way to look for angular module so now we are ready to go so this is one task you know there is another important task which basically it's gonna help our help us or develop faster i'm gonna show you that as well so here we have this built house so let's say we make any change drawer files and then we will have to run this build task again and again we don't want to do that we wanna instead use gold dot gulp that task watch watches the task where basically you have gold basically keep an eye on the changes and just update that file for us so we'll create that so we'll just say god dot task here and then we just name it watch takes a function called that function and inside that we have gulp dot watch task the first blue one of watch any changes happen in this JS folder or any changes happen in this template folder all right so i have actually created that task yet so just gonna copy and paste that here so we'll just paste it here and then we modify the folder so here it's gonna do it's gonna watch for app folder here and inside our source we don't have a source folder so we just want to remove this source it's gonna go to Jace and then check for GS and just and then it's gonna run up a module toss this is our app module tosses here and then it's gonna go look for all the CSS we don't have a source so we just go app CSS /a CSS if we make any changes here it's gonna go on run this task for us automatically the CSS stuff we have a template Alice if you make any changes into our template then here it's gonna go to app folder and then template and watch for any changes in these templates and it's gonna run over tasks called templates now we are ready to go and then if I save this and now I'm gonna run this gulp what tasks all right now it's just gonna keep on watching okay it's gonna just keep watching for us one more thing we want to add here I'm just going to stop this task by pressing ctrl C one more task we need to have inside we're gonna have a task for AB dot JS file or we can do a different way we can add this app to J's file inside our J's folder which will automatically look for any changes in J's files as well so let's do that now so I'm just gonna grab this and put that into J s folder so we have AB dot GS file inside of a J's folder so now it's gonna look for that as well alright so here we have to modify this app file as well so here we can see we have a task here called Jess slash AB dot J so we don't really need that anymore so if we go and delete the dist folder inside the Despoiler we delete the source folder here and then if I run this go dot build it's gonna go and grab all the files and it's gonna go and look inside our J's folder now instead of looking at our just folders if we go look at a J's folder now we have source we have script folder inside the script as you can see we have this variable app module here as well so we don't really need this app.js file anymore so we just get rid of that inside of this folder and inside our HTML we will just use script and we use the lips folder that's all we need alright so here we can go back to go to J's file and we don't really need this app and main file so we just get rid of this task here and we have this main task here so we just get rid of that as well and then we are going to basically run a gulp dot build again so let's just delete this source folder and we just wanna go p-- dot build again and now let's see what we get so we don't really get this app file anymore but if we look at the script file we have script rjs which has this app module already there for us to use so we don't really need that instead of the script name I'm actually going to change the name to an app dot yes so we deleted that folder and here I'm just gonna go and look for our script so there you go that's the script C I'm gonna just say AB dot J's inside of script now let's run over gulp build and then we look at this we have the source folder we have app style and we have our index.html now we don't see it templates here the reason why is we don't see it templates because we haven't have any templates yet so now there's one more thing I wanna do while I work in web strong I actually tend to move these folders so I wanna I don't want to see these folder because I just want to focus on these things here so what I can do here instead of just going to the project I'm gonna go project files so inside the project files I only see these app this and lips folder and here when I right-click on lips and I'm just gonna mark this director as resource root so if I go here it's still a sorry my bad I wanna mark this as excluded now inside that I don't want to see that anymore I don't want to see this this folder as well so just mark that as excluded as well so we go and we only see app folio now so here I just wanna mark that as excluded as well so right now I only see app folder and I will only see CSS J's file folder and then index.html so it's much easier to look at all right so we can actually get rid of these files as well and we just mark them as excluded as well so here we can't really do it yep we can't do it multiple files but we can do one by one we can just mark these files with explode but let's not worry about it for now now we are going to start a task called gold watch and now it's gonna go and keep watching keep watching and now if I go to my app dot J's file and here if I add something and I saved the file it's just gonna update automatically and now in another terminal I have this server running which has our application running here let me just close the console now and we actually go into the controller and we just add something nucleus on a scope object I'm just going to say let's just say hello it would just say hello mister angularjs quiz app alright and let's just save it I want to just save it I'm just saving it and I go to index.html and I will just use a bar Knicks Russian I'll just use hello I just saved it alright I just save didn't it's went there and it's just updated that file for us I want to refresh the file and here we don't see message now we're gonna look at the console now what's the problem now he says server responded with 404 okay we don't really because we have this script dot J's file we're supposed to change that to a PS file now so if I go here and change this to AB dot James file and I'll just go and stop the hour gulp watch and I'll just use gold build once and then we're just gonna wait for it to complete length it's completed now if i refresh the page now and here there we go guys we have hello hello world and hello mr. Angulo so if I just go let's just do h1 now and wrap it with h1 save the file and let's refresh it now we should see hello in h1 we didn't see that because we need to update our server because we haven't actually run over gold watch can answer gold watch look for it it's gonna go start looking and save the file and that's a refresh the page and here we don't see that again because the watch doesn't actually update our index dot HTML file so if we go look at what we don't really update any index.html file right so for that we need to run gulp build again so you can press control C press Y press ENTER to stop that and then we go go build again and then now it's gonna go build index file and let's refresh the page and we should see hello mister angularjs Chris app and you see the color is changed as well the reason why colors change because in the CSS we changed our h1 color how cool is that guy so our app is up and running one more thing I can do here I can't just go gold dot watch and I wanted to watch for a file app slash index dot HTML ok HTML and now once it gets chained I wanna run I want to run a task called index okay now it will update the index file as well now so here we will just go go watch it's running and looking for changes in every file in our in our application so I'm going to close this file to actually make it simpler so now if I just change and I'll just duplicate this as well I'm gonna save it once I save it it says you see that on a terminal it says starting index and finished in there so it updated the index file as well let's refresh the page and there we go so we got this hello angularjs hello angularjs okay so now our app is up and running and from the next video we are going to work on our angularjs application angular just squeezed application drive so in this course you have learned how to use gold and how to make your development faster as well so now we don't really worry about anything except working on old creats app we just let it watch change the file refresh the browser and that's about it right guys so thanks for watching and I'll see you guys in the next video welcome back in this video we are going to create a menu bar which will have three buttons squeeze home create quiz and take quiz now with that let's get started so first of all we create a deep container here so I'll just say class I'll juice bootstrap container and I'm just gonna create another deal so let's just say simple deal and I'm gonna wrap this container inside this data actually so let's just do it okay now one thing we want to show you is that I'm gonna be using the CSS framework called bootstrap so it's gonna take you to bootstrap so here we have a bootstrap dot so you capsule name is get bootstrap calm so I'm gonna take you to the home page so now this is both Rob and we are using boots Version three you point three point seven how do I know this is because if I go to lips directory and here have a bootstrap Jess and I look at it this is the version okay so if it's too small I'll just zoom it in okay so this is the version we're using so now we need to go to the documentation of that same bootstrap and I'm just going to increase the size for that so here we have a boot for a beta version 4.0 but we are looking at three point three seven now here if we go to components and I would go never get to Nava and here I'm gonna use this built in a navigation bar from bootstrap boot shop is a great framework I would highly recommend if you're learning of front-end development you make sure you learn this week it's gonna help you a lot and it's gonna make your life easier alrighty so let's go back and we have created a container now let's go and create a file for our template menu bar so we go to app folder in the template and then I right-click I'm gonna create a new HTML file and I'm gonna name it menu bar alright and now we have creative files if I go to project files let's click on that now it's much cleaner so we are able to see everything we need to see here okay so let's let's go and create a menu bar here so I'm just going to delete this default HTML create by vets from and we'll go and create a menu bar from bootstrap so I'll start by typing nav tag and then I'll just give a class of nav bar space nav bar - and I will type here let's we need an ad about dark and BG where you can say dark as well well this is our own classes which we will create later but for now just use the nav bar and I will just say never justified alright and then we'll just come down here and let's create a new Dib make a class of knob and then we just say justify content trustee by content okay so there's a class content - Center I guess it's gonna Center over menu bar or even if it not then we can fix that later now we need to create three buttons I'm just going to use html5 input elements so type button we can just give a class of BT and BT and - we can use primary and then we are going to give value as well so let's just say value Chris okay and then I'm going to look at these three times and we're gonna make the value off create Chris and I'll just say take quiz okay let's save this file now if I go and restart my server by pressing ctrl C I'm just gonna make it bigger guys for you guys okay so really menu bar here and then how do we inject that into our angular application we go back to index.html and here if I check you guys to a documentation of angular chest there is a directed called ng-include which basically fetches and compiles includes an external HTML fragment so that's what we want to use right so when I grab this external external a parade in our application so we have this menu bar here let's go back to index.html and we will use ng include directive now it's inside that container I will go and create another container I will just say class we can say content or container fluid ah maybe we can just hang on a second we can notify this container a few ow okay so we have a container fluid and inside that we have a tape and all these ng-include it's equal to and then we need to have a relative part for this and menu bars right click and copy a relative part if you're not using Webster on you should have an option only being installed an extension in your ID which will let you copy the part of the file so here this is the part of the file and that's it I'm gonna push it here now we're just gonna have to identity so I just attempted over HTML file now we have got that but if I go and build our project so if I go don't build it's gonna go and build the template file for us as well template J's file so we go back to project we look at this file source and here we have a template as well which has this service injected inside template cachet and has over indexed minibar HTML so for now we are gonna go back to project files and index.html and slide that I want to inject that template dot J's file so Hugo source s OC / template dot GS alright let me just double check the name of the file I don't want to misspell it so it's template template GS that's fine alright guys so now I'm gonna start another server here sorry another term middle and here I'm gonna leave a command build wat so I want to just make sure the gulp is always watching off my changes or press ENTER and it's gonna just staying there and keep watching any changes will make in your project so we don't have to do gulp building build build again and again so I'm just gonna remove this close this session and here we start over server again by topic NPM start right over services i started and i refresh the page and we should be able to see templates coming up okay we don't really see that now we can go to console and try to fix the bug what's wrong with it okay it says that template is there we could look at this resources we don't have a template so we actually need to do gulp build for for last time so dope build it's gonna go in your the index file as well and push it in there all right cool now let's refresh the page now if we look at resources now we have a template file cool bananas right we have properly injected that now let's go look at the index as you know we have this apps life templates dot menu by females let's just refresh the page it's not showing I've gotta figure out why it's not showing so go back to index.html we can see ng-include is there or not let's have a look at this guy so okay now there's another issue I just figure out now every time you use this ng-include if I go to documentation you're gonna have to use this single codes inside because it's takes it takes an attribute as a string so here we have this template so analogous expression evaluates the URL if the source is a string constant make sure you wrap it in a single codes so we're gonna wrap it in a single codes now so I'm just gonna add a single code here and then add a single code here as well and I wanna show you that if we look at over watch element so if I say this it's gonna go and change the index file as well so now let's go and refresh the page and there we go we got three buttons there we didn't quite right in the middle but we can work on that later in the course so we got over many well done guys in the next video we are going to continue our adventure of creating this amazing quiz up let's walk Mac in this video we are going to add some CSS for navigation bar plus we are going to add few stock in our app as file so first of all let me show you I have added this nav bar default class and I'll just got this class implementing side nav bar - buttons as well alright so now currently our application looks like this so we have these nav bars right there okay I'm going to add the CSS so we could make a little bit better so I'm just gonna paste that CSS here we're actually gonna remove some stuff here okay now I have the CSS here and I'm just going to refresh the page to show you guys so now this is how our navigation bar look like we can have something here for example we have this tab here right so I'm gonna add some margin and add some padding to left so here we'll go to Napa and so I'm gonna just debug so you got this select element select that and we have dot now padding set to zero so now we are going to get dot nap class going here so just go don't nav and you're just padding padding left I'm gonna set that to let's just say 15 pixels right I'm gonna refresh the page and now we got some padding going on there alright so we have a nice animation here guys so now we have successfully created our navigation bar now let's go and add modes you know so I'm just gonna close these files and then we are going to go to app dot J's file all right so now we are going to create a few constants object so we need a constants of app information Reena constants of app modes we need a constant of take quiz mode so let's create all of those now so we are going to use this quiz app variable dot constant and then name of the constants object so here we'll just say app information and it's going to take an object so we just add two keys so here first it's going to be app name and we can set that to Crees app all right and then the next key version of our app and we can set that 1.0.0 it's up to you whatever the version you want to give next constant we are going to make is going to be add mode which is quite quite interesting because we're not going to be using a routing at all it's gonna be a single page application without rolling we're gonna be using ng-show and ng-hide according to these modes which is a little bit tricky approach so constant and then app mode now we have some modes for example we have a start mode we have create quiz mode we have add question mode success quiz mode result quiz and take quiz I've actually already written those modes so I'm just gonna copy the code here so you guys don't have to watch me typing and if you want to type it then you can basically pause the video here and then just type these modes here so it's just a simple constant object alright next we have is quiz app constant and then it's going to be take crease mode all right it's gonna take an object as well and here we have three mode select quiz take questions and show results so I'm just going to copy and paste them as well so we got that we got over quiz mode done the next we are going to go to controller so let's go to controller dot quiz doc quiz control add a as file now we are going to remove these files now now we let all the modes are done and in the next video we are going to create an object for / quiz welcome back in this video we are going to create a factory object for quiz and for question so let's go to J's folder and let's create another directory here so we just name it factories and inside factory folder I'm gonna quit the JavaScript file and I'm gonna name it quiz now here I'm going to start writing a code for quiz factory so here first of all we just tell him what we're doing so angular dog module and then the name of our module which is quiz app so this is the same name we're using in here so here we creat a module so using the same module so we're creating a factor for this module let's go back to quiz I'm just gonna paste that here oops I need to copy this and then paste that here so I don't make any spelling mistake and then dot factory and then here the name of the factory first so we'll just name it quiz it takes a callback function just add a semicolon here and then here we are going to create a variable so let's just say we create a quiz variable with just siddhart to function so inside work crease we are going to add another variable and the name itself I'm gonna set that to this so the reason why I'm doing this is because a later on if you would think that we're gonna add some functionality in our Factory for example a specific task that we want this Factory to accomplish and inside any other function if you want to access any global variable then we can do that by using South alright so here the next thing we are going to do is we're going to set this dot I'm gonna set deep copy whitelist I'm creating an array of what are the things we need so here we'll just say an array and we first of all we need to know the quiz name and then auto and then how many questions they want to add to the quiz so right now we are going to create a quiz right taking quizzes different story we do that later but for now let's say we are question length and then we are going to have how many questions so let's just you yes change oops I need to put that in single totes and that would be questions all right so that's an array we got it next we are going to add a few things here so this dot author we're gonna set that to empty for now this dot quiz name I'm gonna set that to empty so basically the array will query that would be used to match and validate stuff so this dot question land set that to empty and then we have this dot questions set and make it to empty array and then we have something like this dot twice is Lent we set that to four okay so choices land so CH IC es le NT so we got this and we are just want to return this okay from this factory object so we can just say return quiz okay now we create our quiz factory now same with the quiz we're going to create a question Factory which will help us to create some questions so we are going to change the name of the file first I just want to make it the question not questions so refactor it and I'm going to change the name to question all right so now here we write the same thing angular I'm just going to make it bigger too it's easier for you guys to look at so angular dot module and then modulus quiz app and then we're creating a factory for that and the factory name I'm gonna name it just a simple question with the capital Q all right and then it takes a function called a function there add a semicolon here now same as we are going to create a variable so we can just say question set that to function and side that with to say salt is equal to this and then we're going to create this dot question is equal to we just set that empty for now and oops and then this dot twice's is equal to and we're gonna have an object so there are four choices right so we can say twice 1 and we set that to empty for now twice - you can set that to empty twice three and then twice for all right so we got that and next thing we need is this dot answer and then we set that to empty string as well all right so here we need to make sure that we are there instead of we a so now we have created a factory for a question as well so here we're getting a function function has this third question this is a choice this is an object which has four choices there and then we have this that answer there and then we're gonna return this so whenever we call this Factory then we can just return question so I just want to make sure that I've done with systemic homes are gonna see any errors all right so this is done five question and quiz factories are done so in the next video we are going to work on a controller welcome bye guys in this video we are going to create quiz container for our application so let's go into the template we're going to create a new folder and we will name of folder let's just say models right and then inside that we're going to create a new html5 file which is we're going to call it quiz container and inside that we're just going to make it bigger for you guys to look at it better and then here we are going to create first of all deep I'm going to class name would be Chris container and then we are going to leave that empty for now but we need to create a directive for this we're gonna use this in our angular applications so we created file HTML file now we're gonna create a JavaScript file for this so the Colossus quiz container class is coming from over a manual CSS so if I go to style here I have the quiz container class which has a width 100% height 600 pixels padding 60 and in background color is this all right so now we are going to close this and then you're back to Chris container and here we can add a lot of stuff now so we'll leave that empty for now and now we are going to create a directive file for this for that we are going to go to J's folder and I'm gonna create a new directory which will have all of our models so I create a model and inside that we're going to create another JavaScript file and we call it quiz container right inside that we are going to create a directive so angular I'm gonna make it bigger for you guys so angular dart module module is quiz app and then use directive so as we use factory we will use the directive now so directive and we're gonna name our directive - let's just say crease container as well it takes a callback function and then inside that we just return an object so we just first of all we just restrict it to let's say just the element and then we're gonna tie up the template URL and that would be the part of our HTML file for cruise control so I'm just going to right click copy relative part and I'm just gonna paste that here alright so that makes it a directive now we can use this directive in the in our application so we created a quiz container javascript file we created a quiz container for HTML file now we're gonna create the other files for example we need a container for quiz success container and take quiz container as well so let's just do them as well so here we're going to create another file I'm gonna name this file increase success container and let's just delete this default HTML I'm just gonna make it bigger and inside that we are just going to create a Dave for now so we're setting a name class text LG - centers this is going to be a class we'll just leave that empty or we can just create another class here in like a deep container with a class of container fluid and then we'll just leave that empty for now lis the javascript file for that so right click create a J's file here I'm gonna name it please success container right same as with with the Chris container we're just gonna make it bigger and we'll just type angular dot module and module name is quiz app and then it's a directive we're putting a directive here and then we are going to name or directive as let's just say we just called the same name so we just say Cui's success container all right it takes call back and then we are going to first of all return an object so we just restricted with element and then we need to use another key template URL 10-play template URL yep and then same with that we're gonna copy the relative part and I'm just gonna paste that part here alright so that makes the quiz success container guys let's close both of days and another one we need is let's just say take quiz container same we're gonna talk angular module module is going to be quiz app and then we are going to create a directive for that and then the name so I'm just gonna make it bigger for you guys to look at it and we can make this as take Chris container as well so take Chris container alright takes a callback and then return an object we just restrict it to e so I'm just gonna make sure that I've got the right story table straight so yep that's fine and then the second key Tim template URL and we just copy the relative part for that which we don't have yet so we just leave it empty for now we're gonna create another model here so let's just create another HTML file we will name it quick Cree's container let's delete all the HTML and it's just make it bigger and we can just create a few things here first of all let's just say we are going to create a deep here class off let's just say just the container and we'll just leave that empty for now all right and then we go back to take Chris container and we copy the relative part of this file so let's just copy the relative part and then just paste it here that makes it a directive as well so here we got the three containers now and now we can use these continue in our application alright guys from this video and onwards we are going to work on the functionality of our application now right now I am in quiz control and we are going to inject three things into a controller so first of all let's go and inject our word quiz factory inject our question factory so the reason why I'm writing that in and erase because I will mean fly this application so it will it will run faster so I got a quiz there we got a question there and then we need app modes as well so here we'll just try it let's just bring an app mode and then we need app information so let's just a pin for formation and then we need take quiz mode as well so take quiz mode as well so we have injected few things we injected this quiz factory this question Factory and if we go to the app dot J's file here we have a constant of app information app mode and take quiz mode so I'm just gonna open this into parallel like horizontally actually we can just open this vertically so split vertically and here we will look at so we have injected app mode spelling is a ride take quiz mode spelling is a ride and app information so that's right now so we have injected those now we're gonna add them into function as well so we will just say I'm actually gonna bring it down so into next line so we'll just say quiz and we are going to add scope actually first so let's just say dollar scope and then we need quiz then we need question and then we need app mode so and webstorm is giving me suggestion as well and then we need app information and then take quiz mode that's right so we got these services injected in our controller now we are going to inject a couple of more services here we're gonna use so we need another service called dollar window which is a built-in service in angularjs so we will have to use that for some functionality so we added that dollar window as well so we gotta inject that here as well it's a dollar a window but so now inside our container we need to create few variables from our on our scope object all right first of all I'm gonna be a little bit of tricky here I'm just gonna set a window dot quiz app scope and I'm gonna set that to dollar scope now from anyway in the application we can access our scope on a controller using this quiz app scope that could help us a lot all right so now let's add few things first of all we will add modes of our application into the scope so we'll just say I'll add a commit these are the application notes alright now we add scope dot we just app mode is equal to AB mode alright and then we have another one scope dot take quiz mode is equal to take Chris mode then we have scope dot we have take quiz mode and then we have application information as well so application add information you just say information is equal to app information all right and then we have check quiz mode as well down AB mode application Christmas so these three things are done there next we need to create few more variables on a scope so I'll just add a comment using factories okay in our controller so just go get the scope object dot and we create a quiz now so let's just say we add quiz is equal to we can create a new instance of four more factories by using the new keyword and then we'll just say quiz all right so we add this now it's gonna go and create a quiz empty object from this Factory now there's a few other things that we can add here as well we didn't add a quiz mode as well so there's another object we need here which will basically determine what mode are we at right now so we have a quiz mode is equal to AB mode dot start okay so now we're just incoming from if we go back to APL so here we can see we have start up and inside our app mode so that's what we accessing and we send that into cruise mode so when the application start it will start from this app mode start next we have a few more scope objects where we can say scope dot I'm gonna name this scope object of variable loaded we're gonna set that to false and then we have scope dot start quiz object a variable you can call it and then I'm just set it to false as well so that this quiz has been loaded and this quiz hasn't started yet so we set them to false let's we created a new instance from your quiz and then same as that we are going to create another instance form what questions so I'll just name it question is it go to new question so we create that and then we have another object which we will use for example potential questions once the quiz load I'm talking about in the future you understand when we need this so for now we'll just leave that here now we are going to write a function which will change the modes of our application so I'm gonna write scope dot change app node I'm gonna name change app mode is equal to I'm going to set this to function and we'll need a parameter for that so we just say mode and then once we change the mode of an application we are going to do few things first of all we are going to get that scope dot question and I'm gonna make another instance a new instance from our question Factory next we have a scope dot we have a quiz mode and we're gonna set that to the mode we get so this is the world we're passing we're gonna get that and with general we're gonna make that mode active next we're gonna make quiz loaded scope that crease loaded true/false okay so this is the function which is gonna help us to change the modes of an application we need another function which will help us to clear fields or forms from our applications so whether if we want to create a new quiz or Queeny question then we need a function which will help us to do that so we can write that function here and do some write or comment this function will clear the forms okay and we add that to a scope object dot we just name it clear fields actually a field is equal to I need to make the spell right is equal to function and basically all its gonna do it's gonna grab that scope quiz variable and then set down to new quiz okay I'm gonna make it bigger for you guys to look at it and then it's going to empty the question as well so scope question do we have a question yet yes we do so qu is equal to new question all right so now we have two function to change the out mode to clear the field and there's few scope variables we need to add here before we can start working about modules so here if we go down here so we'll just write something like helper variables okay and then here we need to have few things for example we are going to create a scope object which we name it potential question is equal to null for now and then we have a counter for our application so we just say scope that count and we set that to zero for now it's gonna count the questions or queries or fewer things we will talk about it now scope dot count questions and I'm gonna set that to 1 okay so questions gonna start from 1 not from 0 and there's another scope Raible we need which will be question limit exceeded so it's gonna check whether the question limit has been exceeded so we're quitting quiz' for questions so we don't wanna we want to make sure that we just create for question not more than that so if this scope variable is gonna help us to look at the length of the questions I'm just gonna say question limit exceeded this is equal to fall it's not exceeded yet now we have some validation so we are going to write a comment here so validation variables so variables right and then here we have scope dot is the question valid so we just create another scope object named a valid question so I'm just gonna set that to true for now okay and we have another object which will help us to determine whether the question the user answer is false or it's true so let's create that as well so we just say checking question variables all right and here we create scope dot and I'm just going to name this correct answer our question answered question answer it's equal to and I'm gonna set that to false and then we have another scope which will save our answers for us to live on look at whether the answer was what was correct or not so we just say here correct answer and we just said that two empty array and the last we need is to check on the scope object we create the current question I will just set that to null for now all right so let me go to all of these scope objects for now so here we have application nodes so for now we have application mode set to app mode take quiz mode application information then we have a quiz mode which will start from app mode start crews loaded start quiz so we set them to false because we haven't loaded anything yet and then we created this to score objects which will create an instance of quiz and instance of question and then we have and have changed at mode function which will help us to change the mode of the application then we have this function which will clear the forms for us so yep that's about this for this video guys in the next video we are going to work further on our controller what my in this video we are going to modify menu bar dot HTML file to change our modes for example if I click on take quiz mode it should go to take quiz mode if I go on create quiz mode it should go to create quiz mode and if I click on Chris home it should go to quiz home alright so first of all let me show you another directive called ng value so we can actually make this valid dynamic so for example we have this constant we have constant on our module quiz app so we in that constant we have this key app name and it says crease app so we want to show this to over menu item so this is the menu button I want to show that here so I'm gonna go back to menu bar dot HTML and here first of all I'm gonna change this to ng - of value and then I'm gonna change the value inside so on our controller we actually created an instance of our constants so here we have app information just gonna make give a space here to separate it so here we have a pin for so inside information we have to two keys and two values so app name and then we have a version so I'm just going to copy this and I'm just gonna take this and then paste it here and we have dot app name alright let's save the file and I'm gonna go and refresh the browser and you look at it it will change so I'm gonna refresh it and now it says quiz app instead of quiz home so here if we go to this file and if I change this to crease application I'm gonna save this and now if I go refresh the browser it should say quiz application ok and here we'll change this to Chris home so if want show Chris home we can show that here as well by refreshing the browser now we have that dynamically we go back to the menu bar and here we are going to add few things so first of all we are going to add a click event using angularjs directed called ng click so here I'll talk ng - click is equal to I'm gonna use this function change add more function which we created in the last video so here we have a change AB mode function which will take a parameter and then inside that it will just change the value of quiz mode according to the value we passing to this parameter so we have a scope object quiz mode and this is going to help us to change the modes of a replication so let's go back to menu our mini bar and here we just say change app mode it's a function so here we'll type app mode dot start ah let's save it and now basically what's gonna happen when someone's you like click on this it's gonna take them to and change the value of app mode sorry - Chris mode - this value so once we change the value then it will change the mode of our application as well and one more thing we want to do here after we use this function we want to clear the fields as well so after days I will use clear field function which we created in the last video so clear the field function there as well so we can actually get both these functions I'm gonna save it and then the next one we are going to use another the next button and we are going to let's just say ng click is equal to and now I'm gonna use change up mode function and I'm gonna pass him app mode dot it's giving you some suggestions so here we go Abbe mode dot and we can use create choice mode so here we have a quit quiz mode I'm just going to take this and I'm just gonna paste that here in case I do a spelling mistake so that's right so here we got that now and after that we have a third button which we wanna add a click event so here we use ng click is equal to change App Mode and app mode dot and we are going to take people to take the quiz so here we have a take whiskey and I copy that and I'm just gonna paste that here but it's gonna help us to change the notes for us so and I just ended that properly and let's just save it alright so now let's go to the file we created in the model template we created the quiz container now inside this we are going to create filled eaves here so I'm going to creative and I'm going to use a directive from angularjs which is ng-show I'm gonna set is equal to twist mode is equal to app mode dot create quiz so we'll go to app file and we're gonna click on double click on this and copy that and then we go back here and then just paste it here so what it's doing basically it is going to show this container if the value of the quiz mode is equal to add more dot create quiz and then we got that and then we have some other other dibs as well so I'm just going to copy and paste so you don't have to see me typing I'm just gonna paste the off days here so there we go so we have for dibs here I'm just going to delete few of these we haven't created them yet so here what we're doing basically we are just showing these when the value gets changed to this and inside these we can create a different forms and different containers to show which are going to make our application work all right so this is what we have right now and we'll come back two days but first of all let's look at our application for now so I'm just gonna go and refresh the page and I'm gonna click on create quiz take quiz quiz home it's not working in at all it's not showing you anything so to show that we are going to add four things into a container so here we have a success container take Chris container so is they taking us to take quiz container right here in this take Chris container so I'm just gonna go and write few things into our take quiz so here we just say we can write H 1 and we can write here take crease container and then we have success container I'll just write something here as well so just success container and then we have this quiz container the main container we have now we are going to add this quiz container into index dot HTML file let's go back and here we will type let's just come down and we are going to create another container so let's just say div class container and then inside that first of all we are going to create a row so deep class we create a row and then we are going to create another div class we can say call and then inside that we're going to use quiz container so here if I open the less than equal to sign and I'll just type quiz container - container and then let's save the file so now basically this is angularjs thing that it's gonna read this javascript file and it's gonna grab this and then it's gonna show us that element and when I save the file and we're gonna refresh the page and there you go so we have this quiz container now I'm gonna go and change the CSS for our quiz container so I'm just gonna change the color to the screen so we could look at it for now it's gonna save it I'm gonna refresh the page and we have this container now it's showing perfectly fine and now inside our Chris container we are going to create a few forms now so our main structure of replication is ready now we're just gonna add stuff into different containers so let's start creating some forms in the next video Ultima guys in this video we are going to create some forms for creating quiz creating questions and question form so let's go to JS file folder actually and then create a new directory here so here we name it forms inside that I'm gonna create a new javascript file and I'm just gonna name it open quiz I'm gonna create another file I'm gonna name it question form create another file and name it create a quiz bomb alright now we can add some code in all these files so let's go to create quiz form first and then here we'll type the same code to make it directive so angular dot module and then we'll say crease app and the directive and then name of a directive we can give it create quiz form alright it takes a function and let's add a semicolon it's going to return suppose let's restrict it to just element and then template URL we just gotta leave that blank for now because we haven't created those templates so let's go and in the folder and we're gonna create a new directory and I'm gonna name it performs and slide that will create another HTML file and we can name it create quiz form alright and then just let's just delete the code here we come back to it but we go back to this file and I'm gonna copy the relative part and then just paste it here alright so here we have created a quick quiz form successfully let's delete that we created a question form now let's just add the code for that as well so we just make it bigger and we can say angular dot module quiz app and dot directive and the name of what directive is going to be question form takes a function that will return an object so let's just restrict it restrict to it's just an element and then template URL we just leave it blank for now we're gonna go form let's create another form and we can just name this it's a question form so we just name it question bomb all right let's just delete the whole code let's go back to the file and then here we'll just right click and copy relative part and then I'm gonna paste that here that's right we created this directive as well the next form we created this is an open quiz so we just add the same code here as well angular dot module module name is Cui's up and then it's creating a directive we need to tell the directive name and here we can just say open the quiz take the function and then look at yourself return and we can just restrict it to just an element all right template URL we need to create that so here we go two forms we create a little HTML file and here we just say open twice let's delete this code save it we go back to directive J's file and I'm going to right-click and copy the relative part and I'm just gonna paste that here alright so I'm just gonna close few files and we come back and open whatever file we need now we basically created some forms here two reforms we have the J's files there as well and we can use these forms in our applications now because we create limits directive now I'm just gonna grab some code from my notepad where I wrote this code before so first of all we are going to create a form for quiz so when we're gonna create a new quiz so we're going to use this form so we just go and create a form here and I'm just gonna name the form is a new underscore quiz I'm gonna say mg submit and here we need to use a function which we haven't created yet but we will create that function but first let's create a form so here we have a tip we have a class I would just say if it's a form group and then inside that we have some inputs now so here we just go input type would be text and then I'm going to name this to author and then we're gonna use the ng model you remember I showed you two-way data-binding so we use ng model directive and here we can just say quiz god author class it's a form control and we can add a placeholder as well let's just say Auto alright let's just save this okay now what's happening here is basically creating a form using ng model to to make a data binding to of a controller so let's go and open the controller as well I'm gonna open that side-by-side so we could talk about it a bit now here we have question form where we actually mistakenly we created this I'm just gonna grab this form code and when I paste its create quiz form alright so here basically what's happening we have created an instance of factory object called quiz and we store that into scope dot quiz and this thing has a keys now so author a question question land and all that stuff are already in this so we just filling it up by using this form so I'm just gonna paste some code from snippet so I'm just gonna come down here now let me just explain to you one more time so inside this we have keys so we're using this quiz dot quiz name Chris dot quiz length and then we have this submit button which will create a form for us now we're gonna go and create add quiz function on our controller let's go to the controller and here I'm just gonna close this and come down and here we're gonna create an ADD quiz function so write a comment this function will create a quiz for us all right now here we can add that to score so we could basically use it so add quiz is equal to set data function and then inside that we're not gonna write anything yet instead we are going to create a new service I've created a new javascript file and created this service folder and there's a file called Christophe Agius I'm just gonna open that and then inside that we are going to create a service first so let's just say angular I'm gonna make it bigger dot module and then here we just use our Cruz app module dot service and the name of the service is going to be Chris Cutler and then it's going to inject two dependencies a quiz object and a question object so let's do that instead we do it later we can do it right now so here I'm gonna add question and then I'm gonna add quiz and then it's gonna take a function which will have a quiz and then question so we injected those in our service all right now we are going to create a variable cell I'm gonna set that to date and then I'm going to create another variable which has question array and I'm gonna set that to empty for now and then we are going to create another variable so but we're gonna set that to this so we do this dot quiz is equal to we just leave that an empty object for now and we have another variable which is going to help us to count the questions that's that and now we are going to use another variable and we can add another function add quiz function is equal to function and so I take a quiz from our controller and set that self dot quiz oops quiz - Chris alright so what it's doing basically it's taking a quiz and it's setting that quiz to our discrete object alright so here we have our function which will add the quiz your object now how do we use this to use this function in our controller we need to set this variable which has a function so we can just say here this dot add quiz is equal to add quiz and that's how we can use this outside this service alright so we got that now and then we go back to control and here we write the code first so first of all we are going to basically add a validation check as well so we can use our scope dot valid question so well question variable and I'm gonna set that equal to nothing for now okay because there's gonna be another function in our service which is going to help us to check whether it's a valid question or not so in the next video we are going to finish our service for quiz app all right guys welcome back and in this video we are gonna finish working on a word quiz helper service let's go to the function which will load the quiz into our application so first of all let's create variable and which is the Lord quiz is the equal to function it's gonna take a quiz and then remember we set this window object so here window scope window dot quiz app scope and we set that to scope so we can access this scope by using this quiz app scope now so let's use that now so I'm going to say quiz app scope dot quiz is equal to new and we create a new quiz and after that you have quiz app scope dot quiz and then we wanna pass that into a JSON file so we said json dot parse and then we just say pass the quiz and then after that we have a validation for a quiz ab scope dot quiz dot quiz name alright if that is not equal to empty then what it should do it should say quiz AB scope dot quiz loaded is equal to true so here basically we are loading the quiz and we have a variable on a scope object quiz loaded so basically that will become true so that's how we can check where the quiz has been loaded or not alright so we got the load function done and the next function in the quiz helper we want to create is save quiz to JSON file so we'll go and say save quiz to JSON so just a quiz to JSON is equal to function it's gonna take a quiz as a parameter and then what it's gonna do let's create a data variable and then we can say make JSON and make it stringify and then we just make it stringify the kree's object and then we have something else that we're gonna we're gonna talk about it but we just created for now and we create a new block actually we don't worry about this function right now we're just gonna delete this for now but we'll come back to it now a few functions which are important we want to create fuss so first of all we want to create a function which will send a question back to our quiz so send question I'll take a function and it's going to take a question and then self dot question so we'll create a sub that question object on the top so self dot question is equal to question and let's just say if count less than equal to self dot quiz dot question length question length then what it should do it should call a function which we haven't created push question to array otherwise if that's not the case then it just do a console dot log and it would just print out question limit exceeded so we just say send an error message Russian limit exceeded all right now let's create a function push question to array and that would go underneath first so we'll create a function push question to array is equal to function and it's gonna take a question and then inside that we simply have to get that question array dot push and we just push that question into the way simple is that and then we go back to over send question function where if that becomes true then we can just call that put question to array and then we just pass in self dot question there pretty simple and then we just make sure that we do count plus plus say that gets exceeded it should not do that all right now we have that function send question did we have this function push question to array and now we're gonna have a main function which is going to help us to actually add the question to the quiz so let's finish writing that as well so we go let's just say question to tweeze easily go to function and it's going to take a question actually it's gonna take a quiz first and then we have question array dot for each and then we go call that function there and we gonna see the choices and then we get let twice's is equal to or we can just create a variable not a big deal we don't have to use the ACMA script six and then twice is is equal to twice and then if something's alright then we can just say chris dot questions dot and we can just say push and then we can just push twice this object there hashas variable there that's gonna help us to push the question into an array now we have another function to work on which is going to parse the JSON question to jason to pause so we create that as well so jason to parse is equal to function it's gonna help us to return question array alright let's look at what we have so far we don't have a safe crystal json yet now we need another function which will help us to Ashley check if it's a valid question or not that's a bit of complicated function so you gotta pay attention here so I'm just gonna make it smaller let's just create check the valid question is equal to a passing function and it's gonna take a question and then we'll just say valid question we set that to false for now then I'm gonna use the lodash library to use for in so I'll just say dot for in and it's actually for in and then it's gonna take a question dot and it's gonna take a function and it's gonna take a value key and then we can say if value is not equal to empty then it should say a valid question is equal to true all right otherwise otherwise it should return I forgot the code block here so we just push this up there and then else if not then valid question is equal to false okay let's not tell it's not a valid question and then after that we are going to just return the valid question so return a valid question so that's going to help us if it's a valid question or not now we have something that we need to check about valid questions but we'll come back onto that later so let's save the file and let's write that function as well right now so we can write save please to JSON function as well so we just save or say Chris to JSON function and it's gonna take a quiz and then it's gonna have a data and then we set that json stringify we're gonna make it signify the quiz or check and then we're going to use the file API to store the data into a computer so we go just go blop you create a blob actually on fire and it's gonna take an array of data so we just set that to data and then we need to type and type of the data so we just say in the object we can say type would be text slash JSON and all it can be char set is equal to UT f - 8 all right so we have that object a and then basically it's just gonna save that out of there alright so we have finished writing our service and we have all the function not to make these functions available outside this service we need to add them to this service the way we did add quiz function there so here let's quickly do that so this starts end question is equal to sender question all right and I'm actually going to copy in a paste these or maybe we just quickly write it so check valid question is equal to check a valid question so we are able to access this dot now we have push question to write so push question two array is equal to push question two array that's fine and then we have this dot JSON to toss which is equal to JSON to toss and then we have this dot add question three crease is equal to add question to crease and then we have this dot save quiz to JSON so save twist to JSON is equal to save crystal JSON alright and then we have this dot lowered crease function as well so load twist function there so now we are able to use all of these function into our application we got some error here save quiz to JSON that's a little bit weird so we can change this to JSON all right let's save it and in the next thing we're gonna use these functions welcome back in this video we are going to write a function for adding quiz and adding questions so first of all let's finish the add quiz function which is going to be very simple and short so now we can use the quiz helper service but we need to check whether we have injected that or not so we haven't actually injected that Chris helper service so here I will add quiz popper and then inside our scope we are going to add Chris helper service alright so here we have a quiz helper and a quiz helper let's match the name as well we go back and then we see Chris helpers day and when I copy this name and make sure that spelling is same alright so now let's add a function to add a quiz and then we write a function to add a question to the quiz as well alright so I'm in the scope dot add function so here we are going to use that quiz helper service now to add questions to a quiz so let's do that salsa side quiz helper dot is a function in there called add quiz that's the one and then we're going to pass in that scope dot quiz object alright and then we are going to check if half mode dot create quiz alright and if that's true if that's there then we're gonna change the mode to change mode and then we can pass in our mode dot add question mode so this is what we're gonna change to write this is very simple function it's gonna go into an add the quiz once the quiz gets added and if it's true then it's gonna change the mode to add questions and then we're gonna we're gonna go to the next step while we add the questions now let's create a function which is going to help us to add questions so I'll add that to the scope object as well I'll name it add question is equal to function and here we need to check a lot of things we have a lot of things to check first of all let's check whether the question we add we adding is valid or not so we can use that quiz helper service function check a valid question to check whether the question is valid or not so dot valid question so we have a boolean variable which has a value of false right now so if scored a valid question and we're gonna set that equal to Chris helper dot check the valid question and we're gonna pass in the question object so scope dot question object inside now when we go and check if it's a questions of valid question then we come back and would set whether it's true or false so now if we can say score dot a valid question and if it's false we have this checked at false then what we want to do we just want to return otherwise we can continue running this function and we can check if scope dot question dot answer is equal to zero then we can set scope dot valid question is equal to false as well okay and then we have some jQuery but we are going to write that letter and then we're just going to return from here all right next we need to send a question to add to a quiz all right so we go down and down we write quiz helper dot send question and inside that we pass in our question object oops so a question object and then inside that we are going to check on the scope object so if the question count question is less than scope dot quiz without question length then what it should do then it should add scope dot count question two one okay so we want to add one to count question and then it should do is it's gonna create a new instance of question from new question factory all right and if that's not the case else we are going to say scope dot question limit exceeded is equal to true we set that to true and then we just do a quiz helper dot add question rupees so once that limit is exceeded then we can add a question to the quiz so we could say add questions a quiz and then we're gonna pass in our score dot quiz object all right and then we have another thing we can change the mode now as well so we have scope dot change AB mode to AB mode dot success crystal all right so it's the hood has been created successfully now the next thing we need to do is we need to have a function which will build our quiz into a JSON file so we go scope dot build quiz is equal to function and then we can use quiz helper service to build our quiz into JSON fault and then we say save quiz to JSON file and then we're passing that scope dot quiz object alright now we have done our functions for creating quiz but the last thing we need to work on is creating your forms so we create the form for creating a quiz now it's time for us to create a forum for questions that's the most important one now it's a long form so what I'm gonna do I'm gonna write one feel of the form and then I'm just gonna paste the code and it'll go through with the form so first of all we'll create a form and then I'm gonna name this form to question phone make it very simple all right you know ng submit this when we submit this we have add question and then we create a div with the class of container inside that we're going to create another div class of row inside that we're going to create another div class of column and we can set that MD to 12 inside that we have an input field so we type to text and then we have a ng model directing which we're gonna set this regression dot question and then class is going to be form control placeholder we can just say type question all right don't in set this to required required basically it's gonna make them type in before they submit the form all right so here we have this now the rest of the phone is pretty long so I'm just gonna copy and paste that code so I could explain to you guys so you don't have to wait for me to try it the rest of the code which is going to be a very long actually so we have the code here now this is what we have right now let me quickly show you an application before we can explain this so I'm gonna take you guys to the application where we start server now we have a home quiz home I'm gonna click on create quiz so it's gonna show this create quiz form if I take Chris gonna disappear that if I click on create quiz it's gonna bring it back you know how this thing is working is because this is one container it's just showing ng-model it's trying to form according to the value of app that's pretty much it is now here we need to have actually want to change the CSS to make the color look better that color was awful so here we can just grab some light color maybe this color and let's just refresh the page I need to start the server need to start go build it's gonna take few seconds before it's built a complete and then I would say don't watch now it's watching so here if i refresh the page I have a different color of that now if I click on create quiz it's not going to show anything right so now after we create this question form and we have created this create quiz form we want to add these two over quiz container so where is our quiz container there you go this is all Chris container so here if the app mode is equal to create quiz then I want to show this create quiz form so to say create this form and if app mode is equal to add question then I wanna say add question form alright and then if it's a success then I want to show successful pre success container and then we haven't done anything functionality for taking quiz we worry about that later but for now let's have a look now if i refresh the page i'll go create quiz i get this form here so i'll just type my name authorize and I'll just say Chris name Matt and I was like to question ad if we can create quiz and now here we have this question and then choices for them so if I click on one of them it's gonna just make it default this functionality is not active yet we have we still have to work but as you can see that it actually showed us to create new question model so if we go back to question form and here we're gonna have to figure out what's happening so here we have this form control it's taking this MD 12 that's fine and it should be in the container so I will just go and refresh the page and have a look okay that's fine we have to type something in there to go to the next step and then here we're gonna fix this UI stop now if I click on basis it's gonna basically write impressions and let's select something and soonest dislike everything else and I'm gonna add a question and now we get these questions there or add choices correct next question so we added three Rs so we have three questions there and I click yes so it shows us a success container okay so now here on the success container we're gonna have a button to actually save that into a JSON file and show us the quiz as well but for now we're gonna go and look at this form so why it's not behaving the way we want it so here we go back to Chris phone and now let me quickly explain to you input type button and you click it basically on the click directive is actually change the question answer is equal to this it changed the value of question the answer to this value whatever you select and then it hides the rest of the correct buttons that's pretty much it is it seems complicated but you have the repository just download the repository try to read it and it's very very simple it's nothing there's nothing complicated here now here we have some problems where it's basically going all the way there so you want to change this to eight as well let's save it and let's just refresh the page I quit Chris you're gonna go here and one question and now this is fine we're gonna have another B R between these so what I can do here basically I can just go be R to make it look a bit nicer let's refresh the page and it's got the crease crease crease tattoo and it actually didn't fix that I'm gonna have to figure out what's going on here so basically what's happening it we can debug our applications if I right click inspect element let's inspect this element here and we can see we have the property padding 6 we need the margin of 5 pixels or 6 pixels and that's what we're gonna look at in the future when we have some UI fixes left what my guys in this video we are going to work on success container in our angularjs quiz application all right so here we had this issue in the last day of scene we had a spacing issue here so I am actually going to add a CSS class which is going to fix that from bootstrap so here the class we didn't add which is a form group class I'm gonna save the file and let's refresh our application and then if I go click on create quiz I'll just do a random quiz all to add one question creating and now it has been fixed properly all right so now let's go to our success after we add questions so for example if I had any question here and I'll just go something like correct answer is this then we go add question and it says success container alright so now we are going to work on this page so this page should show us the question we added and if we want to save that into a JSON file or we want to just open that alright so let's get started with that guys I'm going to go to success container this is the one and here right now we have this which one we were gonna remove this nail now here we are going to use another directive called ng-repeat that would be that would be so cool to use that because it's gonna automatically loop through off loop through all our questions and show them so let's create a table so I'm just gonna start with the table floss and then I use a bootstrap class table and we just say table and I'm just gonna make it a bit dark table I'm gonna use that and then when I use ng-repeat now here where do I want to repeat so I'm gonna open this quiz container vertically so we could look at it as well so right now our quiz get stored in this question so the questions get stored here okay so now it's on a scope object so we can access this so here I'm gonna try question in quiz dot questions all right so here I'm gonna loop through all of this stuff whatever questions we have there I'm gonna loop through on all of them now then we are going to use th we're gonna use a th T head and basically it's a table head and then here we add a table row and then the row I'm gonna use contents of which which use the th as a tag and then we just scope and is equal to we set that to call alright and then we are going to use questions alright these are the questions and then I'm gonna add a bunny expression and I'm going to say question so this is question is coming from this question okay and then I'm going to say question dot question all right so give me the question on a success page from this array or this loop then we create a table body here so here I'm gonna just e body and then in the body we create a table row and in the table row we create th now in T hat I'm going to display all the choices of particular question so on a table row I mean I use ng repeat again and I'm gonna say twice's in question dot choices so this question is coming from here okay and that question is there it's on a scope it's on our scope so we can access that so here and we say choices in question twice it and then inside this t hatch we can type here for example we use the t @ for heading and then you can say it twice and then we are going to get out from here and then we just use the binding expression and we type choices okay and it's gonna show the choices for us now T body is done and after that we are going to just close the table and then we are going to get out from the deep container and then here we will just say we can add the label if we want to and then we can say here you have successfully created a quiz do you want to save it okay and then next line we are going to use another day and then class would be formed group and then I'm gonna add a button here so let's just say type that would be a button our class we can define BT and BT and and we can just use a primary button from bootstrap and then after that we need to call a function so we use the ng click event and here we have a function on our scope which is a build quiz so this is the one right so what it's gonna do it's gonna call this quiz helpers service and it's gonna call this function save quiz to JSON we're gonna have a look at that so now we have this function here so what it does basically it goes saved it gets the quiz which we're passing from here it creates a data it's freeing you file a quiz and throws a new blob and here we forgot to do one thing we have to use save as and then we're going to save block and then the name of the file so here we can say please dot JSON that's the file we want to create and then we can close this file from here and then we go back to success container and we call this function build decrease okay I hope I spelled it right so I'm just gonna copy the text on here and I'm just gonna paste the text here and now yep it's perfectly fine now we can test our application so I'm gonna save and then the first thing we'll want to do change the CSS as well so I don't like this color at the background which is pretty Reese I'm just gonna make it white colors I'm gonna save the file let's go to application let's refresh and right now we can see we have a quiz home we have a create quiz and we have take quiz which basically it's a container but it doesn't do anything we have to implement the functionality to open the quiz but for now we're going to look at whether we are able to save our quiz in a JSON file or not so let's click on create quiz it will bring up the form and I'll type my name always as an author quiz I'll just say questions what's sake UST and I'm gonna add two questions there so I'm gonna click on create new and here I will type what is my name and then I have to type the twice I'll just say one these are a ways or Mirza and just say use my brother's name actually instead of typing that I'll just buy another brother name and I will click on correct this is the correct one a waste and I'm gonna click on add question now it's gonna bring it the second question and then we have what do you do for a living and I'll just say I make videos nothing chill work and I'll say I'll make videos and let's add the question once I had a question and there you go so next page shows us this question what is your name and it shows all the choices there and then here we have the button to save the quiz but what we want to do here we want to add the value of this button as well so I'm just gonna go here and I'm just gonna type value and say save twist and save the file and now we have to refresh the page create the nucleus I'm just gonna randomly create a random quiz all make it two questions and let's just do a random question and then select this one right and we just add a random question there as well select this one right and add now you have a button here save quiz if you can see we have the button there save quiz if I click on that it should save the file into a JSON file now we have to debug this application for a bit because the function recalling a build quiz is not actually working so we're gonna have a look why it's not working and there is a package that we forgot to install called file Sailor Jas and that's what we want to install so I'm just gonna go back to web strong and I'm gonna close the file and we are going to use a bubble canal so we'll just open a new terminal and here we install Bower install file saver yes and if we find step module we can see it doesn't really find anything so we're gonna have to search for that so let me show you how you can search the different modules for your application so say file saver j/s now here we have five 70s and we can use this file services for these browser c-block we use from files images i just forgot to install that and we can install this through Bober as well so here we have a bobo installation so package name is file server dot j s let's just copy this we go back to web strong and I'm gonna type here over install - that say and the pace the whoops and then file dot save ojs and it's gonna go grab the file server dot J's for us and then we going to use our built j/s file where we used to build lips right so here we have gulp and then we're gonna just build lips tasks and now inside our project we can look at the lips and here we should have this file saver and now if I just stop this gold wash task and I will run this go build task which will go and look for these libraries and it will just create another lip start chest which has the file server in it alright cool so now we have a file server I'm just gonna start go watch again so let's type gold once it will make any changes it's telling me that is an error so we have to remove this okay that's fine and then we start don't watch again and now if we go close this and we go to application I'm gonna refresh the page and now I'm going to create a new case this time I will create a proper quiz so I'll just say my quiz is like mad two questions okay so we'll just say what is what is 2+2 and then I will add four five seven one I'm gonna say it 4 is the correct answer add questions so what is six plus five and then we'll just say one two five or we can say ten the correct answer is ten I'm gonna click on add questions and they've got the questions are there now we're gonna click on save JSON file and there we go we have this file quiz that a problem this is not because I create your quiz before so I'm just gonna open this file and show you what JSON data we have in that file so it opens up in a bracket so there we go so we got the quiz object we have the quiz name where the question land and we have the correct answers as well alright so now we're creating quiz part is done and the next step we're gonna look at is writing a code which could load the quiz and we could just take that quiz automatic in this video we are going to create a directive which is gonna help us to open a quiz from a JSON file and only created by this quiz app let's get started so I'll go to the project files and in the app folder in the J's folder we are going to create a form inside the form we have this open quiz that's already there we have a template folder models forms and we have open quiz form so we already created a directive now in this form we want to have a deep and we have another button we use the input and we type set to button then we set the class BTN the BTN and we use the default button from bootstrap and we can just set the value as well so valley let's say open place pretty simple right so open quiz and then we are going to use ng click event and we are going to call a function open quiz to take so we just make that function in a second but let's look at its open quiz to take it's not there but we will create that next we are going to create another input field and that input field will have a file type and then we're gonna use a class hidden and then I'm gonna type the ID for that so ID would be open - file and we have successfully created our directive I'm just going to refresh the application and I'm gonna click on take quiz and it's not there yet so we need to add that to a quiz container let's find a quiz container file and here we have a take quiz and in the take quiz mode we want to add that open quiz directive so we use open quiz save the file and then I'm going to refresh the page and we'll go open quiz and there we go we see that button there it doesn't do anything yet but we'll write a code for this button to open a window and show us of File Explorer so we could select a file a JSON file from there now I'm going to close the quiz container because there is nothing else we're gonna write in this quiz container for rest of the course now we're gonna close success container question form is being closed and then we have open quiz this is what we're gonna close Chris Cantina is gonna be used and quick respawn is done as well now in a quiz container we our quiz controller actually guys so here we're gonna write a function which will help us to open a file and then we will add a function which will load that file into as a quiz in a word quiz application all right so now on that we are going to add a function on a scope we have to top the same name open quiz to take we set that to function and now inside that we're going to be using few of the api's web api s and a jquery so first of all we are going to target this button I'm going to open this vertically so we could look at this and we can just bring it a little bit back so we don't really have to switch using tabs all right so here I'm going to open call this function open quiz and here gonna go to Chris container all right so here we call made the function we set the ID to open file so we're gonna select that by using jQuery so use a dollar sign we start a parenthesis and in the single quotes will type the ID with the hash so open file alright and then I'm gonna add a click event on it so let's add a click event and then we have a change function inside that it's gonna take a callback and it's gonna have a dollar in it so once we click once we open that file and then we will basically load the data from there and we're gonna read that data so now we're gonna add a variable reader and we just create a new instance from of that API without file reader next we use that reader dot onload function is equal to we set another function in it and inside this one's will read the data then we have to use a quiz helper dot load quiz function so we have a load quiz function there which takes a quiz as a parameter so we pass in reader dot result okay and then we are going to add a condition here so if scope dot quiz dot quiz name not equal to lesser empty then we are going to add this score so we're gonna say that scope dot quiz loaded is equal to true so we're gonna tell it that the quiz has been loaded now okay and then for angularjs because it's gonna get a dirty digest loop so we need to run the digest loop here as well but in this scope dot dollar died just alright now we're going to get out from the code block and then after that we are going to add a semicolon here for this onload and then we'll just say reader dot read as text okay I'm gonna read that as text and what we're gonna read we can read the data dot target and then say files and the file 1 because we're not gonna select a multiple files and then it's gonna take what type of file so that would be in a string so that's like text file / a JSON file and the time would be Charles said is equal to UT UT F dash 8 alright and then add a semicolon and then now we have created a function which will help us to open a file and basically it's gonna pass that data into quiz helper load function all right so let's give it a go and the strife we were able to open the file or not so I'm gonna refresh the page I'm gonna take Chris and make like an open file open quiz and there you go so we got the file explorer open so now we can select a file a JSON file now we are able to do that but what we want to do here we want to write a function which will actually start our quiz now there is a scope object or scope variable in the table which says quiz star which is set to false but we actually know that the quizzes been loaded so that's always said that quiz - yes - true now we go down and after that we are going to create another function which is going to help us to load or start the quiz so I'm going to say scope dot let's start quiz is equal to function and inside that function first thing what I wanna do I wanna say start quiz oops start quiz is equal to true set that to true here and then we can check your whether scope dot start quiz and if that's true then we can scope dot potential crashing is equal to scope dot quiz . question alright so we got that and then we have further things to do but for now just leave that here alright now we need to have a farm which will basically take a quiz container we actually created this which is kind of empty right now because we need to add some functionality here to basically make it work or make it open so here we are going to actually modify the quiz container as well we're gonna go back to Chris container and instead of open quiz we're going to use this take Chris container alright so inside our take Chris container we are going to use this open crystal which will basically open the file explorer and load that for us now we have a container here this is going to be long code so bear with me I'll try to explain everything here so we have the container inside that will create another div container we give it classes row and then inside that everything is gonna go so first thing we need to have deep class and I'm gonna say cold - 12 and on the end just use an ng-show so i want to show this when chris load it's false so chris actually loaded okay Chris load is fall and I want to show this when question limit X feed it alright now we have these two scope variables on our controller so here if we can look at it so here if I go here and there we have Chris loaded and we have a question limit exceeded as well so whether if they are both false then show this so inside that we have open crease button that's when it's gonna show now let's get out from there and then we are going to create a new deal when I take we're going to give a class off let's just say cold 12 as well and let's use this call 12 cloth and now I'm gonna use ng-show so now I'm gonna show this when quiz loaded is true and start quiz is false okay and then inside that we have an input first and now we'll set type button and then I'm gonna give it class off but turn actually we make it primary button so button button - primary ok and I set the value for this as well so all it would be start quiz and then ng click and we are going to use that last start quiz function what we just created and then let's just get out of here and then we can use H our horizontal row and after that we are going to create another div class of container and then inside that we are going to show the quiz which is a loaded all right so first of all let's just say we are going to open the content whiskey controller file I'm gonna put it here actually we just leave that stop us but you guys understand that whatever it is on the skull we can access that from HTML so here we will just say that in the container first of all let's just create a class of row and then inside that we create a class column so the column would be to all the game and inside that we are going to use the class and alert and we will use alert primary - primary okay so that's what I'm gonna use alert space alert - primary and role is going to be alert as well okay so that's there and inside that deep we are going to type author name and use a binding expression we'll just say Chris dog author okay and then I'm just gonna copy and paste these lines into a column so let's just want to so we need a quiz name and we need a questions how many questions we got to attempt so here we can say that please name and then you can say question land alright let's save the file and we go and test it out so I'm just going to refresh the page I'm gonna take the quiz I'm gonna open this and here we look at where is our quiz so here we have quiz 9 which we just created and when open this and once I open this it says author is my crease names my quiz and question and is my quiz the reason why it's doing that is because we have to change the bunny expression so we'll just say quiz dot quiz name and then we just say chris dodd question land all right the HR is actually getting out so we just want to get rid of that let's save the file and let's just refresh the page and let's go take quiz let's open the quiz we select this quiz let's just set this quiz and here which shows us the author name is my quiz quiz names Matt and a question length is true now here we can add a different class as well I try to use this alert alert prom class bus from some reason in bootstrap it's not working so we could use a different class here but it's up to you so yeah so we finally got our quiz loaded in your application from JSON file and now it's time for us to write a code which will let us take the quiz welcome back in this video we are going to talk to functions in our controller which are going to help us to check the answers and we want to add a function for next questions as well I'm actually gonna copy and paste that code and I'll explain that so basically we have three functions which I've already written and I'll just copy and paste these three functions and here we have a check functions which takes an answer as a parameter we have a variable correct answer and we set that variable to our potential question count and then answer so what if the answer for that particular question that will be stored here and here in the condition we're checking if the answer is equal to correct answer then basically it's gonna show us that the potential question that count the result is true so if it gets true you'll save that the value that you answered it correctly here we have alt if it's it's not right question you selected and it's not the right answer you selected and it's gonna set that to false and then we have this question answered is equal to true as well it basically helped us to navigate to the next question and then we have this next question function as well basically it's going to check for the count how many questions are left if we haven't finished the questions then it's gonna just keep adding one to count and then it's gonna say question answer is equal to false and question is limit X it is equal to true we have a simple function reset of it basically reloads the window and that's pretty much it is now this video is already very long so on a jump right in to take with container and here we're just going to copy and paste the code as well and then you can pause the video and then read the code and you will understand what's going on here so I'm actually going to copy and paste the code here so let's just do that and then I will quickly explain that as well to you guys and let's have a look let's just paste the code here and it's a little long code but I'm just gonna go through quickly so basically we starting we copy the code here they are here and here we have an option for ng show start quiz if we click on that button start quiz it's gonna start the quiz and if the question let me exceed it it's not exceeded then it's gonna just keep using this ng repeat and keep showing us the answer so it shows the first question to us and then we just have four options basically it's gonna say ng click check answer and it's going to check the answer for that and we have ng click check answer function we have a potential question count so you basically look at these functions here and one more thing that there's a repository available for this quiz app so so far whatever we cover you guys will be understand that what's happening kids nothing really critical it's just a simple ng disable and you click and ng value those three just directly building directly from angularjs that what I used and I create my own function to check the answer and it basically just shows those answers and here we have options for next question so once we click on next question it will basically disable if the question hasn't been answered yet see if the question has been answered then you will enable this button and then you can go to the next question so next question has basically this function here which basically look for the length of the potential question right and then if it's if it's not the final answer question then it will just increment those the questions now we've got this I'm just gonna go and build this and let's stop the server and then I'm just gonna to go build it's in a build our application and then we are going to run this on our server so we go NPN start and then let's have a look at our application I'm not sure so let's bring it here I'm just gonna refresh the page and now we're gonna go and click on this button take quiz open quiz I'm gonna open this quiz I'm gonna start the quiz and now it's asking us what is your name and I can click on a waste and then next question and then I'll select this making YouTube videos the next question and now it's basically showing us results so it's not showing us what is your name the correct answer was a waste and then your answers last it says it's a correct and second question was basically what do you do for living programming in mejia it says it's wrong because we select it wrong now I understand that the UI is a bit different but we're not here to teach the UI for this tutorial instead I'm just gonna show you the functionality so we have covered pretty much how to create this application and there is a link for the repository in the description check it out and download that code and study that code and you will be able to make this application alright so yeah thank you so much for watching guys and make sure you subscribe to the channel and I'll talk to you guys in the next video chase

Channel: Awais Mirza

Views: 12,856

Rating: 4.8444443 out of 5

Keywords: Angular JS Tutorial, single page app, web app tutorial, angular js, angular js project, Quiz app in angular js, Gulp tutorial, Gulp web workflow, bower tutorial, how to create web app with angular js, javascript framework, best javascript framework, angular js project based tutorial, angular js for beginners, angular js modules, Angular js Filters, Angular js http, angular js components, angular js controller

Id: u6dRHXqinYY

Length: 195min 45sec (11745 seconds)

Published: Mon Nov 13 2017