Before we dive into Angular, lets first understand the difference between Javascript, Typescript and Node.
Javascript Vs Typescript Vs Node :
Javascript:
Earlier Javascript was just a client side scripting language, but now it has evolved a lot, especially after the ES6 release in the year 2015. Javascript has became modern- modularized, well organized, maintainable code. ES stands for EcmaScript. EcmaScript is a Standard and JavaScript is an Implementation. ES6 and beyond Javascript versions are called Modern Javascript.
Javascript version evolution:
- ES3 – 1999
- ES5 – 2009
- ES6 – 2015 – ES2015
- ES7 – 2016 – ES2016
- ES8 – 2017 – ES2017
In the earlier version of Javascript you used to play with mostly the DOM in your page.
But in the current modern Javascript the scene is quite different. You can define & import classes, write modularized and maintainable code, you can do hell lot of things as we do for a full object oriented language like java.
Typescript:
Nowadays a new language had evolved called Typescript.
Typescript = Modern Javascript + strong typing
Javascript is a loosly typed language:
var i
i=10
i="Ten"But in Typescript:
i:number
i=10
i="Ten" //Compilation ErrorNode:
Where does the javascript code run?
Every browser has an JavaScript Engine that executes the javascript code. The name of the JavaScript engine for firefox browser is SpiderMonkey and for chrome browser is V8.
Node is the C++ code containing the V8 engine.
Installing/Updating Angular
Install node:
Before installing angular, make sure to install node from the below official site:
https://nodejs.org/en/download/
Try to use the LTS version. If you are a Windows user can download the Windows Installer (.msi).
node is an open source javascript based server side run time environment.
Workaround: Once u install the nodejs, restart the system. Then proceed with other steps.
How to check the installed node version ?
node -v
Update node:
To update node, download the same .msi file and run it.
Install npm:
This will be automatically get installed once you install node.
npm is a javascript package manager, its the largest registry of open source libraries in the world.
npm is similar to Maven/Gradle in java.
How to check the installed npm version ?
npm -v
Install Angular:
Basically we will be installing Angular CLI, which will suffice the Angular install.
npm i -g @angular/cli
The above command is same as the below command:
npm install -global @angular/cli
How to check the installed Angular version ?
ng version
ng stands for angular
Update Angular:
[sudo] npm uninstall -g angular-cli @angular/cli
npm cache verify
[sudo] npm install -g @angular/cli
Directly downloading and installing the latest version of node will not automatically upgrade to latest version of Angular, you have to upgrade it exclusively.
Without node also we can develop our Angular applications, but, here we get 2 advantages:
1. We get an inbuild server to host our applications loca
Create and run Angular application
Open command prompt. Navigate to the folder where you want to create the project and hit below command:
ng new my-app
If you are using Angular 17 or above use the below command (this will generate the app.module.ts file) :
ng new my-app --no-standalone
This will create an application: my-app
To open the Visual Studio code, go inside the project folder (like cd my-app) and hit below command:
code .
To run the application:
ng serve
I think you can also run the application with this command as in React: npm start
Hit this URL in a browser : http://localhost:4200
You will see a standard page. To update its contents you need to edit this file: app.component.html
If you want to see other command ng have:
ng help
Angular Application Flow:
Below you can see the summary diagram of the Angular flow. This is also called as Bootstrapping of an Angular application:
The above diagram is explained below :
- First main.ts file is executed. In this class bootstrapModule method is called which bootstraps the AppModule.
AppModule is also known as Root Module.
In main.ts:
2. app.module.ts file is executed which registers AppComponent in bootstrap.
app.module.ts:
app.component.ts:
index.html:
app.component.html:
Angular Project Structure:
Angular is called a Single Page Application, and that particular single page which is served by the server is: index.html
e2e: [Removed from the current Angular versions.]
node_modules: This is like the dir folder in java, where all dependencies are downloaded
src/app: all our angular source code goes here. It contains the below 2 files:
app.component.html : One of the main files to do visual changes.
app.component.ts : The Typescript file for the above design file.
src/assets: all images goes into.
src/environments: [Removed from the current Angular versions.]
tsconfig.json :
Whatever code that we write in Typescript needs to be converted to Javascript so that our browser can understand. This file is responsible for that.
package.json :
The dependencies required for the project are added here. Whenever you run npm install, all the dependencies are downloaded to node_modules folder. Even if you run ng new command npm install command is also automatically executed. This file is just like pom.xml of maven.
main.ts & index.html :
These files are responsible to bootstrapping the angular application.
polyfills.ts :
Takes care of browser incompatibility.
styles.css :
Takes care of global application styles.
test.ts :
Starting point of running the test cases. This is executed when we run ng test.
Angular Components
An Angular application can be an composition of different components. And each Component is an combination of 3 types of files:
So for every component there would be 3 corresponding files- something.component.html, something.component.css and something.component.ts.
How to generate a new component ?
ng g c component-name
which is similar to:
ng generate component component-name
Lets generate a new component called “welcome” and see what happens after that ?
ng g c welcome
You can see in the below 4 files would be created and 1 file will be updated:
The HTML file:
The TS file:
The app.module.ts file:
The below changes are automatically added if you create the component through CLI. Every Angular Component (@Component) has to be associated with an Angular Module (@NgModule).
To show the welcome component in the UI, you have to add the selector in app.component.html:
Exploring Angular CLI
To check your code for coding standards.
ng lint
Suppose you remove an blank EOF line from a file and try to run the above command, you will get lint errors
Is there any file where all the coding standards specified ?
Yes, tslint.json. The above thing is happening due to below thing:
"eofline": true,
ng build
It will create a new folder called- dist in the project. You can take this folder and put it on any web server and you can run it. Basically this dist folder contains some 10-12 files.
Runs the unit test
ng test
To execute end to end tests. Basically its the Integration tests
ng e2e
where r the above commands defined ?
angular.json
Using Visual Studio Code
This is the most popular IDE(Integrated Development Environment) for Angular projects.
To import the project in your IDE, go to the project folder from windows explorer and type below command:
code .
Or, start Visual Studio Code and use this link:
File -> Open Folder -> Select the project folder
After the project is imported to Visual Studio you will see below project structure:
e2e => end to end testing. This folder is for integration testing.
node_modules => this folder contains the dependency modules generated after you ran npm install or ng new my-app.
src => this folder contains the actual source code.
Below shortcut keys for your reference:
Ctrl + P – Search for a specific file (just like Ctrl + Shift + R in eclipse)
Ctrl + / – To Comment and Un-Comment the code. (You can use Ctrl + Shift + / as well )
Ctrl + B – To maximize a screen