2. Setup and Installation for Angular

Setup and Installation for Angular 


Environment Requirements

1. Required Node with minimum 10+ Version for latest version of angular.
    Reference link for Node:  Node JS
2. Visual Studio or Atom IDE's for Application Development with Javascript and Typescript Support.

   Reference Link for Visual Studio: VS-CODE

Checking Node version

1. Open new command prompt and type (node -v or node --version). This should be output 10+ Version.
           Command: node -v or node --version

Creating Angular environment Using npm

1. Open command prompt and use either of one following command prompt

       (a) Command to install angular Globally through out the system: npm install -g @angular/cli
       (b) Command to install angular Locally: npm install @angular/cli

Using command (a) there is no need to install angular-cli for every project

.Checking Angular version

1. Open new command prompt and then use the following command
        
     Command: ng --version
The above commands gives complete information along with typescript and remaining versions.


Sample Attachment below for node and angular versions


       
By this our system is configured and ready to use Angular.



Comments

Post a Comment

Popular posts from this blog

MVC or MVVC Pattern In Angular

Image
MVC or MVVC Pattern In Angular MVC - Model - View - Controller 1. In Angular every component will follow MVC pattern. 2. MVC indicate's - Model - View - Controller. 3. Model is the raw data or the data from remote. 4. View indicate's look and feel. 5. Controller acts as the mediator between Model and View. 7. In angular view can be achieved by HTML and CSS , Model indicates the object Controller indicates data transmission between View and Model. 8. In Angular each component will have all Model, View, Controller. So Angular is called Component based MVC. 9. In Angular it follow's two way binding i.e.. Data transmission between Model - view - view - controller hence it is also called as MVVC. 10. So angular can be called as MVC or MVVC. Files Indicating MVC in Angular. Model - component.model.ts View - component.html , component.css Controller - component.ts, component.service.ts Note There is still a dilama and debet weather angular i...
Read more

Angular 6 Template Driven Form Validations

Angular 6 Template Driven Form Validations 1. Create a form component. 2. Create an Angular Form  3. Validating Email and Password 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> ...
Read more

7. Class Binding

Image
Class Binding When we want to bind CSS classes either from typescript or class OR based on conditionals we can go with the concept of Class Binding. Class binding in angular can be defined in as follows : <element [ngClass]="condition or ternary or multiple CSS classes"> </element> ng class can be used in many different ways in angular which are as follows: 1. ngClass with ternary operator:  <element [ngClass]="condition ? 'class1' : 'class2'"> </element> from above when condition is true 'class1' will be applied to the element else 'class2' will be applied. 2. ngClass with condition in object format: <element [ngClass]="{'className': condtion}"> </element> When we have only one condition and one class to be applied we can use above syntax. 3. ngClass with multiple conditions in object format <element [ngClass]="{'class1': condition1, 'class...
Read more