Master Angular 4 by Example - Build 7 Awesome Apps!

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

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

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

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

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

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

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

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.

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

Remove a product from our list using the splice method.

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

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

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.

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.

Add in our jumbotron and pokemon list HTML template.

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

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

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

Add logic for deleting a Pokemon.

Add in the pokemon form and create our template bindings.

Add in the logic for saving a new pokemon.

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

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

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

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

Refactor modal into a child component.

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

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

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

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

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

Add code for our carousel service and carousel container component.

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

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.

Add our show-details template and our Featured Module.

Add code for our featured service and featured comonent files.

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

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.

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

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.

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

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

Finish implementing search functionality using our Navbar component. 

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

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

Code our Details Component file.

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

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

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.

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

Set up our weather service and add in our methods.

Add our component HTML code and test app.

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

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

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

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

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

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

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.

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

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

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

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

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

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

Setup our Tweet component, service and template files.

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

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

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

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

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

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

Setup our stream component and stream template.

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

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

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

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

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

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

Add options to sort our countries by name and population.

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

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

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