Posts

Showing posts with the label node js

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

Implementing Routes

Image
In previous topic we have created our login page and added validation, in this topic we will cover routing in angular when user click on login button they will route to welcome page or error page. If you remember when we create our project using "ng new" command there were some question asked i.e. do we need routing and we said Yes and then we got one file app-routing.module.ts so this is the module which will handle all the routing in our application. All the routes are configured under " const routes : Routes = [];" First we need to create our welcome and error components for that we can use command "ng generate component welcome"   and "ng generate component error". After generating these components now we will configure routings. in app-routing.module.ts need to add below code: const routes : Routes = [ { path : 'login' , component : LoginComponent } ]; It means path will be http://localhost:4200/login and which component i

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)