Angular 7 History and First App - TechLangPoint

Hello friends, This is my second tutorial on Angular 7.
In this Angular 7 tutorial ,you will learn about History and Versions of Angular and Create Your First Angular  App. 
History and Versions of Angular
Angular JS 1.0

• AngularJS usually referred to as “Angular.js” or Angular 1.0
• It is a JavaScript-based open-source front-end web application framework.
• It is mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
• It was initially introduced in October 2010.
• It is mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.

Angular 2

• Angular 2 is a complete rewrite from the same team that built AngularJS.
• Angular 2 was first introduced in October 2014.
• It is written entirely in TypeScript.
• The drastic changes in the 2.0 version created controversy among developers.
• On April 30, 2015, the Angular developers announced that Angular 2 moved from Alpha to Developer Preview and then Beta version was released in December 2015.

Angular 3

• Angular 3 was skipped.
• Reason behind this is that version mismatch between @angular/core, @angular/compiler and @angular/router libraries.

Angular 4

• On 13 December 2016 Angular 4 was announced.
• The final version was released on March 23, 2017.
• Angular 4 is backward compatible with Angular 2.
• This version has some additional features: 

1. This version introduced HttpClient, a smaller, easier to use, and more powerful library for making HTTP Requests.
2. New router life cycle events for Guards and Resolvers. Four new events GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd join the existing set of life cycle event such as NavigationStart.
3. It provides the support of conditionally disable animations.

Angular 5

• Angular 5 was released on November 1, 2017.
• It provided some improvements to support for progressive web apps, also provides improvements related to Material Design.

Angular 6

• Angular 6 was released on May 4, 2018.
• It was a major relaese which provides some features like: ng update, ng add, Angular Elements, Angular Material + CDK Components, Angular Material Starter Components, CLI Workspaces, Library Support, Tree Shakable Providers, Animations Performance Improvements, and RxJS v6.

Angular 7

• Angular 7 was released on October 18, 2018.
• Updates regarding Application Performance, Angular Material & CDK, Virtual Scrolling, Improved Accessibility of Selects, now supports Content Projection using web standard for custom elements, and dependency updates regarding Typescript 3.1, RxJS 6.3, Node 10 (still supporting Node 8).

Create First Angular App

Following are the Angular CLI commands to create the first Angular app. 

npm install -g @angular/cli //command to install angular 7
ng new my-dream-app // name of the project
cd my-dream-app
ng serve

The above commands help to get the project setup in Angular 7.

We will create a folder called angular-project and install angular/cli as shown below −

Once the installation is done, check the details of the packages installed by using the command
 ng version as shown below −

Typescript 3.1, RxJS 6.3, Node 10 (still supporting Node 8.

It gives the version for Angular CLI, typescript version and other packages available for Angular 7

To create a project in Angular 7, we will use the following command −

ng new projectname

You can use the projectname of your choice. Let us now run the above command in the command line.

Here, we use the projectname as my-first-app.Once you run the command it will ask you about routing as shown below −

The project my-first-app is created successfully.

Navigate to your first app,change the directory in the command line using the given line of code −

cd my-first-app 

Start your server to run app. 

ng serve  

Your server is running on localhost:4200. Now, go to the browser and open it.

Now, you need an IDE to edit and run your app's code. Here, we are using Visual Studio.

Open Visual Studio and open your app "my-first-app" in the IDE. It will look like this:

You will see 6 components there:

• app.component.css
• app.component.html
• app.component.spec.ts
• app.component.ts
• app.module.ts
• app-routing.module.ts

You can see the code within the different components to understand what is going on and which part is responsible for the outlook of the app.

Your Angular 7 First app is completed now.

I hope You like this tutorial.

On next tutorial we will discuss Files Explanation.

Thanks For Reading.

Faisal Hussain