Importing Project in Visual Studio Code

-

 In Previous section Angular Application with Angular CLI we have created project todoList now we will import it in our visual Studio Code.

we can do it by drag and drop folder in visual studio or by using open folder from visual Studio code as shown below:



open readme.md file you can see the project details like host, cli version and other things.


Previous Topic(Create Angular Application)                                 Next Topic (Angular CLI Command)

Comments

Post a Comment

Popular posts from this blog

Installing Node Js (NPM) & Visual Studio Code

-
Image
1. For Installing Node Js, Search Download Node Js or go to  Download Node Js  , Based on your operating System Download the respective files. Once You download and install it you can verify it by opening Terminal or Command Prompt and typing "npm -v" for npm version and "node -v" node version as shown below: 2. For Installing Visual Studio Code Search Download Visual Studio Code in Google or go to  Download Visual Studio Code Based on your Operating System download Respective files and install it, it will take few minutes to install. After installation open visual Studio Code it will look like below                                                                                              ...
Read more

Header, Menu and Footer Component with CSS

-
Image
In Previous topic we have learned angular modules and bootstrap. In this topic we will create menu and footer component for our todoList application and add some bootstrap css in it. So let's create our menu and footer component by using command "ng generate component menu",  "ng generate component header"   and "ng generate component footer" using command prompt at your project location as below: once these component are created add some hardcoded value in html files for all and then you have to add the tag name for header, menu and footer component in root component i.e. app.component.html as below and refresh your localhost. Menu Component: Now we will look into Menu Component and some link for login, logout, todos and other. For this we need to update our menu.component.html file as below, we will use router link for routing from one page to another and href for external URL. Header Component: target="_blank" will open the link in new tab...
Read more

Authentication and Session Storage

-
Image
In this topic we will create our authentication service, use session storage and we will enable menu links based on user authentication. Let's create a service by using command "ng generate service foldername/servicefilename", always create services in a folder otherwise it will create everything in src folder and it is very difficult to track it. Now create our authentication service so the command will be "ng generate service service/hardcodedAuthentication", make sure you are in the project folder when you use the command. as shown below When you open this service file you can see it is a simple class except @Injectable,  it make this class as service and we can use this at any place of or project by importing it. Injectable make a class available for dependency injection Now add some method in this class. Now we use this Authentication service in our login component, for using this we have to add this in constructor  and now as we move the authentication par...
Read more