AngularJS App in 59 min From Scratch (2017 – 2018)
Learn AngularJS By Making a Project With Project CORE:
In this video you will create Hangman Game App using AngularJS in 59 min :
This is the final App with CSS applied, we will make the core App without CSS in 59 min.
Git Hub Code :
( In this code we have used local AngularJS library and in video we are showing by using CDN )
AngularJS CDN will be used to create the App which is present here:
0:33 : Why AngularJS
1:26 : What is MEAN Stack and How AngularJS fits in here
2:44 : Setting up Environment
14:20: Hangman Game App
18:21 : How to break the requirements
20:27 : Create the Feature #1 which is to make the input and guessed word.
40:54 : Create Feature #2 which is to take the input and validate with a randomly selected letter.
54:50 : Create Feature #3 which is to update the score.
59:05 : App test basic functionality
59:15 : Corner cases and final scenarios
1:07:43 : Our detailed AngularJS course
A Brief About AngularJS
————————————————————
AngularJS (commonly referred to as "Angular.js" or "AngularJS 1.X") is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. In 2014, the original AngularJS team began working on Angular (Application Platform).
The AngularJS framework works by first reading the HTML page, which has additional custom tag attributes embedded into it. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.
According to JavaScript analytics service Libscore, AngularJS is used on the websites of Wolfram Alpha, NBC, Walgreens, Intel, Sprint, ABC News, and about 12,000 other sites out of 1 million tested in October 2016.[3] AngularJS is currently in the top 100 of the most starred projects on GitHub.
AngularJS is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular.js itself, and Node.js server runtime environment.
awesome ajay, thank you. I will promote.
Do you have style sheet code??
no its not loading
It is on Cloud 9, in the preview you can go to inspect Element and copy the entire working code!
Hi, is it possible to be sent the index.html and css files for https://preview.c9users.io/ajaytech/hangman/hangmanApp-master/index.html – as this is not loading for me.
thank you!
Jo
Just a note, Arrays have a prototype function called reduce which would make the conversion to stars a 1-liner like so:
$scope.displayWord = selectedWord.split(”).reduce((acc, val) => acc.concat(‘*’), ”)
regular expressions too 🙂
ya true !
Thanks for the tutorial, i really enjoyed it. I think you could do a second video to continue building what what was shown in the beginning including the css files.
Welcome, Fuh!
There’s a bug in your selectRandomWord function, you should be doing:
var index = Math.floor(Math.random()*words.length);
– instead of using round, use floor
UI5 Community Network
I was getting an overflow using round, wasn’t a frequent occurrence but i noticed it happened a few times within your tutorial but it was overlooked. This issue was fixed using floor, you can try it out in dev console really quickly. Declare an array of 4 elements and try using your function to grab a random index from it, using round will give you an index greater than your bound – although occasionally. Using Math.floor instead will prevent this issue. Hope this helps, thanks again for the video, I found it very helpful!
Hey Timmy Thanks, it may not be a bug but would be considered as an improvement on existing code !
i am having error: [21:58:24.521] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. @ file:///E:/angulardemo/index.html
Use -1 with length in loop which will avoid undefined error
Where to use -1?????
This was driving me nuts so I had to see if anyone else would point it out! He just gets the error. Hits refresh and is like “alright it’s working perfectly”
Awesome Tutorial.Very helpful
This is really good – thank you!
Thank you Mark .
Hi,
Thanks for the video,it was great.
Can you please tell me where can i get the css file for it, or he second video link maybe.
Welcome, Raj!
(Any case all this wont work directly with latest angular. Miss you scope!).
Math.floor will skew the probabilities in favor of the lowest entries. Round is good but just do words.length -1. “Math.round(Math.random()*(words.length-1))”. Also you can add buttons which are alphabets.
HTML:
JS:
controller: $scope.buttons =Array( 26 ).fill( 1 ).map( ( _, i ) => String.fromCharCode( 65 + i ) );
then a function below:
$scope.alphabetclick = function(guess){
$scope.input.letter=guess;
$scope.letterChosen();
}
I have Written the Same Code at 11:36 for app.js but it gives me an error “angular is not defined”.
Like it’s not changing to somestring when i refresh it.
good job man i’m appreciate your work
Awesome video sir
I am not able to get the value of demo on browser even after entering the script tag
very very thank you !
Sir I don’t really understand Javascript I can write basic Jquery only I am a html developer and Photoshop template creator.. These things are going above my head… I have not a science background. I can’t write script I only write very basic Jquery function. I didn’t understand anything. I don’t have var concept. I don’t understand JavaScript I am not from computer science background.
Initially incorrectLettersChosen variable was intialised with empty array? then how we are iterating with its length?
How did you load the js file and index.html file at the same time in Google Chrome?
The app.js file is loaded when the index.html file is opened. The line that binds these two is written in the “index.html” file: within the head tag.
Hey Ajay your explanation is so very amazing… You have drilled lot of concepts with so clear explanation…
Thank You, Richa!