Learning Angular 7

Name: Learning Angular 7
Rating: 4.3 (31 reviews)

Learn Angular 7 & build web applications that scale

Created byPackt Publishing

Last updated 1/2019

English

What you'll learn

Develop an application from scratch using Angular 7 that allows you to create an assignment tracker
Understand and use Angular Forms, Observables, Dependency Injection, and Routing
Create components and use Angular to create powerful single page applications
Retrieve data from a route and protect your routes with guard
Retrieve, update, and delete data using Angular’s Http service
Make your app look beautiful by using material design and Animations
Discover new features to Angular including breakthrough features in Artificial Intelligence and Bitcoin mining!'

Course content

7 sections • 45 lectures • 4h 5m total length

The Course overview3:17
Meet your instructor and find out just what you’ll be learning.
Get to know your instructor.
Find out what you’ll be learning.
Find out what you’ll be building.
What is Angular?5:48
Find out what Angular is, how it works and why its popularity is through the roof.
Find out what Angular is.
Learn about how Angular works.
Understand why Angular is *the* framework to learn.
New Angular 7 Features4:05
In this video, we will discover the new features in Angular 7.
What are the new features in Angular 7?
How will they affect your applications?
How to plan your app with these new features?
Set Up Your First App with the CLI5:23
In this video we will set up our environment and create our very first app.
Set up our environment and install Node.js
Install Angular 7
Run your first Angular 7 app!
Style Your App Using Angular Material6:37
In this video we’ll learn how to install Angular Material & animations. You’ll also using an Angular theme and design your app layout.
Install Angular Material & animations
Apply an Angular theme to your app
Create your app layout using Angular Material
Get the Most out of This Course1:13
In this video we’ll find out how you can get the most out of this course and how learning Angular will make you a web development rock star
How to follow this course
How to apply this course
How by the end of the course, you’ll be an Angular rock star.

How to Create a Component6:37
Learn how to create your first component in Angular.
Create your first component with Angular
Learn how to display this component
Use string interpolation to display data
Display your Data with Directives6:29
Find out what Angular is, how it works and why its popularity is through the roof.
Find out what Angular is.
Learn about how Angular works.
Understand why Angular is *the* framework to learn.
Conditionally Styling Elements9:24
Discover the new features in Angular 7
What are the new features in Angular 7?
How will they affect your applications?
How to plan your app with these new features.
Data Binding with Forms - Part 15:42
In this video, we will set up your environment and create your very first app.
Set up your environment and install Node.js
Install Angular 7
Run your first Angular 7 app!
Data Binding with Forms - Part 25:34
In this video, we will create a form using Angular Material
Learn Property binding
Understand Event binding
Data Binding with Forms - Part 36:17
In this video, we will discover the concept of data binding using forms in another example,
Learn the power of two–way binding
Passing Data Between Components - Part 16:46
In this video you’ll learn how to install Angular Material & animations. You’ll also using an Angular theme and design your app layout.
Install Angular Material & animations
Apply an Angular theme to your app
Create your app layout using Angular Material
Passing Data Between Components - Part 27:01
In this video you’ll find out how you can get the most out of this course and how learning Angular will make you a web development rock star
How to follow this course
How to apply this course
How by the end of the course, you’ll be an Angular rock star
Passing Data Between Components - Part 35:28
This video is about passing data between components using another example
Build our application more with material card
Look at app decorator

Learn How Services Work and Create Your First Service3:26
Learn about what services are in Angular and create your first service
Why we need services?
Learn how services work
Create your first service with Angular
Moving Your Data to the Service and Injecting It2:59
Learn how a service can be used to expose data to your application & consume it in a component
Move your array into the service & exposing it
Inject the service into you component
Consume your data in the component
Understanding Observables and How to Mock them4:49
Learn how observables work in Angular. Also find out how to mock an observable so that we can practice using them
Find out what observables are
Mock and observable
Work with observables
ADD and UPDATE Assignments with Your Service4:58
Make your service more RESTful by adding add, update methods to your service
Add an assignment with your service
Update and assignment with your service
DELETE Assignments with Your Service4:16
Use the DELETE method from the HttpClient and delete an assignments.
Delete an assignment with your service
Injecting Services into Other Services4:14
Learn how to inject a service into another service by creating a Logging Service.
Create your second service
Inject your new service into the assignments-service
Add logs to your application

How Routes Work in Angular4:25
Learn about how routes work in Angular
What are routes in Angular?
Why are routes useful in a single page application?
Prepare your app for a route
Initializing Your routes7:19
Learn how to set up your routes in Angular
Configure your routes
Route to the homepage
Route to an add assignments page
Navigating to Pages Dynamically7:33
Learn how to dynamically change a URL and navigate there
How dynamic routes work in Angular
Configure your routes to use dynamic data
Navigate programmatically using the Router
Sending and Receiving Queries Through Routes - Part 17:31
Learn how to send queries and fragments using routes
Use the router to edit an assignment
Send queries and fragments using routes
Sending Queries Through Routes - Part 26:59
Learn how to retrieve queries and fragments using routes
Receive queries and fragments through routes
Protecting Routes - Part 16:58
Learn how to restrict access to routes by creating an authentication guard
Create Auth and AuthGuard services
Restrict access to routes using your services
Protecting Routes - Part 26:08
Create a login function that allows you to restrict access to a route.
Create a login button
Reserve editing privileges for admins

Setting Up Your Database and Using the API8:00
The aim of this video is to set up a MongoDB database & API which I have provided for you
Set up your Mongo database
Set up and run the API
Connect to the database through the API
How the HttpClient Works in Angular3:43
Learn about how the HttpClient module works in Angular
What are Http calls?
How does the HttpClient module work in Angular?
What is the RxJS package?
Sending GET Requests7:50
Learn how to get all the data or a specific piece of data using the API
Set up some dummy data in our database
Return all your data from your service
Get one piece of data by its ID
Sending POST & PUT Requests7:47
Learn how POST data, update a piece of data with PUT data
POST a new assignment to your database
Update an assignment in your database
Sending DELETE Requests3:41
In this video we will learn to DELETE data.
Delete an assignment using the HttpClient
RxJS Operators6:07
RxJS is a 3rd party package to help your reactively program with observables
Learn what RxJS is
Learn what operators RxJS provides
Use the RxJS operators in your application
Error Handling and Http Headers5:48
Learn how to handle errors and send HTTP headers with your requests
Use the catchError operator to handle errors
Learn how to send HTTP headers with your requests

Material Cards - Part 16:19
Learn how to present your data using Material layouts using cards and tabs
Understand what are cards
Learn to add some information to your card
Material Cards - Part 24:06
In this video we will continue to learn about Material card. We will explore about adding images and avatar to the card.
Add an image to your card
Add an avatar to your card
Tabs in Material4:39
Learn how to use tabs in Material
Import Material Tabs
Create your tabs
Assign data to your tabs
Create a Stepper6:09
Learn how to use steppers to interactive forms
Transform your form into a stepper
Create a horizontal stepper
Create a vertical stepper
Give Feedback with Snackbars5:34
Learn how to use snackbars to give users feedback
Why Snackbars?
Learn how to use Snackbars
Create a Snackbar in your app

Virtual Scrolling5:16
Learn how you can display lists with virtual scrolling
What is virtual scrolling?
Add virtual scrolling to your app
Apply virtual scrolling to your list
Drag and Drop- Part 15:46
Learn how you can drag and drop items in Angular
What is drag & drop?
Add drag and drop top your app
Drag and drop items between lists
Drag and Drop- Part 23:27
Learn about the other new features of Angular 7 & what’s coming next
How the splitting of Angular affects your apps
How the new ng-compiler works
Update on Ivy
Other New Features2:30
In this video we will be looking at other new features of Angular 7
Learn about Angular core
Understand new ng-compiler
Get an update on Ivy
Course Wrap-Up1:51
A look back on what we’ve learned

Requirements

Some basic knowledge of web development is assumed.

Description

This course will show you how to set up an Angular project, and you'll build Angular components with the latest version of Angular 7.

In this course, you’ll learn all the fundamentals about modules, directives, components, data binding, routing, HTTP access, and providing full CRUD operations. Then you’ll learn how to route dynamically, how to retrieve data from a route, and how to protect your routes with guards. Finally, you'll see how to use material components and animations to manage transitions to give the user a wow experience.

By the end of this course, you'll have a good understanding of Angular 7 and its features in general and you'll be able to build web applications.

About the Author

Sam Orgill is a developer with over 10 years’ experience in web development. He began by helping develop websites for his father's company, which developed into successful side hustle while he was at university. He subsequently went into industry and developed his web development skills but has since gone freelance and has a passion for teaching others both the power of web development and the freedom a web development career brings.

Who this course is for:

This course is for JavaScript developers who want to learn Angular for web development, and developers who are new to web development and want to learn front end development with Angular 7. If you’re a web developer, whether you’ve worked with previous versions of Angular or not, this is a course for you to get up and running with Angular 7.

Learning Angular 7

What you'll learn

Explore related topics

Course content

Diving into Angular 76 lectures • 26min

Creating Your First and Second Components9 lectures • 59min

Creating Your First Service6 lectures • 25min

Adding Routes to Your App7 lectures • 47min

Making HTTP Calls to APIs7 lectures • 43min

Styling Your Application with Angular Material and Animations5 lectures • 27min

New Features in Angular 75 lectures • 19min

Requirements

Description

Who this course is for: