What you'll learn
Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.
Angular is Google’s JavaScript (TypeScript-based) open-source front-end web application framework. It is designed specifically for creating dynamic web applications. With this framework, you can develop front-end based applications without having to use other plug-ins or frameworks. Angular is used to develop state-of-the-art client-side applications, especially Single-Page applications. It has a series of features and tools that simplify the development of the applications themselves while simultaneously guaranteeing excellent performance result
CURRICULUM
Introduction
This is an introductory module which will take you through the overview of the entire course.
Why Angular?
- History of Angular
- The leap from AngularJS to Angular
- Desktop Application class User Experience
- Productivity and Tooling
- Performance
- Community
- Full-featured Framework
- Supported Browsers (Angular 11)
- Platform for Targeting Native Mobile, not just Web Browsers
Deep Dive into TypeScript
- Introduction
- What is Typescript
- Why Typescript
- Setup and installation
- IDE support
- Scoping using let and const Keywords (ES6)
- Template Literals (ES6)
- Rest and Spread Parameters (ES6)
- Destructuring (ES6)
- Introduction to Types
- Type inference
- Type Annotations
- Number
- Boolean
- String
- Array
- Tuple
- Enum
- Any
- Void
- Null and Undefined
- Never
- Introduction to Functions
- Using types in functions
- Function as types
- Optional and default parameters
- Arrow functions
- Introduction to Classes
- Inheritance
- Access modifiers
- Getters and setters
- Read-only & static
- Introduction to Interfaces
- Optional properties and methods
- Strict structural contract
- Extending interface
- Implementing interface
- Introduction to Modules
- Import / Export
- Default
- Decorators
Working with Angular - CLI
- Angular CLI
- Anatomy of the project
- Setting up a workspace
- Updating Angular apps using ng update
- Adding support for external libraries using ng add
- Debugging Angular apps
- Working with Augury
- Using the Angular Language Service with Microsoft VSCode
Nine Building Blocks of Angular (Bird Eye View Of Angular)
- Modules
- Components
- Templates
- Metadata
- Data binding
- Directives
- Services
- Dependency injection
- Angular Ivy
Angular Modules
- Why modules
- How to create modules
- Built-in modules
- Root Module
- feature module
Components
- Introduction
- @Component decorator
- Custom components
- Component with templates
- Inline
- External
- Event Emitter
- Component with Styles
- Angular Elements
Templating
- HTML as template
- Data binding
Interpolation
- Two-way binding
- Template expressions
- Template syntax
- Attribute, class, and style bindings
- @Input()
- @Output
- Template reference variables
- Safe navigation operator
Directives
- Introduction
- Built-in directives
- Structural directive
- NgIf
- NgFor
- NgSwitch
- Attribute directive
- NgClass
- NgStyle
- NgModel
Pipes
- Introduction
- Built-in pipes
- @Pipe decorator
Forms
- Introduction
- @angular/forms library
- Template-driven forms
- Form and field validation
- Validation check with ng-pristine,ng-dirty, ng-touched, ng-untouched, ng-valid, ng-invalid
- Show and hide validation error messages
- Form submission with ngSubmit
- Reactive/ Model drive forms
- ReactiveFormsModule
- FormGroup, FormControl classes
- FormBuilder for easy form building
- Validations using Validators
- Setting form model using setValue and patchValue
- Use FormArray to build repeated from controls or form groups
Dependency Injection
- Introduction
- Why DI
- @Injectable decorator
- Custom service development
- Registering the service with NgModule using providers key
- Provider Types
- Class
-
- Value
Routing & Navigation
- Introduction
- @angular/router library
- Configure routes
- RouterModule.forRoot and RouterModule.forChild
- RouterOutlet, RouterLink, RouterLinkActive
- Nested Routes
- Parametrized routes
- Route guards
Rxjs Primer
- Introduction
- Why RxJs
- Observable interface
- Streams
- Operators
- Subscription
- Subject
- Schedulers
Interfacing with backend services & API using HttpClient
- Setup installing the module
- Making a request for JSON data
- Type checking the response
- Error handling
- Sending data to the server
- Making a POST request
- Configuring other parts of the request
Level up with Angular
- Creating Libraries
- Angular Material Essentials
- Lazy Loading
- Customizing the Angular CLI using the Builder API
- Server Side Rendering with Angular Universal
- Working with Service Workers
- Building a Progressive Web App
Testing
- Introduction
- Testing in Typescript
- Testing Component
- Testing Service/Provider
- Testing Pipe
Deployment
- Manually
- Using the Angular CLI with Ahead-Of-Time (AOT) Compilation and Tree-Shaking (removing unused library code)
- Deployment Platforms for Angular Apps
Capstone Project
Use your skills of Angular to build an application that provides details of famous hotels in multiple cuisines - a mini project like Wikipedia but limited to book details.