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)
