Angular

Angular Session 1
Topics: -
1. Angular Introduction.
2. Angular Setup.
3. Angular Project Creation through CLI.
4. Going through angular project files.
5. Commands for running and build angular application.
6. Angular CLI Commands
 Create Component
 Create Pipe
 Create Directive
 Create Module
 Create Service
7. Integrate bootstrap with angular.
Angular Setup
List of software we need for Angular
1) Visual Studio Code
https://code.visualstudio.com/download
2) NodeJS
All NodeJS versions do not compatible to the angular, please follow the below link to find the
angular version compatible NodeJS version.
https://stackoverflow.com/questions/60248452/is-there-a-compatibility-list-for-angular-
angular-cli-and-node-js
once nodeJS installed successfully run following command in the cmd.
Node --version or Node -v
3) Angular CLI
For installing the angular CLI, we must run the following command
npm install --global @angular/cli
Shorthand syntax like below
npm i -g @angular/cli
Suppose if we want to install specific version of CLI then use the following command
npm i -g @angular/cli@version – here version will be replaced with number, if we are not
define the version then it defaults take as latest.
Once CLI installed successfully then use following command for confirmation
ng version
Angular Project Creation Through CLI
For creating angular project, we have to use the following command
ng new <projectname>
** Angular project should not allow the space between the project names. instead of that we
can use “underscore” or “dash”
Going Through Angular Project Files

Package.json :- contains packages to run and build our angular application. Custom scripts can
also be added.
Main.ts :- The main entry point for the application. This file contains the code to bootstrap the
application root module (AppModule)
Styles.css:- This file contains the global styles of our application. Styles that are local and specific
to a component are often defined with in the component itself for easier maintenance.
Index.html:- The main HTML page that is served when someone visits your site.
tsconfig.app.json : TypeScript compiler configuration for the Angular app
tsconfig.spec.json : TypeScript compiler configuration for the unit tests
app.component.{ts,html,css,spec.ts} : The root component (AppComponent) TypeScript, HTML

template, StyleSheet and Spec files.
app.module.ts : This is the root application module (AppModule)
Commands for running and building angular application
For running angular application, we use ng serve or npm start
For building angular application, we use ng build
What is the difference between these two commands?
The ng build command is intentionally for building the apps and deploying the build artifacts.
The ng serve command is intentionally for fast, local, and iterative developments and also for builds,
watches and serves the application from a local CLI development server.
The main difference is – The ng build command writes generated build artifacts to the output folder
and the ng serve command does not. By default, the output folder is - dist/.
We have one more command called ng build –watch. command will regenerate output files when
source files change.
for running test cases we use the ng test command. In angular test files are define with spec
extension.
Polyfills in angular are few lines of code which make your application compatible for different
browsers. The code we write is mostly in ES6(New Features: Overview and Comparison) and is not
compatible with IE or firefox and needs some environment setups before being able to be viewed or
used in these browsers.
Angular CLI Commands
Creating component – ng generate component <componentname> or ng g c <componentname>
Creating module – ng generate module <modulename>
Creting pipe – ng generate pipe <pipename>

Integrate bootstrap with angular
First, we have to install package into the angular application
https://www.npmjs.com/package/bootstrap
once installed successfully then add it into angular.json file styles array or import in styles.css
video link : https://people.ey.com/:v:/g/personal/garlapati_chaitanya_gds_ey_com/

EYF1MowegL9DhcvoB-YYaqwBDczQkpHNC8-EruWXM9ov7w
FY23 - Middleware (Mw) - Angular Session 2023 - All Documents (ey.com)

Angular

Uploaded by

Copyright:

Available Formats

Angular

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular

Uploaded by

Copyright:

Available Formats

Angular Session 1

List of software we need for Angular

1) Visual Studio Code

once nodeJS installed successfully run following command in the cmd.

Node --version or Node -v

npm install --global @angular/cli

Shorthand syntax like below

Angular Project Creation Through CLI

For creating angular project, we have to use the following command

Going Through Angular Project Files

tsconfig.app.json : TypeScript compiler configuration for the Angular app

tsconfig.spec.json : TypeScript compiler configuration for the unit tests

app.component.{ts,html,css,spec.ts} : The root component (AppComponent) TypeScript, HTML

app.module.ts : This is the root application module (AppModule)

Commands for running and building angular application

For running angular application, we use ng serve or npm start

For building angular application, we use ng build

What is the difference between these two commands?

Angular CLI Commands

Creating component – ng generate component <componentname> or ng g c <componentname>

Creating module – ng generate module <modulename>

Creting pipe – ng generate pipe <pipename>

First, we have to install package into the angular application

video link : https://people.ey.com/:v:/g/personal/garlapati_chaitanya_gds_ey_com/

FY23 - Middleware (Mw) - Angular Session 2023 - All Documents (ey.com)

You might also like