How to setup angular in windows?

Hello friends in this article i will show you how to setup angular. So read this article till the end.

Step1: install latest version of nodejs from https://nodejs.org/en/download.

Step2: Install latest version of AngularCLI: npm install -g @angular/cli

type node -v to check node version in cmd.

type ng -v to check angular version in cmd.

step3: Install VisualStudio Code Editor from  https://code.visualstudio.com/download.

step4: Now type ng new AngularCrud --skip-tests true to create new angular project in AngularCrud folder in C drive you can also choose any other drive as per your wish .

step 5: Now type cd AngularCrud to go in to the AngularCrud Folder. 

 step 6: Now type Code . to open the project in  VisualStudio Code Editor.

 Now you have sucessfully Installed and setup angular in your computer.

 step 7: To run your project in default browser type ng serve -o  in cmd.

Comments

Post a Comment

Popular posts from this blog

how to save images with angular nodejs

 There are two ways to save images. 1) store image in database by converting it to binary format. 2) copy image in your project folder then save image path in table. ------- 1st way with front end angular------ pass uploaded file in "handleFileInput" function.  saveImage ( files :  FileList ) {    var   file : File  =  files . item ( 0 );    var   myReader : FileReader  =  new   FileReader ();    myReader . onloadend  = ( e )  =>  {      this . image  =  myReader . result ;   }    myReader . readAsDataURL ( file );    //convert to base64 ends } now you will get  binary format image in this.image variable. save this converted image directly to database through API. ------2nd way with api nodejs------ we can use "multer" to copy file in project folder. const   multer  =  require ( 'multer'...
Read more

How to restrict your logged In page in angular (authentication guard)

 You can set authentication guard to restrict users which are not loggedin. 1) Service of auth guard    import { Injectable } from '@angular/core' ; import { Router , CanActivate , ActivatedRouteSnapshot , RouterStateSnapshot , UrlTree } from '@angular/router' ; import { CookieService } from 'ngx-cookie-service' ; @ Injectable ({ providedIn: 'root' }) export class AuthGuardService implements CanActivate { constructor ( private _router : Router , private _cookieService : CookieService ) { } userid = "" ; canActivate ( route : ActivatedRouteSnapshot , state : RouterStateSnapshot ): boolean | UrlTree { this . userid = this . _cookieService . get ( 'userid' ) if ( this . userid == "" ) { alert ( 'You are not allowed to view this page. You are redirected to login Page' ); this . _router . navigate ([ "login" ],{ queryParams: { retUrl: route . url } }); return false ; /...
Read more

How to notify about data update to other component.

   we can update about data changes to any component using bellow simple method 1) Service to publish and receive data import {Injectable} from '@angular/core'; import {Subject} from 'rxjs'; @Injectable({ providedIn: 'root' }) export class GlobalFooService { private fooSubject = new Subject<any>(); publishSomeData(data: any) { this.fooSubject.next(data); } getObservable(): Subject<any> { return this.fooSubject; } } 2) Data sending component @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'] }) export class HomePage { constructor(private globalFooService: GlobalFooService) { } onSomeButtonClick() { this.globalFooService.publishSomeData({ foo: 'bar' }); } } 3) Data receiving component @Component({ selector: 'app-root', templateUrl: 'app.component.htm...
Read more