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 | Released on June 24th, 2020 |
| Angular 11 | Released on November 11, 2020 |
| Angular 12 | Next |
Benefits of Angular
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-
npm install -g @angular/cli
Step 3:- Now, to create angular applicaion, just run below command-
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:-
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:-
| Command | Aliaa | Description |
|---|---|---|
| add | - | It adds support for an external library to our Angular CLI project. |
| build | b | It compiles an Angular application into an output directory named "dist" at the given output path. |
| config | b | It retrieves or sets Angular application configuration values in the angular.json file for the workspace. |
| doc | d | It opens the official Angular documentation (i.e. angular.io) in a browser, and searches for a given keyword. |
| e2e | e | It builds and serves an Angular application, then runs end-to-end tests using Protractor. |
| generate | g | It will generate and/or modifies files based on a schematic. |
| help | - | It will provide a list of available angular CLI commands and their short descriptions. |
| lint | l | It will run linting tools on our Angular app code in a given project folder. |
| new | n | It will create a new workspace and an initial or starter Angular application. |
| run | - | It will run an architect target with an optional custom builder configuration defined in our angular project. |
| serve | s | It builds and serves our angular application. It also rebuilds on file changes. |
| test | t | It will run unit tests in our angular project. |
| update | - | It updates our angular application and its dependencies. |
| version | v | To see angular CLI version. |
| xi18n | - | It will extracts i18n messages from source code. |