Angular Crash Course | Angular Tutorial | Angular Tutorial For Beginners | Simplilearn

angular is a full-fledged javascript front-end framework used to create single-page applications applications like gmail upwork nike and forbes among others are built using angular now there's a great demand for angular developers in the market today so if you wish to learn angular then you're in the right place but before we begin if you haven't subscribed to our channel already make sure to click the subscribe button and the bell icon to never miss an update in this session we're going gonna cover the topic of what is angular i'm sure all of you use mobile and web applications be it from social media to health care e-commerce and net banking these apps are used by billions of people across the globe now the main reason we use these apps is that they offer seamless user experience and interface but how are they developed to provide such reliability one of the frameworks that is widely used to build such robust apps is angular so let's dive into the session now so here is a list of topics that we're going to be covering first up we'll see why angular was introduced then what is angular features of angular angular architecture advantages and limitations of angular the learning curve of angular and finally we'll look at some of the companies that deploy angular so without further delay let's begin why angular now javascript is the most commonly used client-side scripting language it is written into html documents enabling interactions with web pages in many unique ways so as a relatively easy to learn language with almost pervasive support it is exceptionally well suited to develop modern applications but the question arises is javascript ideal for developing single page applications that require modularity testability and other features perhaps not however we have a variety of frameworks and libraries designed to help us with such things with respect to front-end development angular and javascript together bring in structure and consistency to your web applications and also provide scalability and maintainability angular is specifically developed for single page applications so now the question arises what exactly is angular angular is an open source javascript framework written completely in typescript now it was primarily aimed to develop single page applications and is maintained by google angular as a framework provides a few advantages while also providing a standard structure for developers it is designed for web desktop and mobile platforms if you have a doubt here as to what exactly single page applications are let me help you with that now these single page applications are basically applications that get loaded just once so the main page gets loaded onto your browser so any further interactions does not lead to loading of subsequent pages anything that has to be done further is just an addition to the already loaded page so these single page applications are primarily developed using angular moving ahead let's look at the features of angular we have four features that we're going to be discussing we have the document object model type script data binding and testing now let's look at them one by one now the document object model treats an xml or an html document as a tree structure now here every node in the tree structure defines an object representing a part of your document angular uses the regular dom now let's suppose you've made 10 updates on a single html page so every time you make a change the corresponding dom or the tree structure needs to be updated now angular updates the entire tree structure of html tags moving on to our next feature we have typescript now typescript defines a set of types to javascript which helps you write javascript that is easier to understand now all the typescript code compiles down to basic javascript that can run smoothly on any platform now typescript is not mandatory for developing an angular application but it is highly recommended the main reason is highly recommended is that it offers better syntactic structure while making the code base easier to understand and maintain now typescript can be installed as an npm package now to do that you just have to run the command npm install hyphen g type script on your command prompt next up is data binding now data binding is a process that allows you to manipulate web page elements using the web browser now it mainly employs dynamic html and does not require complex scripting or programming it is used in web pages that include interactive components like calculators tutorials games etc now incremental display of a web page makes data binding extremely convenient when pages contain a large amount of data when it comes to angular it uses two-way data binding so any changes meeting the ui element is reflected in the corresponding model state and conversely any changes made in the model state are reflected onto the ui state this allows the framework to connect the dom to the model data via the controller the last feature we're discussing is testing angular uses jasmine to run its various tests the jasmine framework allows various functionalities to write different kinds of test cases karma is a task runner for the tests that use a configuration file to set the startup reporters and testing framework so with that we've covered the features of angular so let's go ahead and understand the architecture of angular angular is a full-fledged mvc framework it provides a strong opinion on how the application should be structured and offers bi-directional data flow and updates to real dom mvc short for model view controller is an architectural pattern that separates the application layer into model view and controller model here relates to all the data related logic view on the other hand is used for ui logic of the application and controller is the brain of the setup now it is an interface between the model and view moving on let's look at the advantages of angular first up we have custom components angular allows you to build your own components that can pack functionality along with rendering logic into reusable pieces data binding as discussed angular allows you to effortlessly move your data from your javascript code to the view and react to user events without having to write any code yourself dependency injection angular allows you to write modular services and have them injected wherever they are needed this greatly improves the testability and reusability of the same don't worry if you can't wrap your head around these topics we're going to discuss them further in the coming videos next advantage is testing angular has been built from the ground up with testability in mind you can literally test every part of your application comprehensive angular is a full-fledged framework and provides out-of-the-box solutions for server communication routing and more lastly we have excellent browser compatibility angular is cross platform and browser compatible an angular application can typically run on all browsers be it chrome firefox safari and platforms like windows mac os and linux now many versions of angular have been released ever since its inception all of these versions have added to the efficient working of the framework now here are two different versions released first up was angular 1. it was built on javascript and completely based on controllers next release was angular 2. now this incorporated the component based approach wherein the entire ui was divided into several components and lastly integrated to give the final logic next was angular 4 it included router updation angular cli or command line interface 1.0 was introduced however not deployed in this release the angular cli was optimized and commands like ng update and ng add were added in the angular 7 release prompts were introduced which provided tips in cli about the functions being used in angular 8 iv renderer and bazel were introduced and finally the most recent release was angular 9. now this came with the better framework and angular material now this completely switched to the iv renderer as a default compiler now that we've learnt about the pros of using angular let's look at some of the limitations of angular first up is a sleep learning curve now since angular is a complete full-fledged framework it becomes difficult for learners to begin with you need to be acquainted with simple topics and then move on to more advanced topics to become proficient in this language next up is limited seo options now angular offers limited seo options and poor accessibility to search engine crawlers it's verbose and complex now a common issue faced by the angular community is the verbosity of the framework it also poses to be complex compared to other front-end tools and lastly migration now one of the drawbacks of angular is poor migration now it becomes difficult to port legacy code to angular style architecture also with each new release it is painful to upgrade and a lot of them are not backward compatible next up let's look at the angular learning curve now if you wish to learn angular you need to be acquainted with basic topics in angular some of them are directives modules declarators components services dependency injection pipes and templates now once you've mastered your basics you will want to go and understand more advanced topics such as change detection zones aot compilation and rx.js however the learning curve of angular is clear cut in the beginning it could be a little intimidating but once you start using the tool it becomes way more easier to comprehend and understand what is going on and lastly let's look at some of the companies that use angular today many top tier companies like nike forbes google hbo sony upwork among others readily deploy angular so moving on let's look at the prerequisites for angular first up we have node.js angular uses node.js as its base for a large part of its build environment so as a result to get started with angular you will need to have nodejs installed on your environment so head to their official website and download the latest release for your corresponding operating system next up is the angular cli now this command line interface is a tool that makes it easier to bootstrap and develop your angular applications now to install the latest version run the command npm install hyphen g at angular front slash cli you got to run this command on your command prompt and finally to confirm installation check for its version now the next thing that you will need is an ide or a text editor to type your code now there are several ides that you can choose from but in this series we've used vs code throughout so it is available on all platforms so go ahead and download it if you haven't already now moving on to the final part is the demo now that you have a basic understanding of angular and its prerequisites i think you're ready to create your first angular application so let's head to our vs code and begin here i've created a folder called angular on my desktop and opened it on my visual studio code so to create your app you need to open the terminal just go here and select new terminal and now type in the command ng new and provide the name for your app so i'm just going to say hello world so now this is going to create just say yes so basically what happens is that when you run the command it will automatically generate a skeleton application under the folder that is hello world in our case and it includes a bunch of files and installs all the necessary dependencies for the angular application so this could take a while so once you've created your application to run it first change the directory so let's say cd hello world and now use the command ng serve now once it's compiled you need to go to your browser and type in localhost 4200. and once you do that you can see your ui you can see that the application has been loaded onto your browser and it says hello world app is running so this is how you create your application so let's go back to our vs code now as you can see here there are many files and folders that are created right so let's look at a few of them of course we can't explain everything but i'll rush through a few of them so the first main component is basically the root component now the root component here is the index.html so here if you open the file and see it's a very small crisp code right but the most important thing in the file is this app root element so what this does is it's basically the marker for loading your application code so this is extremely important so the next important file is the main.ts now this is a part of the bootstrapping piece all right so the index.html file is responsible for deciding which files are to be loaded correct the file on the other hand identifies which angular module is to be loaded when the application starts so this is just a brief explanation as to what they are doing next we have the app folder now here we have the app.module.ts file now this application module file can be thought of as the code configuration of your application so here's where the source code starts from and moving on we have the app.com these are all typescript files hence the extension ts now this file basically is a root component of your application and then we have the html file for the same which defines the appearance of what you can see on your browser so let me just change the message that is being displayed so i'll say hey welcome to this angular tutorial so let's save this and when we go back to our browser we can see the message hey welcome to this angular tutorial being displayed so like this we can make a simple change and then it gets rendered onto your browser so this was just a brief explanation of what happens in the background of your application first we'll get acquainted to what exactly angular components are then i'll help you create an angular component by showing a quick demo and lastly we'll learn about component decorator metadata but before we begin make sure to subscribe to our channel if you love watching new and interesting technology videos also hit the bell icon to never miss an update so what exactly are angular components now i'm sure everybody uses web applications and one of the most widely used applications is gmail correct now to help you understand what components are consider them as lego blocks now they basically are combined together to form the final application so in this case here we have the logo component then you have a sign in component an image component and then a create account component now all of these components generally don't affect the working of each other but however when embedded they define the ui of your application so i hope you understood what components are so to go ahead let's discuss some of its common features now firstly they are the building blocks of an application generally you have a root component which is basically the app component and then it branches out into other components creating a hierarchy and these components are a subset of directives now don't worry about what detectives are because we'll cover them later on in the series but to give you an idea there are three types of directives you have the structural directives the attribute directives and the component directives only one component can be instantiated per element in a template now components are typically custom html elements and each of these elements can instantiate only one component now don't worry you'll understand this better when i show you the demo nextly a typescript class is used to create a component now this class is then decorated with the at component decorator now the decorator accepts a metadata object that gives information about the component now a component must belong to the ng module in order for it to be usable by another component or application and finally components control their runtime behavior by implementing life cycle hooks so this was just a brief introduction to what angular components are now you will only be able to understand the working of components when i show it to you practically so let's head over to a visual studio code now here back in my vs code i've created a folder called angulardemo within which i've created an angular application called demo components once executed the browser looks something like this so if you haven't watched our previous video on getting started with angular that is angular hello world i highly suggest you go through that video first it helps you create your first angular application so um now let's go ahead and create our first component now the command used to create our component is ng gc and your component name once executed it creates four different files now let's just see how this works on rvs code now what you can do is head to your terminal and type in the command ng g c and provide a name for your component for example i'm going to just call my component text component all right so what it does is that it creates four different files you can see you have four different files that have been created and finally it updates the file that is app.module.ts indicating that this new component has been created so here in your source folder within which there's an app folder and again here you can see that your four different files have been created first is the html file where you can define all the code that you want for your component next you have the css file for your styling then you have the dot ts file which includes the component decorator and finally you have spec.ts which is basically a unit test file all right and then in your app.module.ts you can observe that the component that you've created that is text component has been imported that is what the message conveys here all right now let's go back to our app.component.html now this basically has all the code for your application so let me just get rid of it [Music] and i'm just gonna display a basic heading saying hello welcome all right so let me save it and if you go ahead and look at your browser hello welcome message is displayed now let's go back to our component dot html file and here let me provide a message [Music] let me say h three and let me display a message saying welcome to this tutorial on angular components all right now in your text component.ts file which is your typescript file the selector mentioned here is app hyphen text component now go ahead and copy this and in your final component.html go ahead and create your custom html tag with the selector that you just copied now this indicates that the component that you just created that is the text component is being incorporated in the final render so what happens is that whatever is defined in the component.html file is also being rendered in your final output so when i save this let's go ahead and check our browser you can see that the message welcome to this tutorial on angular components is displayed so this was a simple creation of a component now for this let's give it some styling so here go to your dot css file and provide some styling say for example here i just say text line and let me say center and also in my app.component.cs i'm going to give the same thing and say each one text align is center all right so let me save this and there we go now we can also create multiple components and define the tags in the app component now the components are executed sequentially so now let's create another component just to give you a brief insight into it let's say nggc image component now here i'm going to be adding the simply learn logo so i'll show you how that works now you can see that a new component has been created with four files again so in my assets folder here i've added the logo so what i can do is back in my html file i can go ahead and create an image tag so first let me just display another message here just to avoid any confusion and let me say this is the image component [Music] and then let me say image source equals so the source is basically assets [Music] slash logo dot png and class equals center [Music] all right so you can also head to your css file and provide any sort of styling that you need so let me just say text align to be center and then let's create a styling for the image and here i mentioned the code for the image so let's save this and from the dot cs file let's copy the selector and create a custom html tag in our final component.html file so there we go let's save this and check the output and there we go first the hello welcome message is displayed next you have the message displayed from the first component and then you have the second component so this is how you can create your own components and don't forget to incorporate these selectors into your final html file so moving on to our next topic component decorator metadata now as mentioned earlier the at component decorator accepts a metadata object that provides information about the component correct here is a list of properties of the metadata object first up is the selector now basically the selector is a css selector that identifies this particular component in a template now this corresponds to the html tag that is included in the parent component you can create your own html tag however the same has to be included in the parent component so to help you understand that better let's head back to our vs code and say for example in our text component here the selector says text component correct for the time being let's change it to say n component [Music] all right now when you save it and look at the browser the message is not displayed so what we can do is you can copy this selector and then include this here and now you can see that the same component has been rendered onto your output all right so the selector plays a crucial role in that next up we have the template now a template is an inline defined template for the view now the template can be used to provide some particular markup the markup could typically include some headings or paragraphs that are displayed on the ui next up we have template url now it is the url for the external file containing the template for the view so here you can see this is basically the external file that contains the template for the view next up you have styles now these are also inline defined styles that can be applied to the components view so any code that you provide in the dot css file can also be included here next you have the style urls now this is a list of urls to your style sheets that are applied on your components view next up you have providers now this is again an array where certain services can be registered for your component lastly we have animations as the name suggests these are animations that can be listed for your components in today's session we're going to learn all about angular data binding but before we begin if you haven't subscribed to our channel already make sure to hit the subscribe button and the bell icon to never miss an update so now without further ado let's begin so here's what's in store for you first we'll understand what exactly data binding is next we'll understand the types of data binding that is interpolation and property binding event binding and two-way data binding so let's begin what exactly is data binding now i'm sure you must have heard the term data binding quite often now data binding is what is responsible to ensure consistency between the view and your component so it allows an internet user to manipulate all the web page elements in the web browser and it employs dynamic html and does not require any sort of complex scripting or programming it is generally used for web pages that contain interactive components like calculators tutorials and games and lastly it ensures incremental display of a web page now in simple terms what i'm saying is that data binding ensures that any change made in the ui of the application is also reflected in the component and vice versa by doing so data binding ensures consistency throughout the application so now let's have a look at the different types of data binding first up we're going to be learning about interpolation and property binding next even binding and then the two-way data binding so what exactly is interpolation and property data binding now when it comes to interpolation binding it ensures that the values are reflected from the components to the dom in this technique text representing variables and components are placed between double curly braces in the template so angular finds the variable matching the text in the component and replaces the text with the actual value assigned to that particular variable so this could be numbers strings etc so to understand this better let's look at a simple demo back in my vs code i've created a simple angular project and then created a folder called binding all right and i've displayed the message welcome on the screen here so now in my component.ts file i'll create a variable let's call it name say public name equals and i'm going to assign the value simply learn to it all right and here in my html for interpolation what i'm going to do is i'm as mentioned earlier i'll have to include the variable name within curly braces right so i'll say welcome to and within curly braces i'm just going to say name all right and to just beautify the code i'll just center align everything and just say style now here in the browser we can see welcome to simply learn being displayed as you can see this part is being replaced by the value of the variable name which is simply learn all right we can also add another one let's just create another variable and saying public i'm going to say topic and let me see data binding all right and in my html file i'll create now i'm going to display another message saying welcome to the topic tutorial so topic here must be replaced by its value all right so let's see that so let me just save this and have a look at the browser so here you can see that welcome to the data binding tutorial is being displayed so this is a simple example of interpolation binding so now moving on to property binding now again property binding is a one-way mechanism that lets you set the property of a view element now it involves updating the value of a property in the component and binding it to an element in the view template and property binding uses the square braces syntax for data binding so now let's have a look at the simple demo so now i'm going to be creating an image variable and i'm going to provide the path to my logo.png in my assets folder so let me just say slash assets slash logo.png right and now back in my html file i will create a simple image tag image and then i'm going to use property binding for the source property and source equals image all right and now just to beautify the code i'm just going to provide some styling with some height and width and i've also provided the css styling for center so now once once you save the file and have a look at the browser you can see that the image is being displayed with the help of property data binding now you could argue that instead of using property binding you could have just used interpolation binding now however there is one drawback using interpolation binding interpolation binding can only be used for string values when you want to bind boolean values property binding is a better option next up we have even binding so this data binding type is used when information flows from the view to the component when an event is triggered so what happens is that the view sends the data from an event like the click of a button to be used to update the component it is the exact opposite of property binding where the data goes from the component to the view so again the event could be a mouse click or a key press so now let's head to vs code so here i'm going to be creating a button for the click event all right so let's just create a button okay and i'm gonna display the message subscribe to simply learn on it all right and the event is going to be a click event so let me say click and i'm going to pass a function called on click all right so what happens is that when the button is clicked this particular method is called so now let's define the method in our component.ts file so here i'll say on click i'm going to just display a console message saying thank you for subscribing okay so what happens is that i'm binding the click event to the on click method and every time the user clicks on this button the message is displayed so now let's have a look at the browser let's just inspect this first all right in my console now when i click on the button you can see the message thank you for subscribing is displayed so this is how even binding is achieved and lastly let's have a look at two-way data binding now two-way data binding is a mechanism where data flows from the component to the view and back the component and view are always in sync and the changes made on either ends will immediately update both ways now two-way data binding is typically used when dealing with forms where the user input is used to update the component state and vice versa so let's have a look at the demo let me just center align this first let's say div okay all right so first i'm going to be creating a property and let's just call it public value and i'm going to just initialize it to nothing all right and back in my html i'm going to create an input tag of type text and i'm going to bind the value using interpolation all right so basically what we're doing is that every time the user provides a value in the input box that has to be reflected in the model as well so we're making sure that the view and the model are in sync and to make sure this happens we have to make use of the ng model directive so for that i'm just going to provide ng model now one thing to remember is that we have to make use of banana in a box styling for it so first i'm going to make use of parentheses and then square brackets and this needs to be initialized to value all right so let's save this so in the browser when i provide a text in my input box you can see that nothing below is being displayed whatever in the text box whatever i provide in the text box needs to be displayed but although we've used the ng model directive here it still does not display the message that is because ng model directive is a part of the forms module so you have to go ahead and import that in your module.ts file so here just say import forms module form from angular forms and just provide it in your imports add a say forms module save this all right and now let's have a look at the browser so when i provide anything the same is being displayed down which means that our model and our view are in complete sync this is how two-way data binding is achieved first we'll have a look at what's in store for us first we'll understand what exactly dependency injection is then we'll understand the demerit or the drawback of not using dependency injection then we'll understand dependency injection as a design pattern and finally i'll help you understand the entire concept with the help of a demo so let's begin what exactly is dependency injection so let's consider this i'm sure you're aware that angular uses the concept of components the entire ui of the application is divided into several components now what if all of these components perform similar tasks be it accessing the database rendering images etc now instead of writing the same piece of code for every component you could write the code once and then perhaps inject the same code into every component now this is supported by dependency injection now to give you a better example consider two classes a and b now let's assume that a uses the objects of class b and normally in object oriented programming an instance of class b is created so that a can access its objects but using dependency injection we move the creation and binding of dependent objects outside of the class that depend on them so dependency injection or di keeps the core more flexible testable and mutable also classes can inherit external logic without having to create on its own and lastly gi benefits directives pipes and components next up let's have a look at the drawback of not using dependency injection now let's consider class postal details that is dependent on the number and the address class in the postal details class the constructor creates copies of the number and address so when you instantiate a new postal details class the constructor instantiates a unique number and address now although this looks simple there's a problem with this code let's assume that the number and address class constructors now accept parameters when we change the numbers class the postal details class gets broken now to overcome this what we need to do is we need to pass parameter to the number constructor so this applies to address as well the first drawback of using this traditional method is that the code is not very flexible anytime the dependencies change the postal details class needs to be changed as well and the second drawback is that the code is not suitable for testing once you instantiate the new postal details class you get the same number and address even if you change the number and address classes every time what if these classes are in turn dependent on other classes then it's going to be a chain reaction so to overcome this we make use of dependency injection now let's look at di as a pattern dependency injection as you all know is a coding pattern where a class receives its dependencies from an external source rather than creating them on its own so here in the above example we have moved the definition of dependencies from inside the constructor to the constructor's parameters so the postal details class doesn't create the dependencies anymore it just consumes them so the postal dependencies class doesn't create the dependencies anymore so with that we overcome the drawbacks of not using di so now that you know what exactly dependency injection is and how vital it is let's look at a simple demonstration to understand the concept better now services classes modules competence all of these are benefactors of dependency injection so in the demo i'm going to be showing how dependency injection can be used with the help of services and injecting these services into classes so the main thought behind this is normally components are used to ensure just a good user experience these components do not generally execute tasks so to execute these tasks we make use of services so a component can delegate tasks like fetching data from the server any network related issues etc to a particular service and these services can be made available to components with the same thought what i'm going to be doing is i'll be creating a service that performs the task of displaying an employee list later we're going to inject the service into the class using dependency injection so let's head to our visual studio code for the demonstration all right so as discussed i'll have to first create a component that displays a button for the employee and then i have to create a service class and inject it into my component now this service holds the employee details such as name employee id email id etc so first let's go ahead and create a component so here let me just type nggc and the name of the component i'm providing is amp info if getting your learning started is half the battle what if you could do that for free visit scale up by simply learn click on the link in the description to know more alright so as you can see here in my app folder i have the component with four different files all right so the next thing we have to do is we have to create a service so to create that we make use of the command ng g s you can either give s or service and the service name i'm providing is records so let me just say records here all right here you can see two files are created there is a spec.ts file and the dot ts file all right so now the service contains all the employee data that needs to be displayed right so let's go ahead and write the data so first we're going to make use of three arrays i'm going to be displaying employee records for three employees so i'll have to create three arrays and provide certain information so let's go ahead and do that all right so the area i'm creating is called info one for the first employee and i'm going to be passing information like name employee id and the email id so the arrays of type string and within which let me just mention the details i'm giving random information i'm just saying adam taylor and some random employee id and let's say 80 at abc.net all right so i'm going to be creating three records so i'll just copy the same thing and paste for the rest too let's just change here provide a different name here and same for the last one and let me change the name of the area as well all right so with the agenda to retrieve this data in our component we make use of the method for the same right so this method returns the employee data so let's go ahead and create this method i'm going to call it get info and then just say string and then this will just return this dot in four one all right i'm going to be calling it get info 1 for better understanding same for the rest 2 as well i'm just going to return different arrays here all right and lastly info 3 all right now in order to retrieve this information in our component we need three more arrays right three more arrays that will receive this data let's go back to our component dot ts file here and then type in the following code so i've created three arrays again or info received one two and three now what we need to do is we have to accept the information that is being sent from the service correct now as i mentioned services are implemented with the help of dependency injection so what we need to do is we'll have to first import the service into the component.ts file the key reason behind doing this is that when angular creates this component an instance of the service class is also made to perform the necessary tasks correct so let's go ahead and just import it here so i'll say import [Music] records services i'm sorry service from and let's say records.service all right and what we have to do next is that we must also declare this instance that is being created in the providers area of the component all right so let's just say providers and then say records service all right now we've created the instance of this class right however to access this instance an object is also created so this object will in turn access the methods and variables of the service class so for that we have to create another object so let's do that here in our constructor method let's say constructor private and the object i'm creating is called our service you can give a name of your choice and then i'm going to just say records service all right now this object will help me retrieve data from the service so let's go ahead and use this in order to get the employee details all right i've created three different methods here get info from service class 2 1 and 3 and these methods will retrieve the data and add it to our array here that is info received all right and lastly we'll have to create an unordered list in our html file here we haven't added anything so let me get rid of this so now i have to create three different buttons for three different employees and when the user clicks on the button the data is retrieved from the service and then displayed on the ui right so as you can see i've created buttons for three different employees and then i've made use of a bootstrap class called list group info and then i've interpolated info which displays the contents of the info variable all right now in order to call the methods in the dot ts file we have to bind them with the button so since it is bound with the click event every time you click on the button the information is displayed so now the last thing we have to do is we'll have to create a custom html tag for the component and then add it to the main component so let's just do that let me copy this here and then in my appcomponent.html let me get rid of this and then let me just create this i've just created the custom html tag for my component and now just to beautify the code i'll write a heading and let's say employee details and then i'll also add the simply learn logo say image source [Music] i've i've added the image here so let me just say logo dot png i've also added some styling to it all right so now let me just save this and have a look at the browser so here we go we have the logo here and then employee details heading and then we have three different buttons created that is employee one two and three and when i click on it the information of the employee is displayed the name the id and their email address so yeah so this is how you can make use of dependency injection and inject a service class into a component dependency injection plays a crucial role in angular i'm sure you all know that an angular app is divided into several components for example you have the logo component you have the sign in component an image component and say a create account component now these components are standalone and each of them represents a part of the user interface now imagine if all of these components performed common tasks for example accessing the database or rendering images on the view tasks like those now instead of having to write the code for every component you can just make use of angular services now the service can be written once and they're injected into all of these components now a service could be a function it could be a variable or a feature that an application needs so the main use of a service is to write code once and avoid rewriting of it now the same code can be injected into several components that make use of this particular service but what are angular services so normally components are used to ensure a good user experience now that is the extent of it components make sure that whatever is being rendered onto the screen is right and pristine but in order to execute tasks we make use of services and this approach is ideal so a component can basically delegate tasks like fetching data from the server validating user input or logging directly to the console to a particular service and these tasks can be made available to any component in the app so now let's talk about a few features of angular services now typically an angular service is simply a typescript class with an at injectable decorator this decorator tells angular that the class is a service and can be injected into components that need that service now they can be used to share the same piece of code they can also inject other services as dependencies now these services hold valuable business logic and can also be used to interact with the backend now for example if you want to make ajax calls you can have methods to those calls in the service and then use it as a dependency in files and as mentioned earlier it can be used to share data among several components in angular services are singleton meaning that only a single instance of a service gets created and the same instance is used by each and every building block in the application and finally a service can be registered as a part of a module or it can be registered as a part of the component now to register it as a part of the component you'll have to specify it in the provider's array of the module i'm sure you'll understand the concept of services better if we look at a simple demo so in the next section we're going to look at a demo but before that let me tell you the use case so basically in the demo what we'll do is we'll create an employee details list say for example you will have employee information like name employee id and their email id will create a database of say three employees and on the browser when you click on the employee button it displays the information about that particular employee and at the end we can also add information to the employee's details so without delay let's head to our vs code and start learning angular services hands-on so here first i've created a folder called demo underscore angular within which i've created a file called hello world so this was previously used for a tutorial so the name is just hello world so don't get confused however when you look at the browser i've written an initial code here which is angular services and i have the simply learn logo so back in my browser this is what the ui looks like so uh to so to understand the concept of angular services first let's go ahead and create a component so here i'm going to say ng g c e info i'm creating a component for employee information so as you can see inside my app file we have the e info component which has these four files so if you're wondering what exactly components are and how this is working then i highly suggest you watch our competence video first so now let's go ahead and create a service so i'm just typing in the command ng g service here g stands for generate and we're generating the service and the name of the service that i'm providing is data so now it creates a service which is going to be a dot ts file so you can observe that dot service is appended this indicates that it is a service all right as mentioned earlier we have to display the employee details correct so for that in my component.ts file i'm going to create an array that displays the employee information in our case i'm creating uh three different employee records so for that i'll have three different arrays so let me just call the arrays info received one indicating this is the information of first employee and this is going to be of type string and i'll just initialize it to null for now all right and i'm going to create two other arrays and let me just change the name of the arrays all right so now uh to retrieve the information i'll have to create a method again i'm creating three methods for the three different employee records so i'm gonna call the array get info [Music] from service one indicating it's again for employee one and i'm just going to leave it as it is for now i'll tell you how the information is being received and i'm gonna do the same for the other two uh employee records so let me just copy paste and here i'm just going to change the name of the methods all right so this is the initial code for retrieving information however we'll have to create the employee record in our service so back here in my data.ts file what i'm going to do is i'll create three different records for the employees so let me say info 1 which is going to be of type string all right and let me just give a random names say for example i say john matthew [Music] all right and employee id say e 354 and let me just give a random email id and say jm at abc.net all right so i'm gonna do the same for the other two uh records so let me just create another one and call it info 2 and the name i'm providing is say rob listen with a different employee id say 673 and i'm just gonna make it rw at abc.net and another record for employee number three and i'm just gonna say rose adams [Music] with some employee id and an email id all right so now we've created the employee records so what i have to do is i have to create a method that returns these employee records correct so for that i'm just going to create another method called get info 1 which is of type string and it just returns this dot info 1 all right similarly for the rest of the two records i'm just going to retrieve them [Music] let's say in 4 2 and get info 2 and again i'm just going to make it get in for 3 and this is going to return four three all right so i'm sure you've got an idea as to what i'm doing here so basically this information is going to be retrieved in our employee component correct so for that i'll have to make use of dependency injection so here i'll have to import the service that i've created so let's go ahead and say import [Music] the service was data service all right from [Music] slash data dot service all right now the main reason we're doing this is to tell angular that when the component is created the service instance is also created and this instance is being used to perform particular tasks and for that we'll also have to include this in our providers area so here let me just say providers [Music] and let's say data service now to access this instance of service that is created we make use of a property so this property basically allows us to access all the methods that are defined in the service class all right so here in my constructor method i'm just going to say private and you can give any name for your property and here i'm just giving the name d service all right and which is of type data service all right so now with the help of this property i can retrieve information from the service class so here i'm just going to save this dot info received equals this dot d service dot get info one all right so what it basically does is that it calls the get info one method in our service which returns the information of the first employee and this information is being stored in the array that is info received one so similarly for the next two methods i'm just going to use the same piece of code let me just change it here and same for the third one all right so now that we have the logic behind what is being displayed let's go ahead and create the ui for it here in my html file i'm going to create an unordered list [Music] and now i'm going to make use of the ng for director to uh basically loop over the record and display everything so for that i have to make use of a particular variable so i'll just say let info of info received so um you can check here in our ts file the array is info received correct so i'm going to make use of the same array here and since it's displaying the first employee record i'm just going to say info received one all right and let me just create a class a bootstrap class of list group item of list group info and we're just going to have to interpolate in 4 all right that is basically going to display what the information holds what the info variable holds all right and here as well let me create a bootstrap class called list group all right i hope this was clear to you so basically here the information is being retrieved with the help of this method right that is get info from service one so in order to call this method we'll have to bind it with a button all right so that's what we're gonna do let's just copy this and here i'm going to create a button all right and the type is button [Music] with name button again all right so i'm going to bind it with the click event so what happens is that when i click on it this particular method gets called all right i'm just pasting the method here and finally let's just provide the name employee 1 for the button all right so similarly we'll have to do the same for the other two records as well let me just make this look better all right so what i'm gonna do is i'm just gonna paste the same twice and here i'm gonna just change the names i'll say 2 here and this is again for employee 2 and i'm going to change this as well it's going to be employee i'm sorry it's going to be in 4 received 2 this is going to be in 4 received 3 and finally employee 3 all right and lastly we'll have to include the selector that is app hyphen e info in our main component or html so here let me just create a custom tag all right and save this so now let's go back to our browser and see what it looks like so here you can see that three different buttons have been created for employee one two and three and when you click on it it retrieves information that is the name the employee id and their email ids so we've successfully created an angular service and injected it into our component to retrieve information all right so now the last part of the use case that we discussed was uh to add another detail that is the employee detail in the record all right so for that we'll have to take uh input from the user and in our case we're taking the location now uh we're also adding the same location for all three employees so this is what services do you know they can be used to update modify alter anything that happens in the back end so you can tweak the code a little bit and you can change the entire uh view of your application you can add information you can delete you can retrieve you can alter etc all right so for that what we're going to do is back in the html file we'll create a form that basically takes the input so i'm just going to say um [Music] form all right within which i'm going to be defining a div class [Music] within which i'm going to be defining a div tag inside of which i'll have the input tag of type text and the name i'm going to be providing it will be location all right [Music] and we'll have a value and i'll just leave it blank and finally i'll have ng model so if you're confused as to what i'm doing here then i suggest you watch the angular forms video it basically teaches you how to work around with angular forms all right and now after this we're gonna have a button so let me say button [Music] all right [Music] and i'm gonna just say add info okay all right so now when i'm creating the form i'll also have to create a template variable to access all the values within my form so if i have to access the location then i need a variable to access it so here let me just go ahead and create a template variable let me call it frm and i'm going to make use of the ng form directive so this tells angular that this variable can be used to access all the values within the form and since i'm using form here i'll have to import it in my module file so here i just go ahead and say import forms module from angular forms and here in my imports [Music] i'll just say forms module okay so i've imported the forms module so now back in my html file what i'm going to do is that i'll have to make use of this template variable to update my information correct so i'll have to create another method that will update information into the records so here in my component.ts file i'll have to create another method and i'm going to call this method update info method all right and uh this basically takes in the template variable that is form and let me just specify any okay and what this is going to do is that it updates the record correct so i'm going to say this dot d service dot add info now you must be wondering what ad info is i'll just let you know in a minute and and the value that i'm going to be passing will be the value that you've uh provided as an input which is nothing but form dot value dot location all right so now what happens is that i'll have to again specify what add info is and this method is going to be defined in the service uh file correct so here i'm going to create another um method that's add info and i'm going to pass info as a parameter and what this method does is that it just pushes the information or the data into the arrays so since i'm going to be pushing the same information into all of these arrays that is info one in photo and info three i'm just going to say this dot info 1 dot push off info [Music] all right and the same for the other two areas as well let me just change these all right so what exactly i'm doing is that i have i have a method called add info which gets information from the component all right and it basically pushes this information into the array and also i have to return it so i'll say return this dot info [Music] one all right and i'll save it and here we have another method called update info which basically calls uh the add info method in our service and passes the value to it and in my html file also note that the button type here is submit and not button so what happens is that now the value that we've received as an input has to be uh passed on to the method that is update info so here i'll say ng submit and i'm going to call the method update info and i'm going to pass frm as the argument and now let's save this and execute so all right here you can see that we have an input field and a button saying add info so now i can just go ahead and say type usa and when i say add info and when i check on my employee 1 details usa has been added to the list and same goes with employee 2 and employee 3. so i hope this simple demo on angular services helped you understand the concept better i highly recommend you play around and explore other possibilities first we'll understand what angular forms are then we'll look at the different types of form building supported by angular next up we'll get acquainted with features like form control and group control and we learn all of this with the help of a simple demo so without further ado let's begin so what exactly are angular forms now i'm sure every application that you use comes with certain amount of form filling correct be it your login credentials or your sign up forms or any sort of registration forms etc so forms are an integral part of a web application you need forms to update your profile or to enter sensitive information or also to perform any sort of data related tasks so now let's look at the different types of form building supported by angular first up angular supports two types of form building first you have the template driven approach and second you have the reactive approach now let's look at them one by one so talking about template driven approach in this method the conventional form tag is used to create forms so angular automatically interprets and creates a form object with the help of the directives now controls can be added to the form using the ng model tag now multiple controls can be grouped using the ng control group module so it basically uses several module classes to provide controls now if you don't get this don't worry you'll understand better when i'm showing you the demo next up is json values so form value can be generated using the form dot value object form data is exported as json values when the submit method is called lastly basic html validations can be used to validate the form fields in the case of custom validations directives can be used so arguably this method is the simplest way to create an angular form so moving on to the active approach now this approach is the programming paradigm revolving around data flows and propagation of change now with reactive forms the component directly manages the data flows between the form controls and the data models now reactive forms are code driven unlike template driven approach reactive forms eliminate the anti pattern of updating the data model by a two-way data binding so it does not use two-way data binding and typically a reactive form control creation is synchronous and can be unit tested with synchronous programming techniques so now let's go ahead and look at form control and form group so consider a typical form consisting of fields like name age and location now a form control is basically a class that enables validation of these fields for each input field an instance of this class is created now these instances help check the values of the field and see if they are either touched untouched dirty pristine valid invalid and so on so this allows you to check every field for the value it makes it easier to understand which field's value is invalid or which field has not been entered etc now moving on to form group so a form group class represents a group of controls a form can have multiple group controls the form group returns true if all the controls are valid and provides validation errors if there are any so i hope this was clear so moving ahead let's look at the demo to explain all of these features i'm sure it will become extremely clear once you look at the demo so for that let's head to our vs code so back in my vs code i've created a component called form component and um i've also included the simply learn logo just to beautify the appearance so once you execute the code this is what you're going to see on your browser so you just have the logo at the moment the first thing we need to do is we'll have to import the forms module all right so oh uh but before we begin let me tell you what the use case is so we're going to be creating a user registration form which is going to include four fields that is the first name last name email id and a password all right so now let me show you how to import the forms module so in your main app.module.ts file you will have to import forms module from angularforms all right and then in your imports you'll have to just call it here all right so this is just a simple step and now once you're done with that let's go ahead and start our form creation so here in my component.html let's enclose the entire form within a div tag so here let me say div class is a container within which let me just have one heading it says user registration all right and now let's go ahead and create our form so first let me just say form now i'm going to create a div class for every field so say div class equals form group i'll explain it to you a little later now first let's create a label so label tag for basically it's the first name so let me just say first name and the tab will basically have first name again all right and let me just break the line next we have the field so let's say input type is text name is first name and we have a class which is the form control class all right so this we have to do for all the other fields so let me just copy this and paste it like four times i'll also add the tag three for spacing let's do that here and finally we'll have the button so let's just add that here with a type submit let's just say submit on the button so now let's go ahead and change these values here so here let me just change it to last name here as well and here as well and in this case it is going to be email so let me just change it here and finally we have passwords so let's add that here all right so let's save this and just have a look at our browser so there we go we have our user registration form ready but i would like to align it to the center so let me just do that so here in my css file i'm just going to uh align all the div tags the center and the label tag to the left so let me save this and look at the browser now and there we go we have our registration form with a logo so this is how you create a simple form now we'll have to add a directive called ng model now this directive when added into the input tag will provide form controls to every input field all right so here let's just go ahead and say ng model that is it so let me just copy this and paste it for every other field all right let me save this and back in my browser let me inspect and here you can see different types of classes like ng untouched ng pristine ng ballot are added right so this indicates that angular has recognized the form tab and it has added these classes to the form as well as all the fields so this is achieved when you add the ng model directive in your input tag now back in my vs code now every form has an output property attached to it called ng submit all right so this property can be bound within a method that method called the sub bit method so once submitted this method is called right so once we click on the submit button this method has to be called so to include that we'll have to just say form ng submit equals submit [Music] all right so now we have to define the submit method in our component.ts file so here let me just go to our component.ts file and let me just get rid of unnecessary code here and let's define a function or submit and then here let me just console.log form submitted all right so let me just get rid of this as well it's unnecessary here let's save this so what it means is that every time you click on the submit button this method is called all right so let's just have a look at the browser so first let's go to our console and when i click on submit it says form submitted all right so the next crucial step is to generate javascript representation now we'll have to make use of another directive called ng form that is assigned to a template variable okay so this javascript representation helps with validating all the fields so i'll help you understand that better so back in our html file let's just create a variable first let's call it login all right and say ng form okay now the mgform object includes the javascript representation so now while you're calling the submit method you're going to pass login as a parameter so let's just say login here and in my ts file again let's just say login and along with it i want login to be displayed so i say login again so now let's save this and if you have a look at the browser let's click on submit and now here you can see the javascript representation so within form i can check for email or say first name and here for this field first name you can see different properties attached you can see invalid is it invalid or is it untouched which is true or are there any errors so this basically gives you all information about the particular field so we can make use of this feature to validate the information so we're going to learn about that in our next segment moving on to form validation one way to ensure that incorrect fields are not submitted is by disabling the submit button correct now apart from this you can also specify certain properties in your input tag for the corresponding input field now um let's say that the fields that now let's say that the fields can't be empty and the form only accepts names with the minimum length of 2 and the maximum length of 7 all right so here in my input tag i just mentioned required meaning this field cannot be empty and min length to 2 and max length to say 7 all right so to check this let's go to our browser and here let me submit the form without filling the first name and evidently there has to be an error so when i submit it and i look here what's in forms and here controls and my first name you can see that an error is shown here it says required equals true that means that there is one error now you can make use of these form control objects you can leverage form control objects to ensure field validation and display a message whenever an error occurs right so to do that you need to access these objects like errors or invalid or touched all of these properties or objects need to be accessed for that we'll have to create a template variable and then this variable is assigned to this object so back in our vs code let's create a variable let me call it name and let's say ng model all right here the variable name receives the control object so here back in my browser when i submit again without the first name you can see that the invalid property is set to true correct so this helps us use this property to alert the user with the help of a simple if logic so back in my vs code let me create another div tag within which i mentioned ng if within which i'm going to use a simple if logic so let's say mgf name which is our template variable name dot touched and name dot invalid is true right then i'm going to alert so i'm going to make use of an alert here let's say alert danger all right so in my css file i'll have to mention the simple styling for alert so here let me just say so we're going to have the background color red for danger all right and here i'm going to display the message invalid in bold so now let's go back to our browser and check it so let me proceed without entering the last name it says invalid here so this was a simple demonstration to show you form validation of course you can modify the code depending on your requirement say suppose the length of the first name is too short then you can alert the user with a different message or suppose they have missed out on filling a form field then you can again alert the user so you can basically make use of the nested if condition right now just try and help you understand that better let me just show it to you now back in my html file instead of invalid let me have another tag a paragraph tag within which i make use of ng if again now ng if name dot errors [Music] dot required is true then i display the message first name required all right and if the length of the first name is [Music] not 2 now the length of the first name is less than 2 then i'm going to display another message so let me just say name dot errors dot min length if this is true then i'm going to say sorry short first name all right so let's save this and have a look at the browser when i proceed without providing the name it says first name required but when i type in one character it says sorry short first name but if i type in another character it accepts so i hope this made you understand how form validation works so this was just a simple demonstration again now i highly recommend you explore these properties and play around with these objects uh trust me it's really fun so i hope this tutorial helped you out let's understand what exactly is bootstrap bootstrap is a powerful toolkit basically a collection of html css and javascript tools for creating and building responsive web applications and pages it is a free and open source project based on github and originally created by twitter now to put it more easily bootstrap is a giant collection of handy reusable bits of code written in html css and javascript it's also a front-end development framework that enables developers and beginners to design quick and responsive websites now there are several advantages to using bootstrap to name a few bootstrap comes with a responsive grid you don't have to spend time working on your layouts bootstrap comes with its own code for automatically resizing images based on the current screen size it also comes with different components that you can use for your web page these components could be navigation bars drop downs progress bars thumbnails etc it also offers excellent documentation and is customizable so bootstrap comes in extremely handy to create responsive user interface so now before using bootstrap it needs to be embedded into your application so let's see how to embed bootstrap into angular now there are two ways to do it first up is by using the bootstrap cdn or the content delivery network now this enables users to load css javascript and images remotely from its servers the other method is to use bootstrap npm bootstrap jquery and other packages and frameworks can be installed via the command prompt in the tutorial that i'm going to be showing you i've embedded bootstrap using npm all right so i'm sure you only understand the concept better when you look at a demo so let's go ahead and create an application with the help of angular bootstrap so in this tutorial what i'm going to be showing is the creation of a blog post so uh let me show you what we're going to be doing so here i've created a simple blog for simply learn and i've added the simply learn logo i've also written a few lines about simply learn and what they offer i've also mentioned their tag line and when you scroll down you can see that i've mentioned the different courses they're offering and when you click on the more info button it navigates to the official page that gives you the overview for that particular course so this is for lean six sigma the same for full stack web development as well and uh the same for the last one that is cyber security and finally i have added a simple video here to just make it more beautiful so i've added a simple video and lastly i've also linked our youtube channel so when you click on the youtube icon it will navigate to the youtube channel to our youtube channel here all right so this is what we're going to be creating using angular bootstrap so i'm hoping you're all ready for it so without further delay let's jump in so first let's find the template that we want to use for our blog so for that i'm going to just go ahead and say bootstrap blog template and i'm just going to click on the first link that i get and here you can choose the template that you like so i'm just going to look for more templates here and the one that we are going to choose is oh yeah this one so which is small businesses so you can go ahead and click on that you can then click on live preview and once you do that you can just say view frame source so here you can see that the html code is available it has the head section and then the body section so the head section consists of a lot of meta tags and then you have the title and then you also have the css file references and then if you look at the body tag you have different code for different parts of the ui there's code for navigation bar and then you have page content code heading row call to action and all of that and lastly you have the footer so what we're going to be doing is that we'll take all of the code and then we'll have to create components for each of it and then we'll include all the components in our main html file so that is the best practice that angular uses so we're going to make use of components and you can also see that when you scroll down you can see that it has certain dependencies so here it has the bootstrap dependency and then you have jquery so we have to download them so we'll have to install them uh and as mentioned earlier we're going to be installing them with the help of npm so for that we'll have to head back to our vs code here back in my vs code i've created a folder called angulardemo and then i've also created a file called demo components and here i'm just going to say cd demo components within which i'll say npm install jquery [Music] so this could take a while and once you've installed jquery go ahead and type npm install bootstrap all right so we've successfully installed jquery and bootstrap so now we need to add the references to these javascript files to do that go to your angular.json file and here we have to add them in our build section so here you can see we have styles and scripts so in our scripts array we define the relative path to these javascript files so these files are generally stored in your node modules so go ahead and here you can look for bootstrap here you go and then in your dist file and then click on js and then you can see you have bootstrap.min.js oh well i'm sorry we need bootstrap.bundle.min.js so here you can just right click and say copy relative path and back in my json file in my scripts i'm gonna just paste it here and make sure to make it a path by providing by providing forward slash [Music] all right and then the next thing we need is the jquery.min.js files so for that again in our node modules you will have to look for jquery so here there's jquery and then click on dist and then we have jquery.min.js so again let me just copy the path and paste it here [Music] follow the same procedure for this as well [Music] all right so we've embedded both our files in our angular.json file so now in our code here in the beginning they've also included the css file so we'll have to embed that as well so here back in bootstrap let me just add the css file as well that's bootstrap.min.css i'm just going to copy the relative path and just provide it here [Music] let me just change these to forward slash [Music] okay so we have our custom style sheet so what i'm gonna do is i'm just gonna copy this and just paste it in our and then you can just paste it here all right so i think we've added all the dependencies and the custom style sheet and everything so now let me just close all of these files what we can do now is that we can go ahead and take the code from the source here so i'm just going to copy the body tag all right so i'm going to copy this till the footer and then i'm just going to paste it in my component.html file [Music] so as mentioned earlier i will create components and then place the code for specific parts of the ui in these components so let me just see if i've got everything here okay so i'll be creating four components the first one will be for the navigation bar the second will be for the introduction and then the third one will be uh to display the courses that we're providing and then lastly we'll have the footer component right so first let's create these components i've also created a components folder here in my app folder so i just have to type in the command ngc first we'll create the component for the top navigation bar so i'm just saying nggc so i'm just gonna say components [Music] slash nav bar [Music] all right so uh the component has been created so what i'm going to do is i'll just copy this [Music] and paste it here [Music] all right and the next component i'm going to be creating is for the introduction right so i'll say ng g c [Music] components slash intro all right so so i will have to take this code here i'm also going to be including the call to action part so i'll just copy paste this one in my intro.html file let me do that and then i'm going to have the main course content component so for that i'll say nggc components slash courses [Music] and we're going to copy the next part of the code [Music] all right until till the footer [Music] let me just add it here and finally we're going to create the component for the footer so i'll say ngc components slash footer and the last part of the code i'm just going to add it there [Music] all right so now we'll have to create the custom html tags for these components and then place it in our html file right so first one that we created was the navigation bar so here head over to the ts file just copied the selector [Music] and then here and then in our app.component let me just create the tags similarly for intro [Music] just gonna copy the selector [Music] and then for courses so yeah app hyphen courses that is well and then lastly we have the footer component so let me just copy that paste it here [Music] all right so we've included all the components so let's just run this application and see if everything is displayed intact so here let me just say ng serve so when you execute the command you can see that the template is being displayed so you have the navigation bar you have the intro component and then we have the courses component and finally we have the footer component right okay so now that we have the template ready we can go ahead and customize it according to our needs so now i'm going to be making a few changes to the code we're going to add the simply learn logo we're going to change the tag line here we're going to display something else over here all right so let's go back to our vs code to customize and display the final output so here the first thing that i'm going to be doing is changing the message here i'm going to display simply learn for that in our navbar component let's go to the html code and here instead of start bootstrap let me just type in simply learn [Music] all right so when you save it and when you look at the browser you can see that simply learn is displayed and the next thing that i want to do is i want to add the image right i simply learn logo so what i've done here is i've already added the logo dot png file in my assets folder so i'll just go ahead and provide the path to this so that's going to be in our intro files so here image source is going to be [Music] assets slash [Music] logo.png so let me save this so there we go the logo is displayed so the next thing is we'll have to change this part of the ui so the information that i want to display is this i'm going to be displaying walls number one online boot camp and other information so what i'm going to do is back in my vs code i'm just going to delete this and instead of that i'm just gonna copy this that's world's number one online bootcamp and then within the paragraph tag i'll display something else so let me get rid of this [Music] let me just copy the information that i want to display paste it here and let me just give a line break [Music] let me save this and see if it's displayed so yeah we can see that the information is being displayed next up here instead of displaying call to action message i'm going to display a explore programs message so let's go back to our vs code let me just say explore programs here and then lastly instead of this message here i want to display the message uh get certified get ahead without programs so back in rvs code i'm just going to get rid of this [Music] and paste this instead so when you have a look at the browser let me refresh this you can see it displays the message get certified get ahead and all of that well now what i'm going to do is i'm really not happy with the font size and everything so i'm just go ahead and add certain styling you can customize this and provide your own font size and all of that so here i'm just going to mention style and then say font size and i'm going to make it x x large all right so let's see [Music] yeah all right so it's the font size has increased so i think i'm happy with this all right so the next thing we have to do is add information here for our courses so back in our vs code we'll have to go to the courses component so here i'm going to just uh type in the code for the different courses so i already have it here so the first thing is this message that i want to display let me just copy that and for our first tag i'm just going to say postgraduate program ending six sigma and the next information i'm going to be providing is the duration so here let me just get rid of this paste that here let me just break the line to beautify the code and then and here for our reference link i already have the link here so i'm just going to paste that so once you click on the more info button it will automatically navigate to this page all right so let me save this next up i'm going to do the same for the other two courses as well so it says post graduate program in full stack development and then we're going to mention the duration and the cohort so let me paste that and also provide a blind break and then link i have it here so i'm just going to paste that [Music] and finally for the third card i have the third link here [Music] let me get rid of this extra core and paste this instead [Music] and then let's also provide the link for the same [Music] all right so let me save this and have a look at the browser so you can see that uh the information has been added you can see it displays postgraduate program in lean six sigma full stack development and cyber security so once i click on more info it leads you to that page that shows the overview all right so now the next thing on the agenda was to uh display a short video and then the link to our youtube channel so let's go ahead and add that in our courses component uh so what i'm going to do is i'm just going to get the code to add a video from google and then i'm going to provide the source which is going to be the video that i would want to display so i've received the code i'm just going to paste it here so you can get the code uh on google so go ahead and just paste that also for the source i have a video in my assets folder which i have provided here so when i save it and look at the browser here we go you can see the video here all right and once clicked it starts playing [Applause] [Music] all right and lastly we'll have to provide the logo for youtube and then the link to navigate to the youtube page so let's go ahead and do that so here again i've pasted the code for the youtube logo so here you can see that i've added the image that is youtube.png in my assets folder and i've provided the source and accordingly i've also added the styling i've provided a white background and i've also aligned the text to the center of the page all right and i've also displayed the message saying check out our youtube channel for technical videos and tutorials and then i've provided the link to our channel on youtube so let me just save this and head back to the browser and here you can see that we have the youtube logo and we have the message displayed so once you click on the logo it navigates to the simply learn channel on youtube all right so uh if you want you can also change the message here for the footer so here in footer.html i can just remove this and paste this i say simply learn solutions and all rights reserved when i save it and look at the browser it must get updated so yeah there we go so with the help of bootstrap we have successfully created a website which is basically a blog and we've also added the reference links and images and logos to customize it according to our requirements so yeah this is it this is how you make use of bootstrap and embed it into your angular for more responsive and better user interface let's have a look at the basics of routing now i'm sure that you observed that the url changes every time you click on a particular link or on an icon on the user interface correct now this basically indicates that you are navigating throughout the application now to achieve this navigation we use a mechanism called routing routing is essentially used to navigate through a website or a web application but how is it achieved in angular especially in angular routing plays a major role it is used to create single page applications now these applications are loaded just once and new content is added dynamically applications like google facebook twitter and gmail are a few examples of single page applications the best part of using single page applications is that it provides an excellent user experience and you don't even have to wait for new pages to load which by extension makes single page applications extremely fast but how is this new content loaded enter routing now routing is the mechanism that as discussed earlier that is used to navigate through the application and load new content routing helps angular configure the route and the component that needs to be displayed now i'm sure you're going to understand the concept of routing better when you work on it hands-on so in the demo we're going to be navigating to the login and the home pages of a web application with the help of routing so let's head to our visual studio code so basically the objective of our application is to navigate to home and the login pages so when i click on the login icon here it loads the login page and here you can see the extension slash login and similarly with home once you click on it some new information gets added and the url changes with the slash home appended all right so this is the main objective of our application so to create it let's head back to our vs code all right so here i've created a folder called demo and underscore angular and i've created a file called demo routing now the first thing you want to do is open the index.html file and make sure that the base tag is added now although this is generally added when your app is created if it is not then add a base tag with href attribute which is set to a forward slash all right now this is generally done to tell angular to construct the url while navigating with a forward slash all right and the next thing you want to do is open your app.module.ts file and check if the app routing module has been imported if not go ahead and import it and then also mention it in your imports array with that the initial setup is done now to create the nav bar the code that i'm going to be using is already explained in the previous video that is angular bootstrap i highly suggest you go through that video before watching this so the code is already available i'm just going to create a component and write the code for it and paste the code in it so let's do that let me say nggc nav bar [Music] all right so this component is now created now here in my html file i'll just get rid of this and paste the code for the nav bar so here we go i've pasted the code for the navigation bar and back in my app.component.html file i'll just remove all the unwanted code here and just specify the custom html tag for my navbar so let me just create one here all right let me save this let me just run the application and see if it's displaying correctly all right so when i open the browser the navigation bar has been created along with these different options that's home about services and login all right and we also have the simply learn icon here all right now the next step is to generate the components to display the login page content and the home page content now again i have used bootstrap to define the user interface for these files you can easily find the code online just search for bootstrap login templates and depending on your requirements you can choose the appropriate one so first let's create the components for my two files that is for the home component and the login component so let's go ahead and do that [Music] ngc i'm just going to call it login for my login component all right and then i'm going to say nggc home for the home component all right so i'm just going to copy the code for the login component so back in my login.html file i'll just paste the code here okay also note that i've added the simply learn logo in my assets folder and then just provided the source for it here in my login component all right so next up is the home component and if you've seen the previous video that is angular bootstrap you might have seen that we created three different components that is intro courses and footer which included the content for the intro message for the courses and the footer message correct so here we're going to just paste the code for all of these three and then just display it when the home button is clicked all right so what i'm going to do is i'll just paste it here [Music] so this basically has all the content one thing i want to tell you is that in the previous video we made sure that the code was written in three different components however for this i've just added all the code in the same component now i agree that this is not the best practice so if you want you can go ahead and create three different components and separate the code into these three components and just add the custom html tags in your home component i'm just hoping you're following me right now and also here in my assets folder i've added a video and the youtube logo that needs to be displayed when the home icon is clicked all right so now that we've created the home and the login components the next step is to configure the routes for the application right so here you can see that we have a file called app routing module.ts file so here we have the routes and the router module that is imported and we also have a constant called routes which is strongly typed to routes from the router package all right now this array is used to define all the possible routes in the application now each route is basically an object with a path so here in my routes array i'm just going to go ahead and create the paths that is we have two different routes right one is for login and one is for home so i'm just going to create a path object so let's say path sorry within curly braces i say path [Music] and then the path that i'm going to give is login this is basically what will appear uh on the url all right and the component that needs to be navigated to is nothing but the login component so let me just say login component as you can see the login component has been automatically imported now same with the home path so let me just say path home and the component that needs to be rendered is the home component [Music] all right now the next step is to link these routes to a button in the nav bar that is the home and the login button right so we're going to make use of the nav tag and an anchor tag for this you can see that we have a nav tag and an anchor tag which encloses the login and the home components all right now we're going to make use of two directors from the router package called router link and router link active now these are specified within the anchor tag the router link basically holds the path to the page and the latter that is the router link active specifies one or more css classes that will be applied when the router link is active all right so to do that let me just add router link all right in our case it is home here and we're going to have another director called router link active [Music] and we're just going to save active here [Music] all right same for the login icon here let me just copy this [Music] and instead of home the path we created for this was login [Music] all right so this is how you can bind the route to your specific button on your ui now despite of all this how are we specifying where these components are to be displayed right the answer to this is using the router outlet directive now again this directive is available in the router package so we have to add that in our app component.html file so here just go ahead and type router outlet all right so with that we've created a simple navigation bar which has different options that is home about services and link and once the user clicks on the home icon it displays the content that is in the home component homecomponent.html file and once the user clicks on the login component it displays the content in the login.html file all right it's as simple as that so now let's go to the browser and see if it executes correctly so all right we have the navigation bar and once i click on the home i can hear all right yes we see that all the content has been loaded you can see we have uh the intro section we have the courses section and the footer section as discussed and the most important part is that here in our url you can see that slash home has been appended this shows that a route has been created that navigates to the home component so we've successfully created a route here and for login component when i click on this icon you can see that the path changes here and the login component gets displayed all right so this is how routing is achieved in angular and with that we come to the end of this session if you have any doubts or queries regarding this topic let us know in the comment section so thank you so much for being here and watch out for more videos on the angular series until then keep learning and stay tuned to simply learn hi there if you like this video subscribe to the simply learn youtube channel and click here to watch similar videos turn it up and get certified click here

Channel: Simplilearn

Views: 5,954

Keywords: angular crash course, angular tutorial, angular tutorial for beginners, angular crash course for beginners, angular crash course with project, angular course for beginners, angular course with project, angular course 2021, angular course free, angular training, angular training for beginners, angular training online free, what is angular and why use it, what is angular and how it works, what is angular, angularjs, learn angular, angular project, simplilearn angular, simplilearn

Id: oRj9pg3Tyi0

Length: 139min 17sec (8357 seconds)

Published: Sat Nov 20 2021