Introduction

Angular

Angular is a leading, powerful and most popular frontend javascript framework for creating single page application or SPA. With angular we can create mobile application, desktop applicaion as well as web application very quickly and easily. Angular is much faster and easier than its previous version angular js. Unlike angular js, angular is written in typescript.

Version Released Date Angular 2 Released on September 14th, 2016 Angular 3 Not released for public, due to misalignment of router package Angular 4 Released on November 1st, 2017 Angular 5 Released on November 1st, 2017 Angular 6 Released on May 4th, 2018 Angular 7 Released on October 18th, 2018 Angular 8 Released on May 28th, 2019 Angular 9 Released on February 7th, 2020 Angular 10 Next

Benefits of Angular

Angular is a component based framework which gives a clean structure for our application.

Angular is a component based framework which gives a clean structure for our application. It has declarative templates which includes lots of reusable code.

It has declarative templates which includes lots of reusable code. Angular is developed using TypeScript, but we can write our code in either JavaScript or TypeScript.

Angular is developed using TypeScript, but we can write our code in either JavaScript or TypeScript. Angular code is more testable code, which supports to build lots of automated test.

Angular CLI

The Angular CLI is a command-line interface tool that will help us to initialize, develop, scaffold, and maintain Angular applications. We can use this tool directly in a terminal, or indirectly through an interactive UI such as Angular Console. We can create Angular applications using Angular CLI by following below steps-

Step 1:- To start with creating Angular CLI application we first need to install NodeJS.

Step 2:- Install Angular CLI by running below command-

example npm install -g @angular/cli

Step 3:- Now, to create angular applicaion, just run below command-

example ng new my-project // To create an angular applicaion cd my-project // Navigate to project folder i.e. my-project ng serve // To run the applicaion

Our newly created app will look like below:-

app.component.ts

app.component.html

app.component.css

app.module.ts

app.component.spect.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'my-first-project'; } <div style="text-align:center"> <h1>Welcome to {{ title }}!</h1> </div> h1 { color: green; } import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [ AppComponent ] }) export class AppModule { } import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], }).compileComponents(); })); it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); }); it(`should have as title 'my-first-project'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app.title).toEqual('my-first-project'); }); it('should render title in a h1 tag', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('h1').textContent).toContain('Welcome to my-first-project!'); }); });

Some important CLI command:-