Angular - Learn to Build Single Page Application

Angular is a TypeScript-based open-source front-end web application platform. Angular is a complete rewrite from the same group that built AngularJS.

Rs. 15000
E-Box Exclusive
Learn through our Scientifically Designed & Proven 5 Step Practice Oriented Learning Process
Angular - Learn to Build Single Page Application
Rs. 15000
Includes
  • 14 Hrs of lecture Videos
  • 75 hands-on practice exercises
  • 16 Assessment exercises
  • 303 knowledge based questions
  • Lifetime access
About the Course

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.
 

Course Objectives

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.

Course Content
Introduction

Welcome! In this module, you will learn about what and why of Angular. The benefits of using Angular for front end designing. Angular is a MVVM javascript framework to gear up single page applications. It is one way of building applications with reusable and modular code across all platforms.

  • 3 Videos
  • 1 Hrs 15 Mins
  • 16 Problems
Workspace and file structure and ng commands

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.

  • 2 Videos
  • 1 Hrs 15 Mins
  • 15 Problems
Angular Architecture

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.

  • 2 Videos
  • 1 Hrs 15 Mins
  • 15 Problems
Angular Component Creation

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.

  • 2 Videos
  • 2 Hrs 15 Mins
  • 18 Problems
Displaying data in Components

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.

  • 2 Videos
  • 3 Hrs 15 Mins
  • 23 Problems
Data Binding

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

  • 2 Videos
  • 3 Hrs 15 Mins
  • 25 Problems
Structural Directives

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.

  • 2 Videos
  • 3 Hrs 15 Mins
  • 21 Problems
Attribute Directives

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.

  • 2 Videos
  • 2 Hrs
  • 17 Problems
DI & Services

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.

  • 2 Videos
  • 1 Hrs 15 Mins
  • 15 Problems
Component Interaction

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.

  • 2 Videos
  • 3 Hrs
  • 18 Problems
Pipes

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.

  • 2 Videos
  • 3 Hrs 15 Mins
  • 21 Problems
LifeCycle Hooks

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.

  • 2 Videos
  • 1 Hrs 15 Mins
  • 17 Problems
Angular Elements

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.

  • 2 Videos
  • 1 Hrs
  • 11 Problems
Promises & Observables

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.

  • 2 Videos
  • 4 Hrs 15 Mins
  • 28 Problems
Material Framework

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.

  • 2 Videos
  • 4 Hrs 15 Mins
  • 25 Problems
Flex Layout

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.

  • 2 Videos
  • 2 Hrs 15 Mins
  • 19 Problems
Forms

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.

  • 3 Videos
  • 4 Hrs 15 Mins
  • 26 Problems
Local Data Store

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.

  • 2 Videos
  • 2 Hrs 15 Mins
  • 21 Problems
Http Client

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.

  • 2 Videos
  • 3 Hrs 15 Mins
  • 21 Problems
Routing

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.

  • 2 Videos
  • 2 Hrs 15 Mins
  • 22 Problems
You will Learn through our Scientifically Designed & Proven 5 Step Practice Oriented Learning Process
iLearn
In this session, you will find video lectures and other resources to learn the concepts.
iDesign
In this session, you will start designing and creating your own programs.
iExplore
In this session, you will find interesting set of activities which will make you explore more on the specific topic.
iAssess
In this session, you will have activities to self assess your knowledge and skills on the specific topic.
iAnalyse
In this session, you will find varieties of exercises to improve your code analysis, testing and debugging skills.
Why should you choose E-Box for Learning & Skilling ?
Practice Oriented Learning

Learning through E-Box is completely Hands-on and practice based thereby helping you understand the intricacies of Live Project Scenarios

High Quality Content

E-Box’s programs and Courses are designed by Professionals in the Industry & Academicians, assuring a quality learning experience

24 x 7 Support

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

Industry Mentors

All our Mentors are Top Professionals from their respective Industries. In E-Box you Learn and get mentored by professionals

Auto Evaluation

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

AI Blended Learning

With Auto - Evaluation being the core of the Platform, E-Box uses AI & ML to assist Learners during their course of Study

Personalised Learning

E-Box’s AI algorithms provide you with Exercises that are Personalised and Adaptive based on your Interest and Calibre

Real Time Metrics

Data becomes the core for evolving a personalised learning. E-Box uses these metrics for an Auto Corrective Learning Process

A - Z, You name the company and You will find our alumni.
We have successfully moulded over 10 lakh students from 100+ colleges and universities and we have a very strong alumni network across the globe
What do our Tutors and Learners Say about E-Box ?
I love the way E- Box teaches topics in such detail. The practical examples along with the Practice quizzes makes me skilled in each

Harihara Budra P, XII std

Harihara Budra P, XII std
Still have any Queries ? Contact us Now
Call us on +91 9500045254