Transcript for:
Notes on Angular Lecture

we will see what is angular few basic things already I explained in the introduction in the introduction we discussed about some basic components about angular I will given overview here actually angular is a angular is a developers platform angler is a developers platform actually many times people have a definition like angular is a framework it is true that it is a framework but it is not just framework it is more than that [Music] so that is the reason angular is better to say it as a developer's platform developers platform means developers platform means it provides all tools that are required for a developer from building to deploying actually developer requires a developers platform developers platform provides end-to-end solution for developer [Music] so that means it provides a complete tool chain tool chain chain it provides a complete tool chain for developer complete tool chain for developer that means it provides tools for building it provides tools for debugging it provides tools for testing and it provides tools for deploying for everything it helps actually tool chain means in any software technology if anybody asks like suppose you are learning Java or dot net to build a software application using Java or dotnet only Java language is enough so only dotnet languages are enough no you need a tool chain means you need a language you need Frameworks you need testing tools do you need servers you need server management tools so many are required that means a language is not enough you need a complete tool chain so angular is like that angular is a complete developers platform developers platform that is you can see the official website angular dot IO this is the official angular and see what they say about angler they say that angular the modern web developers platform so but when you are learning when you are learning about angular in many tutorials people who teach angular they will tell about angular as a framework because they are teaching you only framework that is the reason right but angular contains lot of things so better always say it as a developer's platform right call it as a developer's platform actually Google introduced introduced angular Google introduced the concept of angular right so and maintained by maintained by Google and a large community large community of community of Developers of developers and organizations organizations that means Google introduced Angler but it is maintained it is open source open source means it is maintained by lot of companies because already you know that typescript is a language used by angular typescript belongs to Microsoft angler belongs to Google testing tools belongs to means the testing tools used in angular belongs to Jasmine Karma Jasmine like tools that means a lot of communities are there all the communities are maintaining Google Google is an open source so that means it is means Google's angular is open source so it is maintained by a large community of developers and organizations actually so Google started angularjs they started angularjs so angularjs so with the JavaScript with the JavaScript they started angularjs but it was having a lot of issues a lot of problems were there with angularjs that is the reason uh with the JavaScript in early 2010 2010 till 2010 they introduced this angularjs and made it available to all the people actually angularjs is available with Google before world knows about angularjs I already told you in the introduction actually suppose you see have you seen this Developers developers.google.com do you know this Google developers community [Music] do you have any idea no you know Developers Facebook you know developers Facebook communities also there this is a Facebook developers community this is the community of Facebook developers this is Facebook developers community do you have any idea about what these people do no actually Google developers Facebook developers these are communities you can be a member of that community you can join this community what is the role of this community what these do people do suppose you are using uh Google Play Store in Google Play Store lot of apps are there all all these apps in Play Store are not designed by Google they are designed by some third party people like you developers like you you can build apps and you can give to Google you can go to Facebook if they like your apps you see on Facebook lot of apps recommendations are coming right photo editing mixing something like apps will be coming so those are all not apps designed by Google or Facebook they are developed by various Developers as a developer you can build an app and give to Google if they like your app so it's good then they will put that in the App Store and for that they pay you monetizations you know that Google pays for your YouTube videos Google Play pays for your websites so you have a YouTube channel Google will pay you money for that right so Google pays for apps also that means you develop an app they will pay you if they like and they put the app in the app store now the question is the developers doubt is which technology I should use to build up then Google says that whatever technology you know you use it java.net PHP python anything you build it and give it to us we will take care about it that means you can use any technology so we started building apps for Google we started building apps for Google but we were not satisfied why we were not satisfied because the apps Google bits by itself that means Google have its own apps and we are building apps when we look at both in comparison Google Apps looks more better in interface in performance they are looking more better than the apps that we built then we asked a question to Google what you are using you asked us to use whatever you know but what you are using then Google said that we are we are using a framework called angularjs that means angularjs is one framework which is available with Google before world knows about angularjs from February several years they were using it internally but world doesn't know about it then developers asked Google that why can't you make it open source you make it open source we will also use it then Google said that okay we will make it open source in 2010 they made it open source like that so many things are there with product based companies which you don't know you don't know you don't hear about them outside for example you see you got a job in Google and you worked for five years in Google ten years in Google after that you come out of Google you will be zero as a software developer you are a zero if you worked for Google for 5 10 years and try to come out of it why because in those five ten years you will be working on Google's own product based languages send out those languages are not used anywhere outside then after coming out of Google what you will do where you will apply this kind of issues will be there when you are working in a product based environment that is the reason developers need to wisely choose the companies according to the project blindly not like Google give me a opportunity I will go to Google because Google is world's best right your careers will be in Risk if you are working in a product based companies so many problems will be there so that is the reason point is you need to First understand in that where your role need to will be if you are you're working on a technology which is globally used then it's okay for example like this so many are there I hope you people know uh do language I showed you you you know there is a language called go programming language this is go programming language you may be hearing for the first time but Google it is Google's language used for artificial intelligence it is very much trending now trending now means in future it will trend currently iits people are learning this they are learning so the point here is World completely doesn't know about this language why they are learning that means it may be the future so we don't know we are not sure by the time any another technology comes we don't know but currently this is the future so we are not sure but it will be it may be the future but this is a language not still known to everybody it is internally used you have Google Google have a lot of artificial intelligence everything is done with this language so the point here is angularjs was also similar later world came to know about angularjs that that is the reason when angularjs came everybody started using angularjs but some drawbacks are there what are the drawbacks of angularjs the first important drawback is that means what are the issues with angularjs the issues with angularjs first issue is it is angularjs angularjs is not designed is not designed designed for what you are using it is not designed for what you are using hence hence lot of lot of gaps hence lot of gaps angularjs is not designed for what you are using it is not designed for what you are using that is the reason lot of gaps lot of gaps what does that means so I already told you that angularjs built by Google for for its internal reasons and what developers asked developers said that you give us we will also use it then Google made it as open source and they say that okay you also use it is it developed for you it is not developed for you but you are using it in that case obviously it will have some problems gaps whatever gaps I will tell you see this is very important to understand in software development for example suppose I will give an example suppose like you have super a supermarket a supermarket people they want an application they want an app that means a supermarket people want an app they want to build an app they want app suppose you you are working with a company some software development companies that means like some IBM so or info Wipro or Infosys or so many you are working for any of these companies and you have to build an app for supermarket then which technology we have to use java.net PHP python which technology to use [Music] how a technology is chosen however technology is chosen to build an application actually to choose a technology for building application in our software development companies we prepare one table the table contains details like as is to be to B and Gap we design a table which contains these details as is to be and GAP this is the table first we design is means as is means what your technology is capable of what your technology is capable of 2B means what client wants what client wants Gap means what your technology your technology cannot cannot fulfill that is Gap what your technology is capable of what client wants and what your technology cannot fulfill for example so we have now Technologies like so java.net PHP python like this so many other to build an app we can use these Technologies now generally the question here is which technology to use which technology to use it is decided by this table we have as is UB and Gap as is means what your technology capital of for example see suppose you are learning java.net I ask you can you write a program in Java or dotnet to generate a barcode or to read a barcode can you have you learned how to write a program to generate a barcode or to generate a QR code or to read a barcode or QR code then how you will build an app for supermarket every product have a barcode [Music] then how you will build a supermarket app right how you'll build you haven't learned that but that is the primary requirement in supermarket right I need a gun barcode gun product I can read the barcode it will show the product details on screen your Java your dotnet can show product details on screen but through reading through a barcode it should show the details and you don't know the program then how you will design an app for supermarket is your Java is your dotnet is your PHP python having are these Technologies having or these Technologies having any any kind of any kind of library for a reading barcode or generating barcodes internally they don't have this is Gap we call these are gaps every technology is not capable of doing everything every technology is not capable of doing everything every technology have gaps so if anybody says Java is great.net is great so PHP is great others are not keys and software illiterate dumb software illiterate right why because what you are talking about that means IBM Wipro Infosys have only Java developers nobody else in the world only.net developers nobody else in the world that is silly thing when people talking about this technology is good this technology is not good on what basis you are telling this [Music] right the point is in software companies in one company there will be dotnet projects Java products PHP products python projects all because we choose technology not on its popularity we choose technology but not on how many people are learning we choose Technology based on how much it can satisfy the client requirements right that means for example suppose to build this supermarket app suppose we have like Java it is having some like uh 20 gaps 20 gaps are there suppose we are having like uh some dotnet it is having some 19 gaps or say 22 percent gaps like this we have like PHP it is having two percent gaps then we go with PHP we will not use java.net because somebody said that these are popular right we don't believe in the popularities so how much popular it is in amirpet how much popular it is in Hyderabad these are all rubbish things right is it suitable for that requirements or not that is the primary concept so technically we choose technology So based on gaps and now the question is PHP also two percent gaps then how to fulfill those two percent there are 20 percent gaps how to fulfill those 20 percent we have to depend on lot of third parties we have to depend on third party for example you are learning java.net and you want to write a program for generating barcode they internally don't have that library now you can buy Library you can purchase a library so there are so many people who sell libraries our companies purchases them for example you see Elric so there is a tailoring yeah tellerick.com this is celery it is one of the popular third party you may not heard about this tell Rick you were not heard about but you see these are the customers of telrik NASA is customer of television then you say I don't know tell Rick don't care about you right you don't not angry that's your problem it supports NASA like people that means the software support for NASA and you can imagine their abilities software support for Microsoft software support for IBM you may ask like IBM Microsoft itself software companies now these are supporting them means what it's very simple Point actually suppose you are using a Samsung mobile I hope you people know that the camera lens in Samsung doesn't belong to Samsung you know it belongs to some Carl Jesus lens company world's famous lens company you know that right right then you why you cannot ask like why Samsung itself you can't build a lens right do you know in your mobile you are you are using a mobile with the parts in mobile built by 10 different companies only box says that Samsung but internally it is built by so many people some companies are specialized in a chip they build those chips some special companies or companies are specialized in camera they build cameras right some are specialized in lens the build lens and we assemble all of them and build a device we have a contract with them saying that your supply lines to us you supplied this to us that is how software companies also function in software development your technology is not Capital capable of doing everything your technology have to depend on several third party that means you cannot ask Microsoft IBM why can't you build everything they will say that already we are building so many things we don't want to take that risk somebody is already doing let him do we will borrow from him and we will use right why Google is using a Microsoft language Google has genius developers they can build their own language now right time waste why they have to do all right it is there use it they don't want to take an extra risk of maintaining something new they will they will concentrate on their existing business and others depends on third part you see here you will find so many things for example here you can see here I will take you to the demos here you will have dotnet JSP PHP all related options available you have belong to suppose Java then you have JSP and you see I will open the JSP here you can see Lotus things are there you can see lot of things are there these are all libraries suppose in your Java suppose you see you want a barcode you can see they given a barcode Library here they're given a barcode Library and you can see the source so they are using they are using a barcode Library here they will give you the code but these are not free you have to pay money for using this Library you cannot simply copy and download and use them you need to pay money for that it's not free some are free but for real world projects these free are not enough we need to depend on a lot of third parties everything so many things I given a complex thing even a simple thing suppose have you learned how to design a registration form or a login form in java.net like technology right now the question is what is the threat when it your registration and login form goes online when you host a website real time what is the thread is that registration login form can be used by robots how to prevent robots [Music] by using capture have you learned how to design capture then how that's a very basic requirement on internet you cannot imagine a login registration form without capture and use you are saying that you learned Java and dotnet and you don't know how to design capture then what that means your trainers will teach you how to use the services third party first you finish your technology then they will teach you some third parties those third parties will fulfill certain gaps right in between you will not learn obviously right once you finish your technology at the end your trainer will tell that okay now you learned Java and dotnet now Java and dotnet have these gaps to fulfill you have to learn some third parties then they will train you on some third parties which are regularly used and in companies you have to work with a lot of third parties that you haven't learned in class you have to explore by yourself and use them right technically this is the point why angularjs was a problem in the beginning because it was not designed for us but we are using due to that lot of gaps another problem is it uses it uses JavaScript as a language then already JavaScript drawbacks we learned now it is not what strictly typed it is not strongly typed we discussed at these points and it is not supportive will not support will not support complete Emirate [Music] all these are the issues with angularjs that is the reason what happened is Google started started an alternative alternative technology technology so in 2014 by name Angler angular is different angularjs is different now what Google started is to overcome all these issues they started angular remember angular is not replacement for angularjs as I given here it is an alternative alternative means you can use angularjs or angular and they named it as angular angular 2. before that angularjs angularjs was angularjs was Angular JS 1X versions 1.1 1.2 1.3 like that so even today angularjs is used and required many times people you will hear from your friends or somebody so without proper knowledge they are saying angularjs is outdated now nobody is using right but you see here suppose I will take a look on naukri in naukri site see what we are doing in naukri site I am searching for Java fill stack developer I am searching for Java full stack developer when I am searching for Java's full stack developer here they are asking angularjs and it is TCS and some of your friends said that angularjs is outdated no longer in use that means he is genius then PCS silly foolish things these are all right because many people come and ask regularly sir my friend said my cousin said my brother said whatever they say ask tell them to keep with them right whatever they say tell them that keep your knowledge with you all right that is the best answer for them right that means not TCS one day ago they posted this job now ask TCS to learn from your friend that angularjs is no longer in use he will suggest a new technology that is silly things these are all very silly silly points that you generally come across with your friends and other people in software companies that react is good then angular angular is good then react learn this I hope you many people suggested you to learn Angler and some people suggested you to learn react right saying that this is best this is trending this is this these are all not correct because this this the changing according to the requirements business requirements project requirements everything will be considered right so that means they are asking angularjs unfortunately you are not eligible for this job because you are not learning it you are learning angular right that means you have to learn angularjs separate again but this is for five to seven years experience reasonable why because five to seven years experience means they already might have learned old angularjs they know [Music] and now they know angular but companies still using that angularjs because projects already built and we are using them and in that case we need people with knowledge of old and see some companies are asking for angular only that means when you learn angular when you learn angular you can see some are asking for angularjs and some are asking for angular some are asking for angular and you can see some are asking for angular and react right but and very important is this is also I think TCS only but this time it may be different location different project different location different project they need angular and reactive both knowledge not separate they don't want separate angular and react they want a person with both knowledge angular and react that is the requirements actually technically these are the requirements so you should know that angular is not a replacement angular is just an alternate but it have more advanced features when compared to angularjs we have better options that's the reason we can suggest this as an alternative for angularjs but we cannot force anybody to use angular why because their project is already built in angularjs and it is working fine it may not to upgrade right that is the reason in several companies you may be learning currently which version of java latest version Java 11 I think 11 upgraded version came up recent features came I think Java 11 or 10 but companies are still using Java 8. you know majority dotnet so dot net core but still dotnet is being used without code so there's so many points are there that means every time new version is not used depending on the requirements so angularjs and angular angularjs is different angular is different we are not learning angularjs we are learning angular angular is little bit different Advanced when compared to angularjs have better features when compared to angularjs so but it is not a replacement it is just an alternate alternative technically this is the point you need to understand so for angular two several versions came the latest angler is angular version is 40. 14. the latest angular version is 14. we are going to deal with this version deal with this version we are going to work with this angular 14 version actually angular several versions are there and as per the Google community so versions versions up to up to angular 12. the versions up to angular 12 are no longer up to 11 no longer supported supported and actually angular versions 12 and 13 are currently in LTS LTS means long term support they are going to be in long-term support so that means currently the valid versions of angular are angular 12 angular 13 and angular 14. other versions also your companies may use but it is not supported by Google officially they are outdated now officially not supported that means you see here let's check here angular versions official website will be there are not somebody else yeah angular release guide you can go through here this is angular release guide and in this angular release guide you can you can see the version numbers you can see 12 and 13 are in long term support currently 14 active right all other versions angular version 2 to 11 are no longer under support this is officially from the people who built angular they officially say that you are using older versions of angular we are not responsible any problem comes you take care you can use no problem but we are not responsible for any issues and we don't support any updates or any changes in this you are using still companies are using then they are using on their own risk if they are using a version which is supported then good why because this community will support if any issue will come they will support otherwise no support without support you can use older versions so official 12 and 13 are in LDS and of course they are going to end 13 is going to end in 23. this already ended up not ended still it is there up to November I think it is there up to November it is there that means it will end soon and this is the latest version and this is the latest version this is released in 622. so second that means it is released in June 2nd 22. it is the very latest version and we are going to learn this version we are going to learn this so that is just basic thing you need to know about versions that means up to 11 no longer supported and 12 and 13 are currently in LTS and currently active version is active version active version is the active version is which 140. that is this is the basic point about versions now the question is how angular is different features features of angular what are the features of angular angular is better than angularjs it's previous right what are the key features important is angular angular is modular angular is modular of course I hope you learned all your Technologies are now modular Java have a modular Library dotnet have a modular Library you learn that feature earlier we used to have a legacy libraries now we have a modular libraries modular Library Legacy Library difference is nothing but actually suppose suppose we are having some let's give one simple example suppose a is a function B is a function C is a function B is if some functions are there these functions are present in demo dot some Library right and what we are doing we are building an application we are building an application in this application I want to use the C function in this I want to use the C function then usually what I have to do is import this library in Emirate you have to import this library in order to use that function why you are importing a complete library to use only one function foreign you are using only one function and you are importing a complete library of 5 mb6 MB for that to handle this after all one function this is Legacy all your Technologies for legacy type earlier even java.net all these Technologies are Legacy type earlier some recent years they changed their Library into modular modular means only the library that is needed for that application will be loaded into memory application specific Library framework application specific framework that is called modular earlier your Technologies were not doing that now from past few years they changed their libraries into modular every technology including java.net all these Technologies change their library to a modular Library earlier we don't have modular libraries we were using lot of Legacies Legacy Library means entire library is imported even to handle a small operation now only the library that is required for that will be loaded that means what is modular Library that means we can call application specific application specific specific library application specific Library application specific library that brings only the library that is required for application will be used what is Android advantage of that so applications becomes lightweight applications can render faster as per Google community angular angular is 10 x faster faster than angularjs as per Google itself that means as from the Google community so angular is 10 times faster than angularjs because of its modular approach because of its uh Legacy or not not using Legacy we call as asynchronous a sync a sync library asynchronous libraries asynchronous Library means what is the advantage of asynchronous asynchronous allows to handle multiple tasks at a time earlier you may be hearing about multi-threading very much right but multi-threading now it is becoming extinct almost we rather prefer asynchronous programming than multi-threading java.net all these are now having async approach asynchronous program right this Technologies used in asynchronous approach that means async Library means it allows you to perform multiple tasks simultaneously at the same time that is the async options for example I will tell you one simple concept again here so suppose see so we have means what is async I will give a simple Point here suppose we have a b c d now what is this a it is it is a is so 10 MB and B is some 5 MB and C is some 15 MB and this is 2 MB now what happens is generally when you are accessing here when I make a request to a I need to read from A to B everything so I made a request to a when I made a request to a now what happened is it is 10 MB it is taking more time it is taking more time then generally what happens if it is synchronous it will wait until the 10 MB finished after that then it will go to this second but generally now what happens is in asynchronous approach it will make a request to a and it is taking more time then what it will do is it will make a request to be it will make a request to see it will make a request today it will not wait for response and which one is ready the which one lightweight is ready it will get the response from there this type of approach is called as what asynchronous approach this is called a synchronous approach so this is asynchronous library right asynchronous library is nothing but allows you to perform the tasks multiple at a time so angular is modular angular is lightweight and angular is faster and angular is using a sync library another important is in the latest angular uses it uses aot technique angular uses aot technique aot is actually ahead of time technique ahead of time I hope you learned in JavaScript right JavaScript is just in time jit directly JavaScript is jit just in time we have two techniques we have aot and Justin type actually JavaScript difference that means you see JavaScript basic Technologies two types of compiling techniques are there jit it is just in time two types of techniques another one is aot aot is ahead of time we have two types of technique just in time and ahead of time so what is difference between just in time and ahead of time JavaScript based Technologies they can use these two type of compiling techniques actually what is difference between aot and just in time is generally just in time means what this is the browser that means we are having a browser browser now just in time means whatever the code you written it will compile in browser that means it will load in browser and it will compile in browser that is just in time ahead of time means it will compile in the application before it goes into browser so JavaScript basic Technologies they can use these two type of compiling techniques Just in Time ahead of time these are the two compiling techniques just in time it compiles in browser ahead of time it compiles in application Level not in the browser actually if anybody asked what is Javascript how you define if anyone asks like what is Javascript JavaScript is not a client-side script so don't say JavaScript is playing set script generally that is what people know about JavaScript in learning level now what is the official definition of JavaScript JavaScript is Javascript is Javascript is a just interpreted is an is a lightweight so lightweight light weight and just in time just in time compiled programming language programming language you you will fell down on me now you go back and sit yeah you go back and sit because I am afraid that you will fell on me [Music] one second right [Music] so JavaScript is a lightweight and just in compiled programming language lightweight and just in compiled programming language this is official definition so actually you see who who built JavaScript I told you mdn you know MDM right Brendan ache Brendan egg father of JavaScript mdn belongs to him mdn is Mozilla developers Network JavaScript is built and maintained by this community you can go to this mdn you can see JavaScript is lightweight interpreted just in time compiled programming language that is the official definition of JavaScript JavaScript is lightweight interpreted or just in time compiled programming language JavaScript is not playing set because you may not know JavaScript is used server side also JavaScript is used in database also JavaScript is used in animation software source so don't restrict JavaScript as client-side script because of not having a proper knowledge on it right JavaScript is not a client-side script it's a very big language which can be used server side also it can be used in database files JavaScript is used server side JavaScript is used in databases JavaScript is used flying set you learned only clients it [Music] JavaScript is a lightweight just in time compiled programming language I came to this website to show you what the people who built it says about it right so the point here is why it is called just interpreted it is it is lightweight interpreted right interpreted interpreted and just in time compiled interpreter means line the line translation interpreter means line by line translation just in time means entire program is translated where browser but now angular like Technologies are translating before it reaches browser that's good that is faster the format actually it uses compilers compilers like Babel Babel is a compiler for JavaScript JavaScript basic Technologies use a compiler called Babel so JavaScript compilers we have dabble we have V8 V8 is also very popular compiler actually double is a compiler this Babel compiler is also used so Babel compiled yeah this Babel compiler you can see it is a JavaScript based JavaScript compiler anywhere JavaScript based Technologies this compiler is used even react also uses Babylon angular react view all these Technologies uses same compiler Babel right react and this that is the reason so one interesting point is you can have an application built with a combination of angular and react both [Music] you can have both in one because angular is framework react is Library you can put react library in angular and use that is the ability actual so the because compiler is same right the point here you will learn these kind of techniques so angular is modular not only that it uses aot techniques because of that it is fast so earlier even angular also was using Egypt up to angular 12. from angular 13 14 version onwards it officially started using aot before that determine angular people who haven't learned latest versions they still know about Japan right jit compiling technique but angular latest people know that angular is no longer using jit it is using it aot another important is it is component basic it is component based what is advantage of component basic that means easy easy to reuse easy to reuse it is component based it is easy to reuse that means we can easily reuse it component based is easy to reuse and build it is faster also we can easily reuse and build it is faster for example I will tell you an example component based means for example we have Netflix Netflix is component based all these recent all websites applications are component based on complement based means you see at the top Netflix and drop down and button that is header component you see at the in the middle this is main component in that this is register component register component observed carefully this resistor component is having a text box and button you can scroll down it is repeating that again here now the question is how you can do that will you copy and paste the code you learned HTML you have a screen at the top same I want at the bottom what you have to do you copy and paste that is not good that is not reusability we need to design in such a way that we must able to reuse then you can build it as a component component basically Is Not A New Concept it's a very old thing component based is a very whole thing angular reactor making them easy because component based is already there in your HTML JavaScript also I will tell you one example see component based is a Not A New Concept it is already there component based is already there but now it is made very easy I will show you for example C you learned HTML when you learned HTML I hope you learned like suppose I will take a HTML file yeah suppose here I am using date of birth I am writing input type is equal to date right now see what happens here when I say input type equal to date you can see so much came in the interface just by using the word date how come this much interface comes see this is not just text box it is a text box with some text there is a calendar icon Emirate and when I click on that calendar icon a calendar will open till that I can selected date this date will be stored there this is not an ordinary thing it is a very big component designed actually you may be thinking like it is just a element no it is not element it is component it is a combination of so many things you want to see what it is you can see right click in the page go to inspect now here actually in the settings let me change this yeah actually you go to this here as a ordinary HTML learner what you know about it I will show you see in the body section there is input type date am I right you are thinking that this date is designing all this no if you want to see what is behind it then you go to the settings in the settings scroll down you will find an option Shadow Dom you select the option Shadow Dom and close you see now this date is designed with lot of design you see this is all used to design the date foreign like I am just using a date control you are not using a date control you are using a date component this component is again built with a lot of things what do you think this entire interface is that means you generally think that this is date this is Xbox so in this text box what is happening so we have some month some day Emirate some year like this we are having now beside this there is a icon Emirate actually it is designed with a lot of things that means it is having a span in that it is having 11 understood it is having another span there it is having a slash it is having another Span in that it is having that number and they have they have used a calendar actually this icon this icon is already having in the background on click event on click it is popping up a calendar you are selecting collecting the values storing in that lot of work is going on do you know in real world projects we ask our developers to build components like this at JavaScript level also you can learn how to design such components but it is very risky that so much time consuming process so nobody teaches you about components in JavaScript that is the reason you may you may not know that component is also a part of JavaScript but nobody in the world of JavaScript will teach you about components in JavaScript because it is very risky and in the modern generation we are not directly using them we are not directly using them we are using them with the help of angular and react but without angular react also components will be there components are there if we design application by using components what is advantage to design a date control you don't need to do all this now you don't need to do all this you have to just use the component name that is what angular specialty is that means you can build reusable components and use in any project you want any project you want not only in one project you can build components and give it to other developers who can use your components and build their applications easily that is the advantage of component base and these are all components only when you look at the websites in the modern Generation all are component based suppose you see Netflix when I open this so this is register component here you see there are executioner I click it opens I click on another the previous one will collapse do you know as a web designer do you know what is the name of this component what is the name of this component one click one is expanding another click previous collapsing this one explaining do you know the name of this component it is very popular in web design and generally you are a developer and you may your client will say that we need an this component what is this component name any idea it is called accordion [Music] its name is accordion we call this component as accordion now in real time projects we don't build this ready-made accordions are present we will bring them and put them with our own data for example you see get bootstrap you have a bootstrap website now in this bootstrap you can see so we can have components you can see there is an accordion you see this is accordion component accordion the accordion actually looks like this understood this is accordion this is accordion suppose you have seen in Amazon in Amazon you can see there is a sliding Banner do you know I hope you know this name what it is called as carousel this is called Carousel you see bootstrap have a carousel you see corrosion looks like this this is corrosal this is corrosal [Music] and for that already code is there just you have to bring it and use it customize according to your requirements that's what software development is software development is not about building everything by yourself it will take years of time to do so software development is all about so reusing that means you must able to the first qualification of a software engineer is to be very good in copy pasting that is the first qualification very good in copy pasting and it is not easy copy paste and make changes according to your requirements don't waste time in designing now everybody will waste time in design because sweet development is not they are not checking your talent it's business you have to do work for that they pay you that's it that is not talent show don't try to show your talent there just do the work given to you software development is all about doing the work and don't waste time just use ready-made right nobody will object in that right even officially they say that we have repository here copy and paste from here right you don't write everything don't waste time in writing everything because in the final we need a functionality with design so you have to design it by the time and for that you should not waste time in writing by yourself you will copy paste make changes and attitude that is what you have to do so that is very important for a software developer right and here angular react like technologies will provide such reusable components to you so that you can easily build an application so application building is easy because of component base component basis and what is the component actually component component is rich in design written design rich in size and functionality understood you have to just Implement and customize according to your requirements that is all very important features of angular so what are the key features of angular angular is modular angular is lightweight angular is faster angular uses asynchronous libraries it uses aortic mechanism instead of jit mechanism and it is component based it is easy and faster for building application one more very important you have to know is it is completely completely completely decoupled decoupled from Dome it is completely decoupled from Dome manipulations manipulations this is very important but that is the reason you don't need to depend on a lot of Dom manipulation you learn Dome manipulation get element by ID get element by tag map you don't need that actually it internally internally internally uses Frameworks Frameworks like MVC and mvbm that makes angular more better in interface and better in functionality it internally uses semi you have learned MVC spring [Music] net and Java you will learn if you haven't tried spring MVC server side that is this is client side you have server side MVC you have clients database you will learn client-side how to use this MVC framework so completely decoupled I will show you one simple point you see means actually I will show you this when compared to JavaScript and this here example I will put here see I am installing here let's install so I'm using npm install angular don't worry how to install later I will tell you detail just observe the concept I am trying what is meant by decouple from Dom let's see here I am designing some page I am designing some page here HTML head and title demo and in the body suppose we have some username and we have a text box and we have text and here we have some break okay and after that I will put a paragraph here okay now one simple thing is whenever user is typing name I have to collect the name and I want to display the name here beside hello in paragraph that is the general concept that while typing I have to do that means not button click while typing itself I have to do then in JavaScript what we have to do in JavaScript you have to re write an event what is it on KF so on key up write a function Emirate you have to configure the function we have to collect the value from the text box update into the paragraph get element by ID or tag name you have to use but see now I'm using I am using angular framework here script source is I am using angular framework angular framework I am using here angular framework will so will take control here here you see the text box is having a model called username user contains data in MVC framework model is data and here I am displaying username so am I using any events any functions anything here I am not using anything here let's run this and see here and I am typing here and it is working nothing no even no no manipulation nothing no get element by ID No Tag names nothing and have you observed everything is happening so with this this is making everything happen and this is written inside this angular brace Emirate that means it is taking control of everything within this angle brace within this angular base that is the reason this technology is named as angular this technology is named as angular because it manages everything in those Andover only your JavaScript jQuery have to manage outside Angler they have to manage outside angler and it manages inside angle that is why it is named as angular so why it is called angular angular because it manages everything in an angle it makes the static Dom into a dynamic Dom in just this Angler that is why it is called angular it is configured as angular so the name angular is because of its Behavior it makes everything Dynamic that means why it is called angular so it is it is known as it is known as angular it is known as angular because because it can manage because it can manage everything everything so Within within the angular within this angle so it is it is known as angular because it can manage everything within this angle that is the major concept that means so the angular makes static to Dynamic within it it will manage you don't need to depend on much events and all right this makes its more better and faster and easier you you know already if you learned JavaScript you know that this is far better than JavaScript that is nothing no logic write less logic and more functionalities none of them get element create elements you don't need to do anything it's very simple you will learn so many other things you'll be like that so these are all the features of angle right now how to use this we will see now now what we will see we will learn how to build an application that means now we will see how to set up and install angular on your PC and how do we work with that that we'll see next session tomorrow we will do that from tomorrow we will start practical in angular