Angular by itself is an amazing framework, that together with the Angular CLI makes our life as developers simpler than ever.
In this course, we are going to start by setting up your development environment, and we will use the Angular CLI to quickly scaffold a small Angular project from scratch.
We will first learn about how Angular relates to the MVA paradigm by building our first component and see the Angular change detection mechanism in action for the first time. This quick start will give you a feel of what the framework looks like and how we organize the app.
We will cover the most commonly used parts of the Angular framework that are going to be using all the time: Components, Pipes, Services and Core directives, etc.
We will then deep dive into advanced concepts like Forms, NgRx, RxJs, HTTP,Routing, etc.
Upon successful completion of the course, the learner will be able to
Design a single-page application by using Angular with Typescript
Build the web application by creating Components, Directives and Templating and common angular directives like NgFor, NgStyle, NgIf, and NgSwitch.
Understand standard pipes and building our own pipe.
Build Angular Services using the HTTP module.
Any framework will contain a specific folder structure to store the files in an organized way. In this module, you'll learn about the directory structure of an Angular project and the different config files used to set up the project. Adding plugins and modules using package.json file and also the commands associated with it.
The beauty of Angular lies in the fact that it provides easy access to create asynchronous events. In this module, you'll learn how Angular is architected and what are the basic building blocks of Angular, that takes you to build rich Single Page Application.
By this time you'll be familiar with the overall idea of Angular, now its time to start building an application. In this module, you'll be exposed to creating a component which is a basic building block of any Angular project, adding variables and displaying them in HTML.
A component is useless until data is displayed on the HTML. You can display data by binding controls in an HTML template to properties of an Angular component. In this module, you'll create a component and display them in HTML using interpolation.
Data from the component can be displayed by using property binding. In this module, you'll learn how to bind properties from the component in HTML page, template reference variable and also the different types of binding.(1-way binding and 2-way binding).
Mostly in any programming or scripting language, there will be a need to control the statement executed on a condition or in a repeated manner. Angular provides some inbuilt directives such as ngIf,ngFor,ngSwitch to control the data displayed on the HTML page. Structural directives change the DOM layout by adding and removing DOM elements.
An Attribute directive changes the appearance or behavior of a DOM element. Attribute directives are used as attributes of elements. In this module, you will learn about the attribute directives NgModel,NgClass.
In this module, you'll learn about creating a service and writing the application logic in a service. You will be learning about ngservice and injecting services.
Once you start building an application in Angular you will come across a scenario where you need to transfer data from one Component to another. This is established by using some decorators like @Input. In this module, you'll learn about binding data from one component to another using @Input and @Output decorators, Event Emitters.
Using Angular pipes is a way to write display-value transformations that you can declare in your HTML. Every application starts out with what seems like a simple task: get data, transform them, and show them to users. Once data arrives you need to display them in a format for better user experience. For example in most use cases, users prefer to see a date in a simple format like April 15, 1988 rather than the raw string format Fri Apr 15 1988 00:00:00 GMT-0700. In those scenarios pipes come to rescue.
A component has a lifecycle managed by Angular. Angular creates and renders components along with their children, checks when their data-bound properties change and destroys them before removing them from the DOM. In this module, you'll learn about the lifecycle methods a component goes through.
Once you start creating a project you will find out that you are using a standard HTML template in various places. In those scenarios you can create a Custom HTML element and use everywhere rather using the HTML template.
Observables are a key part of Angular which helps in Asynchronous function calling. It helps in loading the particular content in a HTML without loading the entire page which is much needed in Single Page Applications. In this module, you'll learn about promises,observables and how to implement them.
Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science. Most of the modern web applications use material design. Angular has its own material design components. In this module, you'll learn to use the material framework API and some of the material components.
The flex layout helps in designing a flexible responsive layout structure. In this module, you'll learn about the different layout structures using flex and some of its style properties.
Handling user input with forms is the cornerstone of many common applications. Applications use forms to enable users to log in, to update a profile, to enter sensitive information and to perform many other data-entry tasks. In this module, you'll learn about reactive forms and template-driven forms in detail.
In Angular application's there will be scenarios where the same data could be loaded in different components. Redux is used to create a common data store that can be used by all components in a page.
Most of the data in an angular application is retrieved from a HTTP client. In this module, you'll learn about making a HTTP call to the servers and display the data.
The Angular Router enables navigation from one view to the next as users perform application tasks. This module will explain in detail about all the routing concepts associated with Angular.
Learning through E-Box is completely Hands-on and practice based thereby helping you understand the intricacies of Live Project Scenarios
E-Box’s programs and Courses are designed by Professionals in the Industry & Academicians, assuring a quality learning experience
With 100’s Mentors online ready to get your Doubts clarified and to Hand Hold you, you will always have someone to sort things our for you
All our Mentors are Top Professionals from their respective Industries. In E-Box you Learn and get mentored by professionals
Auto Evaluation is the Core of E-Box. Your solutions and answers are evaluated instantaneously by E-Box, thereby saving learners a lot of time
With Auto - Evaluation being the core of the Platform, E-Box uses AI & ML to assist Learners during their course of Study
E-Box’s AI algorithms provide you with Exercises that are Personalised and Adaptive based on your Interest and Calibre
Data becomes the core for evolving a personalised learning. E-Box uses these metrics for an Auto Corrective Learning Process