Installation and Setup Fire Base with Angular

Fire base with Angular

Software's Required

1. Node (Latest Version)
2. Visual studio / Atom / Sublime Text
3. Angular 6 Setup and Installation
4. Angular Project Creation and Running.

1. Downloading and installing Node



1. Visit following link and download node 








Link: https://nodejs.org/en/download/








2. After download install by following the steps.

3. Once installed open command prompt and type following command to check node version








command: node -v 








4. Note : Node version should be more that 6+ version.

2. Downloading and Installing Visual studio / Atom / Sublime Text



1. Visit following link for Visual Studio Code

Link: https://code.visualstudio.com/download








2. Visit following link for  Atom

Link : https://atom.io/








3. Visit following link for Sublime Text








Link: https://www.sublimetext.com/3








4. After downloading follow the steps according to the editor you have downloaded.

3. Angular 6 Setup and Installation







1. Open your command prompt

2. Run the following command 








Command: npm install -g @angular/cli







3. After installation is completed use the following command to check version of Angular













Command : ng -v

4. Angular Project Creation and Running







1. Create Angular Project with following command








Command: ng new <PROJECT_NAME> 







2. After completion and installation of project move inside the project using following command







Command: cd <PROJECT_NAME>







3. To run the Angular Project use the following command



Command: ng serve







4. Open the browser and type following URL 







URL: localhost:4200







5. Sample Project is displayed in the chrome.

Comments

Post a Comment

Popular posts from this blog

Pushing Form Data Into Fire base

Pushing Form Data Into Fire base 1. Form Creation 2. Pushing Form Data into data base. 1. Form Creation in Angular 1. Create Form Component Command : ng generate component templateForms --spec=false         The above command generate's following file's  1. template-forms.component.html 2. template-forms.component.ts 3. template-forms.component.css  Create one more file in the same folder as model file  4. template-forms.model.ts Now in the model file do the following  export class LoginForm { emailVal: string; passwordVal: string; } Description 1. In this model we are using 2 form input's which we need to send as a request 2. In model we define name of model and type of model if we don't have default Values. In template-forms. component.ts do the following <form #loginForm="ngForm" (ngSubmit)="login(loginForm)"> Email <br> <i...
Read more

Updating an existing Object in Angular using firebase

Updating an existing Object in Angular using firebase 1. Creating a component. 2. Fetching the list of user and Updating a particular component based on the key or Username. 1. Creating a component ng g c list --spec=false The above command generates 3 file's as follow's  1. list.component.html 2. list.component.ts 3. list.component.css Here we will fetch the user's which we have already pushed into firebase in previous post. For reference please visit following link  https://angularfirebasedeveloper.blogspot.com/2018/10/pushing-form-data-into-fire-base.html . 2. Fetching the list of user and Updating a particular component based on the key or Username. In list.component.ts import { Component, OnInit } from '@angular/core'; import { AngularFireDatabase } from 'angularfire2/database'; @Component({ selector: 'app-list', templateUrl: './list.component.html', styleUrls: ['./list.component.css'] ...
Read more