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:
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.
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:
Steps to create your first project using Angular CLI.
Step-1: Install Angular CLI
npm install - g @angular/cli
This 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 myNewApp
While 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
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 componentName
ng generate service serviceName OR ng g s serviceName
Thank you for reading and stay tune, stay connected and stay safe. Read our other blogs on ITbulls.in