Part 1 Angular Tutorial | Angular setup and Introduction | Angular flow | Create new angular projec

Angular setup and Introduction

- Angular is a component-based framework for building scalable web applications.
- Angular is open source framework. Using Angular we can develop the single page application (SPA).
- Using Angular we can develop response web pages.
- Angular uses the typescript
- It provides the tools to help you develop, build, test, and update your code
- We are using the Angular 14

Angular Introduction
Before installing the node or angular version, check the below page for correct node versions.
- https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3

Setup:-
------

1. Node installation (14.17)
https://nodejs.org/en/download/

How to check the node version?
node -v

How to check the npm version?
npm -v

2. Angular cli installation
https://angular.io/cli

npm install -g @angular/cli

How to check the angular version?
ng version

Run this command admin windows powershell
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

3. Create a new project using angular cli
ng new projectname
ng new payroll

4. Run the project using the angular command.
ng serve --open

- Run the project using the angular command.
npm start

Note:- When we run the npm start, it will go to the package.json and get the scripts value then it will execute the "start" value property.

Commands used in the project
1. npm install
- To install the all dependency libraries. It will create the node_modules folder.
2. ng serve
- To start the project
3. npm start
- TO start project this command can be used. npm start internally runs the "ng server" command.
4. ng build
- To build the application.
eg: To build the app in production mode.
ng build my-app -c production

Note:- If project is failing to run the application because of typescript error then change the typescript version in package.json to '4.4.2'

What is npm?
- Node package manager
- It is open source library management site.
- all node package are available there.
- Each library is called as a package.

How will run angular app in a new port?
ng serve --port 4201

Angular cli Commands
1. Generate the component
ng generate component my-component
ng g c my-component

2. Generate the class
ng generate class

3. Generate directive
ng generate directive

4. Generate enum
ng generate enum

5. Generate guard/canActivate
ng generate guard

6. Generate interceptor
ng generate interceptor

7. Generate interface
ng generate interface

8. Generate module
ng generate module

9. Generate pipe
ng generate pipe

10. Generate resolver
ng generate resolver

11. Generate service
ng generate service

12. Add any libraries using the ng command instead of npm install
ng add @angular/pwa