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.
This is not an article for node.js, but angular and dependencies run behind the scene on node.
Once you are done with downloading and installing node, you can check the installed version of node and npm versions, using this command,
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.
Click on View and open integrated terminal to run the commands.
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.
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/