2. Learning Objectives
➔ What is Angular?
➔ What is a Framework?
➔ What is SPA?
➔ Why Angular?
➔ Installation of NodeJS
➔ Setting up our workspace with Angular CLI
➔ Creating a new project
➔ Basics of an Angular Application
3. What is Angular?
➔ Angular is a frontend JavaScript framework and it helps building interactive
modern web user interfaces.
➔ Angular is a JavaScript framework which allows us to create Single Page
Application(SPA).
4. What is a Framework?
➔ A framework is like a platform for developing software applications.
➔ A framework simplifies the process of building complex, interactive web user
interfaces.
➔ They have predefined classes and functions which provides API’s for
performing different operations.
11. What is SPA?
➔ SPA stands for Single Page Application.
➔ A SPA has only one HTML page and when we navigate around the menus in
the web page only the content of that page changes without loading page.
➔ Here we are using JS to change the content of the page without reaching out
to the server and it is much faster.
12. Why Angular?
➔ If we use only Vanilla JS/ jQuery it becomes hard to maintain as the
application grows.
➔ Some functionalities must be written from scratch when using JS/jQuery.
➔ Angular provides a clean structure that is easy to understand and maintain.
➔ It is also a collection of tools & features such as CLI, which help us to build
from basic to complex applications.
➔ Applications built with Angular are more testable.
13. Installation of NodeJS
➔ Node.js is a powerful, open-source, and cross-platform JavaScript runtime
environment.
➔ It allows you to run JavaScript code outside the browser, making it ideal for
building scalable server-side and networking applications.
➔ Enables the use of JavaScript for both frontend and backend development.
➔ Supports building real-time applications like chat apps and gaming servers.
14. Setting up Workspace with Angular CLI
Angular CLI is a command line interface which use to create new angular project
or generate some boilerplate code.
npm install -g @angular/cli@latest
To verify
ng version
15. Create Angular Project
To create a new angular project, we use the following command by navigating to
the folder through command line.
ng new projectname
To compile and run
ng serve
16. Bootstrapping Angular Application
Bootstrapping is the process of initializing the Angular application.
Angular Project
index.html
Angular Core
Libraries
Angular third
party libraries
angular.json To locate the main entry point (main.ts)
main.ts
AppComponent
app.component
.html
