Master Angular 4 by Example - Build 7 Awesome Apps!
3.6 (57 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
880 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Master Angular 4 by Example - Build 7 Awesome Apps! to your Wishlist.

Add to Wishlist

Master Angular 4 by Example - Build 7 Awesome Apps!

Learn many advanced features in Angular 2+ by building 7 applications. Includes CRUD, Node.js, Routing and much more!
3.6 (57 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
880 students enrolled
Created by Patrick Schroeder
Last updated 7/2017
English
Current price: $10 Original price: $195 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 8 hours on-demand video
  • 80 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Develop Applications using Angular
  • Build Apps with Angular and Node.js
  • Implement CRUD in Angular
  • Use Advanced Routing
  • Go Real-Time with SocketIO
  • Work with Template-driven and Reactive Forms
  • Add Modal, Tooltips and Pagination
  • Understand how to use Observables
  • Display Loading and Error Messages
  • Work with Many Different API's
View Curriculum
Requirements
  • Angular 2 Basics
  • Javascript Basics
Description

Learn Angular 4 by building 7 interesting applications

In this course we cover many important and advanced Angular features that you can use right away in your own applications.

For each example app, we will download a simple boilerplate and then jump right in and start coding our apps. This course is suitable for anyone who already understands the basics of putting together Angular 2+ applications.

About the Apps:

1. Simple CRUD

- You will learn:

  • To use our Boilerplate code
  • How to perform CRUD operations on a list of products
  • Basic Angular concepts such as ngFor and ngIf
  • How to build components, services and modules

...

2. Pokedek

- You will learn

  • CRUD using the in-memory-API
  • How to use Observables
  • Working with Template driven forms
  • Add a Modal and Tooltips

...

3. TV Watcher

- You will learn:

  • How to separate your code by feature into their own Modules
  • Routing to muliple parameters
  • How to pass data to unrelated components
  • How to send multiple HTTP requests using forkJoin 
  • Handle errors and display loaders
  • Use the TVMaze API to search and display shows

...

4. Weather App

- You will learn about:

  • Observables including advanced concepts like debounceTime and switchMap
  • How to perform CRUD operations to add and remove new Weather items
  • Using Reactive forms
  • Input and Output
  • Communicating with the OpenWeather API

...

5. Socket Chat

- You will learn:

  • How to connect Angular to a Node.js backend
  • Use Socket-IO to connect client with server
  • Send messages in real-time across unlimited connected clients

...

6. Twitter Streaming

- You will learn:

  • How to connect Angular to Node.js
  • How to use the Twit npm module to connect to the Twitter API
  • To search tweets by keyword 
  • To display tweets in real-time using Socket-IO. 
  • Create pagination using ng2-bootstrap

...

7. Geonames App

- You will learn:

  • How to sort and filter data 
  • How to route to an inner page
  • Use the Geonames API

...

More to come!  You can expect at least 1 more app to be added to this course.  

Enroll now to take full advantage of the limitless possibilities when using Angular to develop your applications!

Who is the target audience?
  • Someone who already understands the basics of building Angular 2 applications using typescript.
  • Developers who want to explore more advanced concepts in building their Angular applications.
Compare to Other Angular Courses
Curriculum For This Course
85 Lectures
08:02:25
+
Introduction
2 Lectures 04:07

We'll be using a basic starting template for each of our projects. This starter code can be found in the intro lecture of every section or in the github repo.

The Boilerplate
02:17
+
Simple CRUD App
11 Lectures 56:54

Overview of the project that includes app demo and what you will learn.

Preview 01:27

Basic setup for our application and an introduction to our boilerplate that we'll be using throughout this course.

Setup
05:22

Create our product component and service. Add in our raw html into the product.template file.

Basic Component and Service
04:49

Create our getProducts method inside our service and in 3 products to display in our template.

Get Products
04:24

Create a data store for our product items and remove these from our service file.

Product Items
03:48

Create our edit products form method to display and edit products.

Edit Products Form
06:43

Create our add products method in our service to add new products to our application.

Add Products
04:54

In this video we will add lodash to our package.json so we can use the clone and findIndex methods to update our products. We'll also be updating our product.template file to add in a new form field.

Update Product
07:23

Finish with our product update implementation by adding updateProduct methods to our component and service.

Update Product - Part 2
08:44

Remove a product from our list using the splice method.

Remove Product
03:53

Add in a currency pipe to display USD as the price. Create a method to cancel actions in our product form.

Cancel Method & Currency Pipe
05:27
+
Pokedek
15 Lectures 01:23:37

Overview of the project that includes a demo of the Pokedek app and what you will learn.

Preview 01:40

Project setup. This includes adding in our font-awesome and Bootstrap v6 to our list of dependencies, downloading our packages, and editing our index.html file to include new scripts.

Setup
06:09

Fix our navbar so that it works with Bootstrap V4. Include our newly created components and service into our app.module.ts file. Add in the code for our Pokemon interface.

Fix Navbar
06:38

Add in our jumbotron and pokemon list HTML template.

Jumbotron
04:16

Add a getPokemon() method to our pokemon service file to get all pokemons.

Pokemon Service
04:59

Add bindings to our pokemons list template and display all the pokemons on our home page.

List Pokemons
04:04

Add a pokemon-data file that utilizes the in-memory-API to perform CRUD operations on our pokemon data.

Refactor using In-Memory-API
06:01

Add logic for deleting a Pokemon.

Delete Pokemon
07:47

Add in the pokemon form and create our template bindings.

Add Pokemon Form
07:52

Add in the logic for saving a new pokemon.

Save Pokemon
04:35

Add better form validation by adding mouseenter and mouseleave events to our submit button.

Form Validation
05:14

Add NG2-bootstrap to our project so we can include functionality like a modal and tooltip in our application.

Modal and Tooltip
06:07

Add methods for retrieving single pokemon and display the details in our modal.

Get Single Pokemon
05:05

Finish work on our modal by adding single pokemon bindings to our modal template.

Modal Template
05:29

Refactor modal into a child component.

Refactor Modal
07:41
+
TV Watcher
21 Lectures 02:09:41

Overview of the project that includes app demo and what you will learn.

Preview 01:20

Project setup. Clone ng-boilerplate from our github repo, add Bootstrap V4 and include scripts inside our index.html file.

Setup
07:36

Begin work on our navigation and footer elements. Separate this functionality into its own UI module.

Menu and Footer
05:33

Finish setting up the UI section of our app. Add selectors to our app.template file to display these areas on every page.

Menu and Footer - Part 2
09:43

Begin work on our carousel. Add our files, scaffold out the components and add them to our Carousel Module.

Carousel Setup
06:34

Add code for our carousel service and carousel container component.

Carousel Service
06:22

Finish coding our carousel template. Debug errors and add in our Provider and Service.

Carousel Template
07:18

Begin work on our featured shows to be displayed below the carousel. Add our new files, create an interface, and code the featured-shows template.

Featured Shows
04:39

Add our show-details template and our Featured Module.

Featured Shows - Module
04:16

Add code for our featured service and featured comonent files.

Featured Shows - Service
04:38

Fill out our show details and add our featured shows selector below the carousel.

Featured Shows - Show Details
04:35

Begin work on our find shows feature. In this video we take a look at the TvMaze API and add in the template we'll be using to display our list of shows.

Find Shows
06:19

Add our Search Module and fix a bug when adding new links to our navbar.

Find Shows - Module
04:57

Add in our service and component files to make a call to the TvMaze API. We'll be using Reactive Forms to pass the query string to our GET request.

Find Shows - Service & Component
08:07

Edit our search template to display shows. Test out our new search functionality.

Find Shows - Template
05:17

Begin work on search functionality from the Navbar. Create a Nav Service and add it to our Search Bar component.

Search in Navbar
07:35

Finish implementing search functionality using our Navbar component. 

Search in Navbar - Part 2
08:19

Introduction to our details page. Add in our new files and scaffold out our component and service files.

Details Page
06:23

Add in our two interface files and code our Details Service.

Details Page - Service
07:33

Code our Details Component file.

Details Page - Component
07:03

Add binding to our template page and test our finished TV Watcher app.

Details Page - Template
05:34
+
Weather App
10 Lectures 01:02:00

Overview of the project that includes app demo and what you will learn.

Preview 02:13

Project setup includes editing our navbar and creating the necessary folders and files.

Resources includes the finished code.  Check the previous lecture to find the boilerplate code.

Setup
06:17

Scaffold our components and add to app.module. Add our weather interface.

Weather Interface
07:02

Set up our weather service and add in our methods.

Weather Service
09:25

Add our component HTML code and test app.

Component HTML
05:47

Putting together our weather search component so we can display cities.

Weather Search Component - Part 1
06:17

Finishing up our weather search component and testing out the functionality.

Weather Search Component - Part 2
07:18

Create our profile service and refactor out our rxjs imports into their own file.

Profile Service
05:00

Walk through our sidebar template html file. Create the first 2 methods inside our sidebar component file.

Sidebar Html and Component
06:41

Add 3 more methods to our sidebar component and test out our finished application!

Finish Sidebar Component
06:00
+
Socket Chat
5 Lectures 27:39

Overview of the project that includes app demo and what you will learn.

Preview 00:47

Setup our application. This includes using gulp to add a lib folder to our frontend and setting up a simple Node server using express.js.

Setup
08:16

Connect socket.io to client and server. Test sending and receiving messages using On() and Emit() methods.

Socket.io Connection
05:04

Create a socket service provider. Add in our home.template file.

Socket Service
06:22

Add chat functionality in our home component and server.js files.

Adding Chat
07:10
+
Twitter Stream
13 Lectures 01:15:47

Overview of the project that includes app demo and what you will learn.

Preview 01:19

In this video we'll explore the modules used. Then set up our server and run our app.

Setup
09:04

Add ng2-bootstrap to our app and create our ITweet interface.

ITweet Interface
06:04

Add a searchTweets method to tweet service and start work on our tweet component.

Tweet Service
09:15

Setup our Tweet component, service and template files.

Tweet Files
08:04

Finish our tweet component and test our app by displaying the tweet object we get in our console.

Tweet Component
05:27

Finish adding angular code to HTML file. Test out search functionality.

Tweet Template
08:28

Add the timeAgo pipe in order to display tweets that gets updated in real time.

TimeAgo Pipe
02:36

Overview of how to set up the streaming portion of our app and connect to socket.io.

Streaming Setup
05:40

Add server side functions to send messaging based on different stream events. Setup our socket service to stream tweets using socket.io.

Socket Service
05:04

Setup our stream component and stream template.

Stream Component
05:18

Add socket service methods to stream in tweets. Test out our streaming tweet implementation.

Stream Tweets
05:13

Refactor our stream component to use observables instead of events to start streaming and handle the emitted objects.

Refactor Stream to Observable
04:15
+
Geonames App
8 Lectures 42:40

Overview of the project that includes app demo and what you will learn.

Preview 00:57

Setup our project using the ng-boilerplate and add our country interface.

Setup
04:29

Add our geoname service so that we can load all countries and display the data into a table.

Geoname Service
05:50

Add the functionality of filtering countries by Europe, Population or All.

Filter
05:35

Add options to sort our countries by name and population.

Sort
06:16

Add jumbotron, spinner and error message to our home.template file.

Jumbotron
05:22

Add country details page to display individual country info. Includes new route and method to retrieve country data.

Country Page
06:55

Finish up the country page by adding our new getCountry() method to our component and angularize our HTML file.

Country Page - Part 2
07:16
About the Instructor
Patrick Schroeder
4.2 Average rating
6,921 Reviews
106,899 Students
9 Courses
Software Developer

Patrick Schroeder is a self-taught full stack JavaScript developer. He enjoys working with Angular, Node.js, Mongodb, React.js, Firebase, and anything else javascript related. Patrick is passionate about teaching Javascript. He loves to help others understand difficult concepts by creating clear presentations that gradually builds to full comprehension of a given topic. He is very interested in furthering his knowledge of IOT and wearable products with the intention of teaching cutting edge technologies and collaborating to bring new products to life.