In this blog we will learn What is angular, what is typescript, what is transcompilation, Angular CLI, how can a beginner install Angular CLI in windows, how to create new project with various features add options, how to install node modules, how to host in localhost and understand where to add content in angular project.
Introduction of Technology Used in Angular
Learn about Angular:
It is a superset of JavaScript, known as TypeScript, it is based open-source web application framework under the guidance of the Angular Team at Google and by a community of individuals. Angular is developed by the same team who built AngularJS. It is front-end framework which make development not only easy but it also increase speed and performance. With such benefits it also gives compatibility across all platforms.
Typescript:
As we all know Angular is written using TypeScript language, and it is basically a superset for JavaScript. It fully compiles in to JavaScript, but it helps spot and eliminate common mistakes when human is actually typing the code. TypeScript was initially designed for development of large applications and for transcompiles to JavaScript.
What Is Transcompilation:
A transcompiler, also called a source-to-source compiler or transpiler, is a special type of compiler that converts a program’s source code into another language. It can process not only latest version of a programming language, but also able to process code written in an older version of a programming language by converting it to a newer version of the same language.
Angular CLI:
The Angular CLI is a command-line interface tool, which gives support to use develop, initialize, deploy, update, scaffold, and maintain Angular applications directly from a command prompt.
Note: Please make sure you have node and NPM installed in your system.
You can check your node version and NPM version by using the following command:
node --versionnpm --version
Steps to create your first project using Angular CLI.
Step-1: Install Angular CLI
npm install - g @angular/cliThis command will install Angular CLI globally, In my case I have already installed, so it just checked for updates. Do not wary about WARN, it just shows that you don’t have additional file and details like description and README data.
Step-2: Create new project by this command
ng new myNewAppWhile executing this command in your terminal, it will ask few feature if you want to add in your new Angular Application.
If you want to add routing module in your app type “Y” and press Enter.
Than it will ask about whether you want CSS or SCSS
Now wait few seconds, and installation will done.
Step-3: Go to your project directory
cd myNewApp
Step-4: Install node modules
In order to run application we have to install node modules, for that type following command in cmd
npm install OR npm i
Step-5: Run server and see your application in localhost
Here ng serve will host your application on http://localhost:4200 but if you want to host it on different port than add flag –port=4300, and –open flag will directly open your app in default browser of your computer, when angular cli will complete compilation process.
ng serve --open --port=4300
After few seconds it will open browser, and there you will see your newly created project up and running.
Step-6: Add content in newly created app
Open file: “myNewApp/src/app/app.component.html” and replace with your own html in index file.
Here you can replace following code for test purpose
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>As, you can see the result
So, this is how we can install and host our project in localhost.
Some, more use full commands
ng generate component componentName OR ng g c componentNameng generate service serviceName OR ng g s serviceNameThank you for reading and stay tune, stay connected and stay safe. Read our other blogs on ITbulls.in
