Posts

Showing posts with the label npm

Update Feature - 1

Image
  In Previous topic we have looked in Delete Functionality and integrated both UI and JAVA and on click of Delete button we showing message in header if it is success. In this topic we will work on update functionality, let's start and update our code as below : First we have to update our todos-list.component.html and add a column for update, we will remove action column and change it to update and delete columns. Your page will look as below: Now we have to create a updateTodo method in todos-list.component.ts file and from this method we want to open a new page where we update the details. so for opening a new page we have create a component so create a component with ng generate component todo as shown below  If you remember from some of the starting topic we have added new component to app-routing.module.ts file. we have to do this because we are routing to another page when we click on update button. Now create updateTodo method which will route to the edit page so for routi

Logout Component and Angular Router (CanActivate)

Image
  In this topic we will create our logout component for our application and also remove session object if user is logged out as well we will see the use of Angular Router method CanActivate. Now Let's create logout component using command "ng generate component logout"  once you create the logout component you have to add it in routing file i.e. app-routing.module.ts and add it before ** as ** will be the last thing in routing. After adding it here you can check it by clicking on logout button in your localhost URL. Now we will remove user from session storage for that we need to add one method in authentication service and use that method in logout component by dependency Injection. Till Now we have done the login, menu, error, logout so you can check it by going through localhost. but still we have one problem i.e. if we go to http://localhost:4200/welcome/dummy or todo or any menu item without logged in it is working so what do we need to do here? we need something whi

Exploring Angular CLI Commands

Image
 " ng serve" : ng serve command will keep polling for any changes in code and as soon as you made any change it will build it. For Example: go to your src folder and open index.html and change the title from todoList to anything else like "Todo List Application" and save it, after refreshing you localhost URL you can see your change reflecting as shown below "ng lint" : this command is deprecated but you can add it in your project see below screen shot, this command will check for coding standard and you can update it as per your project requirement. File name: esLintrc.json "ng build" : when you run "ng build" it will create some files and when you go to visual studio IDE you can see a new folder "dist" is created and you see files like index.html and all. This dist folder you can use behind any webserver and you can directly launch index.html and run the entire application. "ng test" : ng test runs the unit test ca

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                                                                                                                                             Next Topic (Install Angular CLI)