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

Publié le: 08 mars 2023
sur la chaîne: Trinits Technologies
325
3

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/c822...

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


Sur cette page du site, vous pouvez voir la vidéo en ligne Part 1 Angular Tutorial | Angular setup and Introduction | Angular flow | Create new angular project durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur Trinits Technologies 08 mars 2023, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 325 fois et il a aimé 3 téléspectateurs. Bon visionnage!