Post
Ask Question

Learning Angular 8 - Lab One

Introduction

 
Recently, Angular 8 versions have been released and developers stared, getting confused, with so many questions like what will be the new feature , how to upgrade, and so on.  Then, I thought to write an article to help developers with this article and to understand the basics.
 
In this lab, we will start learning from scratch, with angular8 web application.
 
Please go through my previous labs on angular 2 to learn easily,

Angular Versions

 
Angular is a framework to create reactive single page web application.
 
Latest available version is angular 8.
 
The first version of angular was angular1, which is also known as angular JS.  The next version was a complete re-write which is angular 2, having all together different way concepts and features.
 
Version history
 
Angular first version(Angular Js )
Angular 2
Angular4
Angular 5
Angular 6
Angular 7
Angular 8
 
Here you can see angular versions addition of new features, with more functionality and with more improved frame work.
 

Project setup with angular 8

 
Let’s start with the creating a project with angular 8.
 
We can create new projects using angular CLI, which means command line interface.  The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications,
  • npm install -g @angular/cli - Step 1
  • ng new my-first-app – Step 2
  • cd my-first-app – step 3
  • ng serve- Step 4
Step 1 - npm install -g @angular/cli
 
npm install, wow!  Again a new term .  Don’t be scared guys its node package manager.  What is node then and why it required?  Remember, this lab is to learn angular 8 not node, but node is required to run and manage different modules.
 
Node js - JavaScript runtime built on Chrome's V8 JavaScript engine
 
This is not an article for node.js, but angular and dependencies run behind the scene on node.
 
You can download node if you don’t have in your machine.
 
Once you are done with downloading and installing node, you can check the installed version of node and npm versions, using this command,
  • node -v
  • npm -v
Angular CLI with –g command will install it globally for the use.
 
Step 2 - ng new my-first-app
 
Run the below command in the folder where you want to create your project file in the machine.  It will take some time to scaffold and create all the required files and their node dependencies, to run a sample application .
 
Step 3 - cd my-first-app
 
Once all the required files are created, without any error, then navigate to the folder by running this command.
 
Step 4 - ng serve
 
The final step is to the run the application ng serve which compiles, builds, and runs your application, by launching spinning a dev server for you.
 
It will run on the default port 4200 with the url http://localhost:4200/
 
You can kill the running session of web app by the command ctrl + c and click Y and also run the app again on different port ng serve –port 5200
 
Now the url will be http://localhost:5200/
 

Project structure and Tools

 
You can use a different editor to view, code, and compile the angular app.  I have used VS code, a free tool from Microsoft.
 
You can download from this link here.
 
Open your app in the vs code which look likes as in below snap shot.
 
Angular 8
 
Click on View and open integrated terminal to run the commands.
 
Angular 8
 

Typescript - JavaScript that scales

 
If you analyze the project files, you will find out that some .ts files in the project, which are type script files.  Angular uses this type of script to build and run the apps.  Type script is nothing but java script with more advanced functionality and more importantly it is typed.  It does not run ona browser, rather it got transpiled into JavaScript code, which runs on browser.  Developer has more control, as it checks type compile time, unlike java script which is dynamically typed and checked run time.
 
You need to know type script to be an expert in angular.  I will walk you through these concepts throughout the upcoming labs.
 
You can learn more here.
 

Conclusion

 
This article is an introductory article for a beginner who has just started to learn angular frame work, with glimpse of basic framework and project setup.  In later courses we will learn basics and a course project, with all angular concepts.
 
Keep learning and keep smiling.
 
Resources and Useful Links
 
Thanks for the authors of below links,
  • https://angular.io/docs
  • https://www.typescriptlang.org/
  • https://nodejs.org/en/


Similar Articles