Module 1.pptx Angular JS FRAMEWORK WEBDEVELOPMENT

udsiudiy

1. Angular Module 1 - Introducing Angular

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.

5. 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.

6. 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.

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

8. 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

9. 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

10. 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

11. End of Module 1 Queries?