AngularJS tutorial – What is AngularJS



this is part one of angularjs tutorial in this video we'll discuss what is angularjs benefits of angularjs and a simple angular example so what is angularjs angularjs is a JavaScript framework that helped us build web applications who developed angularjs Google is the company that developed angularjs angularjs is an open-source project which means it can be freely used changed and shared by anyone angularjs is an excellent framework for building both single page applications and line of business applications many companies are using angular today and there are many public facing websites that are built with angular there's a website called made with angular com that has the list of some of the websites that are built using angularjs so here is that website made with angular com and here you can find some of the popular websites that are built with angular now the obvious question that comes to our mind is within the market we already have several other JavaScript frameworks that helped us build web applications so what is the benefit of using angularjs over those JavaScript frameworks that we already have dependency injection dependency injection is something angularjs does quite well if you're new to the concept of dependency injection don't worry we'll discuss that in detail with examples in a later video to weight data binding one of the most useful feature in angularjs is the two-way data binding the two-way data binding keeps the model and the view in sync at all times so that means a change to the model updates the view automatically and similarly a change to the view updates the model testing testing is an area where angular really shines angular is designed with testing in mind right from the start angular makes it very easy to test any of its components through both unit testing and end-to-end testing so there's really no excuse for not testing any of your angular application code model-view-controller with angular it is very easy to develop applications in a clean MVC way all you have to do is split your application code into MVC components that is the model view and the controller the rest that is managing those MVC components and connecting them together is done by angular automatically and there are many more benefits as well like controlling the behavior of Dom elements using directives and the flexibility that angular filters provide we will discuss directives filters modules routes etc with examples in our upcoming videos in this series to build angular applications we need only one script file and that is angular dot J's to get the script file visit angularjs.org so here is that website on this page you can find the download button so when we click this download button and now we can download the angular J script file and here on this page notice we also have a CDN link there are several benefits of using CDN and you can find those benefits by clicking on this question mark right here so what are the benefits of using a CDN we get better caching decrease the latency and increase the parallelism we discuss these benefits in detail in part 3 of jQuery tutorial so I've already downloaded the angularjs script file and on this website you can also find several resources to learn angular so under this learn tab you can find videos free courses tutorials frequently asked questions etc and under this develop tab you can find API reference this is extremely useful when building angular applications so I've already downloaded the angular JS script file it's present within the scripts folder and I have this HTML page 1 dot HTML page now to get started with angular there are two simple steps the first step is to add a reference to the angular script so I'm going to drag and drop this on my page within the head action so we have a reference to the angular script that's the first step and the second step is to include ng – app attribute somewhere within the HTML so I'm going to include that within the body element so ng – app so the obvious next question that comes to mind is what is this ng – app attribute in angular ng – app is called a directive there are many such directives in angular you can find the complete list of directives on angularjs.org so at the moment and now we are on the API reference page and within this API reference page notice we have directive heading here and at that we have several directives and within the list we should find ng app as well so you know what is this ng prefix within the directive name it stands for angular the ng – app directive is a starting point of angularjs application angular framework will first check for this ng – app directive somewhere in the HTML page if ng – app directive is found then angular bootstraps itself and starts to manage the section of the page that has the ng – app directive at the moment we have included the ng – app directive within the body section so everything within that body section will be managed by angular now what we want to do is we want to compute the sum of 10 plus 20 so 10 plus 20 equals and we want to display the sum of 10 and 20 so I'm including these double curly braces here so what are this in angular terms we call them binding expression so within the double curly braces we can specify any angular expression so I am specifying 10 plus 20 so what is angular going to do it's going to treat that as an expression and add those numbers together so let's save these changes and let's reload this HTML page 1 dot HTML look at that 10 plus 20 equals 30 we get the result of the angular expression that we have within the curly braces so these double curly braces are called binding expression in angular now at the moment if you look at this ng – app attribute this is present at the body tag level and what I'm going to do is actually move that to the development and I'm going to include another development here and let's say within this development we want to compute the sum of 40 plus 50 so 40 plus 50 equals again I'm including the binding expression and we want to compute the sum of 40 50 now look at this the ng – app attribute is present only on this development that means angular is going to manage only that section of the page so that development and any children that development has got for the rest of the page angular is not responsible that means this data binding expression will not be evaluated let's see what we get so I'm going to save the changes and let's go ahead and reload this page look at that the binding expression that we have within the other development that doesn't have the ng – app attribute you know that's not evaluated now let's see what's going to happen if I move this to the HTML tag level so now angular is going to be responsible for all the child elements within that HTML tag that means you know both these binding expressions should be evaluated now let's save our changes reload this page and look at that we get 90 as expected now let's look at a few examples of valid expressions in angular at the moment they using 10 plus 20 40 plus 50 we can use something like this as well 1 double equals 2 is 1 equal to 2 now that evaluates to a boolean false let's actually get rid of 10 plus 20 from there so when we reload this it should say false on the other hand one double equals one yes one is equal to one so in this case it should evaluate to true now we can also use a plain old JavaScript object within the expression so let's include you know an object that has got name property and let's say the name is David and let's say we also have age property and age is let's say 30 and from this plain old JavaScript object I want to retrieve the name property value I can simply do dot name from that javascript object so let's save the changes and when we reload this it should retrieve the name property value which is David we can also use arrays so let's say we have an array here and within the array we have let's say list of names like David and we have Pam and let's include another name Sarah so we have three names within the array and I want the last element so I can specify the index position of the last element which is two so in this case this should return Sarah from the array so let's say what changes we load this page and notice we get Sarah so two requirements to get started with angular add a reference to the script file and include ng – app attribute within the HTML thank you for listening and have a great day

30 Comments

  1. arumugam selvam said:

    Hi Venkat,
    First of all I glad to say thanks to you.
    I'm following yours all Video Tutorials like C#,MVC and so on… all videos are so good and it helpful to everyone who interest to learn new technologies. Now, i'm learning AngularJS. can u explain about Service,Factory,Provider and difference between them in AJS.

    June 30, 2019
    Reply
  2. Hemalkumar Kaklotar said:

    is angularjs is replacement of php. ?? Or it work with php together.

    June 30, 2019
    Reply
  3. Saurav Aggarwal said:

    can anybody tell me what version of Angular is this

    June 30, 2019
    Reply
  4. Amathi Ramaiah chowdary said:

    super

    June 30, 2019
    Reply
  5. Yaseen Afzal said:

    thanks for uploading such nice videos

    June 30, 2019
    Reply
  6. Muhammad Sohail said:

    is it webforms?

    June 30, 2019
    Reply
  7. Neha Wadhawan said:

    It's better if there are no jobs in the market and will face many issues in life better to suicide no other option is there

    June 30, 2019
    Reply
  8. lok lokesh ava said:

    sir ur part 3 vedio is not giving any result….

    June 30, 2019
    Reply
  9. Aditya Kumar said:

    David Apolski, Pam Mahone, Sara Tancredi LOL 😀

    June 30, 2019
    Reply
  10. siva sankar said:

    Sir please sir now explain the how to download angular js they are not download sir now please sir clearly explain in one video sir please

    June 30, 2019
    Reply
  11. Shahul Abdul said:

    too good

    June 30, 2019
    Reply
  12. Saad Momin said:

    Didnt explain about how to start the server. Rest is fine.

    June 30, 2019
    Reply
  13. Abdirahman Hamud Hassan said:

    Thanks a lot Venkat . You are the best teacher ever

    June 30, 2019
    Reply
  14. Andrew DiMola said:

    Thanks! That was an extremely good explanation! Really sets up the basics of what Angular is

    June 30, 2019
    Reply
  15. Roger Michou said:

    Thanks you so much my friend !!

    June 30, 2019
    Reply
  16. Mandar Ghanekar said:

    You are really good at explaining things! My personal goal is to finish this 53 video tutorial in 13 days (4 videos per day!)

    June 30, 2019
    Reply
  17. yuva kishore said:

    it's really good

    June 30, 2019
    Reply
  18. Nalin kumar said:

    can i get help on angular 4 and higher version, waiting for reply ..! thanks man

    June 30, 2019
    Reply
  19. Swaraj Manere said:

    Is this AngularJS tutorial use in Angular 6 or 7 ???????

    June 30, 2019
    Reply
  20. SKY D said:

    You should have explained how to install Angular first.

    June 30, 2019
    Reply
  21. Amadeus Kramer said:

    great, really great! I saw a lot of Videos depending Angula and VS, but this one is by far the best one! Thanks a lot, this was a great help for me!

    June 30, 2019
    Reply
  22. sai avvaru said:

    can u plzz upload react.js sir

    June 30, 2019
    Reply
  23. Mr Offensington said:

    Venkat to the rescue!

    June 30, 2019
    Reply
  24. sandhiya murali said:

    Pls do course for xamarin… As I am following ur videos to learn .net, MVC, webservices, WCF services and Web API I need u to u put xamarin…

    June 30, 2019
    Reply
  25. astha shukla said:

    Hello sir my first angularjs program is not running….

    June 30, 2019
    Reply
  26. Letz by said:

    Hi,
    Thanks for such a great video you put together. I additionally have experienced an awesome method for learning and they have made the whole procedure incredibly straightforward and educational.
    Logon To :https://bit.ly/2MkbD0T

    June 30, 2019
    Reply
  27. I'm broken said:

    Did you provided the complete angular js course sir.?if it complete course then only I will start… otherwise I will stuck in the middle.. please help me…

    June 30, 2019
    Reply
  28. papu dash said:

    Sir. i am following all your videos which are great.so it will be more good if you have your own notes on these topics

    June 30, 2019
    Reply
  29. Gyandeep Sharma said:

    What, If I want to retrieve two values form array like <p>{{{name:'Gyan',Age:25}.name.Age}}</p>
    And thanks for these videos. Really helpful.

    June 30, 2019
    Reply
  30. Galaxy said:

    Many many thanks for all your efforts that you have invested for making these tutorials. I am enjoying programming after watching your tutorials. They are all very clean, understandable and with the detailed explanation to the relevance. God bless you 🙂

    June 30, 2019
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *