Library

Course: Angular 2 & TypeScript Beginner Web Development

Angular 2 & TypeScript Beginner Web Development

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
About this Course

Angular 2: The Complete Beginner's Guide

This course is going to teach you all of the fundamentals of Angular2

This is one of the most comprehensive courses on Angular 2 on the Internet. We use Angular 2 every day in our own projects and we wanted to share that powerful knowledge with the world!

This course is for absolute beginners & for seasoned programmers!

This course will take you down a guided learning path. You'll learn the basics of TypeScript, and move on to creating both simple and complex web apps.

Not only will you build web apps, but you will learn how to do it the way the pros do. We'll even cover advanced intermediate to advanced topics.

Here are some of the things you will learn:

  • Tooling
  • Automation
  • TypeScript
  • Components
  • Forms
  • Validation
  • Services
  • HTTP
  • Firebase
  • Directives

So much more....

And don't forget about our FREE chatroom where you can get live help, interact with the community, and find people to start your own game studio.

Now is the time to learn how to code and build web apps the Devslopes way with Angular!

Who is the target audience?

  • Anyone who wants to build a SAAS
  • Anyone who wants to learn how to build web apps
  • Mobile developers who want to build the web portion of their app
  • Web developers who want to do more than build static HTML/CSS pages
Basic knowledge
  • You'll need any computer running macOS or Windows
  • You should know the basics of HTML/CSS - but not required
What you will learn
  • Build web apps that can connect to servers
  • Build web apps that can be reused
  • Understand TypeScript & Angular 2
Curriculum
Number of Lectures: 133
Total Duration: 19:25:04
Overview and Tools
  • What is Angular 2?  

    Learn what Angular 2 is and what you can create with it.

  • Angular 2 - Why we use TypeScript  

    Learn why we will use TypeScript over Javascript and how TypeScript works.

  • Angular 2 - Overview of tools  

    Get an overview of the 2 simple tools you will be using in this course and learn how to use them.

Angular 2 - Creating a Skeleton Project
  • Angular2 - skeleton project overview  

    Learn how to create a skeleton project so you have a starting point for all your Angular 2 apps. 

  • Angular2 - Defining the Dependancies (package.json)  
  • Angular2 - Configuring the TypeScript Compiler (tsconfig.json)  

    Learn how to configure the TypeScript Compiler and how it works in your Angular 2 project.

  • Angular2 - Configuring the SystemJS Module Loader (systemjs.config.js)  

    Learn how to configure your SystemJS Module Loader and how it works in your Angular 2 project

  • Angular2 - Installing the NPM Packages (npm install)  

    Learn how to install all your dependancies using the NPM command for your Angular 2 project.

  • Angular2 - Creating the Root Module (app.module.ts)  

    Learn how to install the root module into your Angular 2 project

  • Angular2 - Creating the Root Component (app.component.ts)  

    Learn what a component is and how to include it into your Angular 2 project.

  • Angular2 - Configuring the Starting of the App (main.ts)  

    How to configure the main.ts file into your Angular 2 project.

  • Angular2 - Creating the Hosting Webpage (index.html)  

    How to create the hosting page for the entire Angular 2 app.

  • Angular2 - Creating the Global Stylesheet (styles.css)  

    How to create global stylesheets for your Angular 2 project.

  • Angular2 - Building and Running the App (npm start)  

    How to build and run your Angular 2 app.

  • Angular 2 - Creating a Skeleton Project = Assets  
Angular 2 Fundamentals - Task Card App
  • Angular 2 - Task Card App Introduction  

    Introduction to your Angular2 Task Card App 

  • Angular 2 - How to Clone the Skeleton Project  

    How to clone your skeleton project for your Angular2 app

  • Angular 2 - Creating the Card Component  

    How to create the Card Component for your Angular2 app.

  • Angular 2 - Creating the Card's HTML Markup (External Template)  

    Learn how to create the Cards HTML for your Angular2 app.

  • Angular 2 - Styling the Card Component  

    Learn how to style the Card Component for your Angular2 app.

  • Angular 2 - Adding the Task Status Icon (Third Party Library)  

    Learn how to add a status icon to the Task Card in your Angular2 app.

  • Angular 2 - Creating the Task Model Class  

    Learn how to create a Task Model Class for your Angular2 app.

  • Angular 2 - Creating the Properties for the Card Component (Input Properties)  

    Learn how to create the properties for the Card Component in your Angular2 app.

  • Angular 2 - Using the Task Property Data (Property Binding)  

    Learn how to use Property Binding with Angular2

  • Angular 2 - Creating the Task Data Source  

    Learn how to create a data source to use in your Angular2 app.

  • Angular 2 - Using the Data Source to Generate Tasks (ngFor)  

    Learn how to use your data source with ngFor in your Angular2 app.

  • Angular 2 - Creating the Add Task Form  

    Learn how to create your Add Task Form in HTML for your Angular2 app.

  • Angular 2 - Styling the Add Task Form  

    Learn how to add some style with CSS to your Add Task Form in your Angular2 app.

  • Angular 2 - Adding the Angular Form Syntax (Template Driven Form)  

    Learn how to add the Form Syntax with Angular2 in your app.

  • Angular 2 - Creating the Add Task Method (TypeScript Methods)  

    Learn how to add Tasks with TypeScript Methods to your Angular2 app.

  • Angular 2 - Adding New Tasks to the Data Source (Event Binding)  

    Learn how to use Event Binding in Angular2 to add tasks to your app.

  • Angular 2 - Protecting the Data Source from Empty Tasks  

    Learn how to protect the data source from empty tasks in your Angular2 app.

  • Angular 2 - Clearing the Input Field After Adding a Task  

    Learn how to clear the input field after adding a task in your Angular2 app.

  • Angular 2 - Marking Tasks as Complete/Not Complete  

    Learn how to mark your task complete/incomplete in your Angular2 app.

  • Angular 2 - Styling the Completed Cards (Class Binding)  

    Learn how to use Class Binding with Angular2 to style your completed cards.

  • Angular 2 - Setting the Task Status Label to Reflect the Status (ngIf)  

    Learn how to use ngIf with Angular2 to set the task status label in your app.

  • Angular 2 - NgIf Directive vs the Hidden Property  

    Learn the difference between the NgIf Directive and the Hidden Property in Angular2.

  • Angular 2 - Final Tweaks  

    Lets make the final tweaks to our Angular2 Task Card app.

  • Exercise  
  • Angular 2 Fundamentals - Task Card App = Assets  
Web API's/HTTP - Reusable Weather Component
  • Angular 2 - Introduction to the App  

    Introduction to our Reusable Weather Component in Angular 2

  • Angular 2 - Creating the Weather Component  

    Learn how to create the weather component for our Angular 2 app.

  • Angular 2 - Creating the Weather Component Template  

    Learn how to create the weather component template for our Angular 2 app.

  • Angular 2 - Styling the Weather Component  

    Learn how to style our weather component for our Angular 2 app.

  • Angular 2 - Creating the Weather Component (Services)  

    Learn how to create a Service for our Angular 2 Weather Component app.

  • Angular 2 - An Introduction to Dependency Injection  

    Learn about Dependency Injection for our Angular 2 app.

  • Angular 2 - Getting the User's Geographical Location  

    Learn how to get the users geographical location in our Angular 2 app.

  • Angular 2 - Signing Up for Forecast.io (Weather Data Web API)  

    Signing up for Forecast.io to use with our weather data web API in our Angular 2 app.

  • Angular 2 - Introduction to Observables (ReactiveX (RXJS) Library)  

    Learn what and how to use observables in Angular 2. (ReactiveX (RXJS) Library)

  • Angular 2 - Introduction to JSONP Get Requests (HTTP/JSONP)  

    Learn how to use JSONP get requests in Angular 2

  • Angular 2 - Getting the Weather Data (HTTP/JSONP)  

    Learn how to get weather data using HTTP/JSONP in Angular 2

  • Angular 2 - Converting the Location Method to an Observable  

    Learn how to convert the location method to an observable in Angular 2

  • Angular 2 - Creating the Weather Model Class  

    Learn how to create the Weather Model Class in our Angular 2 app.

  • Angular 2 - Introduction to the Component Lifecycle  

    Learn about the Component Lifecycle in Angular 2

  • Angular 2 - Subscribing to the Weather Data Observable (ngOnInit)  

    Learn how to use the Angular 2 ngOnInit to subscribe to our Weather Data Observable

  • Angular 2 - Displaying the Weather Data in the Template  

    Learn how to display the weather data using Angular 2 in our template.

  • Angular 2 - Formatting the Weather Data on the Template (Pipes)  

    Learn how to use Angular 2 pipes to format the weather data in our template.

  • Angular 2 - Converting the Wind Value (Custom Pipes)  

    Learn how to use Angular 2 custom pipes to covert the wind value in our app.

  • Angular 2 - Converting the Temperature Value (Custom Pipes)  

    Learn how to use Angular 2 custom pipes to covert the temperature value in our app.

  • Angular 2 - Getting a Google Maps API Key  

    Learn how to get the Google Maps API key to use in our Angular 2 app.

  • Angular 2 - Getting the Location Name Using Reverse Geocoding (Google Maps API)  

    Learn how to use Reverse Geocoding with Google Maps API to get our location name in our Angular 2 app.

  • Angular 2 - Displaying the Location on the Component  

    Learn how to display the location on the component in our Angular 2 app.

  • Angular 2 - Allowing the Changing of the Data Units  

    Learn how to use Angular 2 to allow our data units to change

  • Angular 2 - Adding the Javascript Icon Library (Skycons)  

    Learn how to add the javascript icon library to our Angular 2 app.

  • Angular 2 - Adding the Animated Weather Icons  

    Learn how to animate weather icons in our Angular 2 app.

  • Angular 2 - Configuring the Weather Based Colors  

    Learn how to configure the weather based colors in our Angular 2 app.

  • Angular 2 - Changing the Component Colors Based on the Weather (ngStyle)  

    Learn how to use Angular 2 ngStyle to change the component colors based on the weather.

  • Angular 2 - Hiding the Component Content Until the Data is Available  

    Learn how to use Angular 2 to hide the component content until the data is available.

  • Angular 2 - Adding a Loading Indicator  

    Learn how to add a loading indicator to our Angular 2 project.

  • Angular 2 - Final Tweaks (Reusable Weather Componet)  

    Adding some final tweaks to our Angular 2 weather app.

  • Angular 2 - Reusing the Component in Another App  

    Learn how to reuse the component in another Angular 2 app.

  • Angular 2 - Summary and Challenges  

    A quick summary of everything you've learned in this Angular 2 weather app and a fun challenges for you to add additional functionality to the app.

  • Web API's/HTTP - Reusable Weather Component = Assets  
Real World Angular 2 App with Backend - Bugged Out
  • Introduction to the Bugged Out App  

    A brief overview of the Angular 2 Bugged Out App you'll be building.

  • Angular 2 - Adding the Bugs Module (Feature Module)  

    Learn how to add the Feature Module to your Angular2 app.

  • Angular 2 - Creating a Shared Module  

    Learn how to create a shared module with Angular 2

  • Angular 2 - Creating the Bug List Component  

    Learn how to use Angular2 to create a bug list component.

  • Angular 2 - Introduction to Routing  

    Learn how to use Angular2 routing.

  • Angular 2 - Creating the Router  

    Learn how to create the router with Angular2.

  • Angular 2 - Creating the Bug Module's Own Routing  

    Learn how to create the bug module's own routing using Angular2

  • Angular 2 - Implementing Route Redirection  

    Learn how to implement Angular2 route redirection.

  • Angular 2 - Adding Wildcard Routing  

    Learn how to add wildcard routing with Angular2

  • Angular 2 - Creating the Navbar Component  

    Learn how to create the Navbar Component in our Angular2 app.

  • Angular 2 - Creating the Navbar Template  

    Learn how to create the Navbar Template for our Angular2 app.

  • Angular 2 - Styling the Navbar  

    Lets learn how to style the Navbar in our Angular2 app.

  • Angular 2 - Introduction to Router Links  

    Learn how to use Angular2 router links.

  • Angular 2 - Creating the Bug List Template  

    Learn how to create the Bug List Template in our Angular2 app.

  • Angular 2 - Styling the Bug List Component  

    Lets style the Bug List Component in our Angular2 app.

  • Angular 2 - Introduction to the Core Module  
  • Angular 2 - Creating the Core Module  

    Learn how to create the Angular2 core module

  • Angular 2 - Introduction to Firebase  

    Learn how we will use Firebase in our Angular2 app.

  • Angular 2 - Creating the Firebase Project  

    Learn how to create the Firebase Project for our Angular2 App.

  • Angular 2 - Adding the Firebase SDK  

    Learn how to add the Firebase SDK to our Angular2 app.

  • Angular 2 - Creating the Firebase Config Service  

    Learn how to create the Firebase Config Service for our Angular2 app.

  • Angular 2 - Structuring Our Bug Data in the Firebase Database  

    Learn how to structure our Bug Data in the Firebase Database for use in our Angular2 app.

  • Angular 2 - Configuring Access to the Firebase Database  

    Learn how to configure access to the Firebase Database for our Angular2 app.

  • Angular 2 - Creating the Bug Service  

    Learn how to create the Bug Service with Angular2.

  • Angular 2 - Introduction to Firebase Listeners  

    Learn how to use Firebase Listeners for our Angular2 app.

  • Angular 2 - Using a Firebase Listener to Get Data  

    Learn how to use Firebase Listeners to get data in our Angular2 app.

  • Angular 2 - Typescript Data Encapsulation  

    Learn how to use Typescript Data Encapsulation in our Angular2 app.

  • Angular 2 - Creating the Bug Model Class  

    Learn how to create the Angular2 Bug Model Class.

  • Angular 2 - Parsing the Bug Data from Firebase (TypeScript Casting)  

    Learn how to Parse Data from Firebase with Typescript Casting in our Angular2 app.

  • Angular 2 - Displaying the Bugs in the Table  

    Learn how to display the Bugs in the Table in our Angular2 app.

  • Angular 2 - Creating the Bug Detail Component  

    Learn how to create the Bug Detail Component using Angular2.

  • Angular 2 - Creating the Bug Detail Template (Bootstrap Modal)  

    Learn how to create the Bug Detail Template using Bootstrap in our Angular2 app.

  • Angular 2 - Displaying the Bug Detail Modal (Attribute Binding)  

    Learn how to display the bug detail modal using the Angular2 attribute binding.

  • Angular 2 - Creating the Bug Detail Form  

    Learn how to create the bug detail form for our Angular2 app.

  • Angular 2 - Styling the Bug Detail Form  

    Learn how to style the detail form in our Angular2 app.

  • Angular 2 - Creating the Form Model (Reactive Forms/Model Driven Forms)  

    Learn how to create the Form Model in Angular2.

  • Angular 2 - Binding the Form Model to the Template  

    Learn how to build the Form Model template in our Angular2 app.

  • Angular 2 - Submitting the Reactive Form  

    Learn how to submit the reactive form for our Angular2 app.

  • Angular 2 - Using Validators for Form Validation  

    Learn how to create Angular2 Validators for Form Validation.

  • Angular 2 - Introduction to Form and FormControl States  

    Learn how Angular2 Form and FormControl States work.

  • Angular 2 - Creating a Custom Validator  

    Learn how to create your first Custom Validator in Angular2.

  • Angular 2 - Applying a Custom Validator (Reactive Form / Model Driven Form)  

    Learn how to apply your Angular2 Custom Validator you created.

  • Angular 2 - Applying Validation Styling  

    Learn how to style your new Angular2 Validator.

  • Angular 2 - Creating Reactive Forms Using the FormBuilder  

    Learn how to create the reactive forms using your Angular2 FormBuilder.

  • Angular 2 - Creating the Add Bug TypeScript Method  

    Learn how to create the Add Bug with the TypeScript Method in your Angular2 app.

  • Angular 2 - Using the Add Bug TypeScript Method  

    Learn how to use your Add Bug Typescript Method in your Angular2 app.

  • Angular 2 - Resetting the Form on Submit  

    Learn hot to reset the form on submit with Angular2.

  • Angular 2 - Passing an Existing Bug into the Form  

    Learn how to pass an existing bug into the form with Angular2.

  • Angular 2 - Creating the Bug Update Method  

    Learn how to create the Bug Update Method in Angular2.

  • Angular 2 - Using the Update Bug Method  

    Learn how to use your Angular2 Update Bug Method.

  • Angular 2 - Adding a Firebase Child Changed Listener  

    Learn how to add a child changed listener with Firebaseto work with your Angular2 app.

  • Angular 2 - Parsing the Bug Updates  

    Learn how to parse the bug updates in your Angular2 app.

  • Angular 2 - Transforming the Date Format in the Table  

    Learn how to transform the Date Format in the Table with Angular2.

  • Angular 2 - Displaying the Status String in the Table (TypeScript Enum)  

    Learn how to display the Status String in the Table with TypeScript Enum in our Angular 2 app.

  • Angular 2 - Displaying the Severity String in the Table  

    Learn how to display the Severity String in the Table in our Angular2 app.

  • Using the TypeScript Enums for the Dropdowns  

    Learn how to use the TypeScript Enums for the dropdowns in your Angular 2 app.

  • Disabling the Submit Button when the Form is Invalid  

    Learn how to disable the Submit Button in Angular 2 when forms are invalid.

  • Final Tweaks of the Bugged Out App  

    Make the final tweaks to your Angular 2 Bugged Out App.

  • Bugged Out Exercise  

    Push your Angular 2 skills with this fun exercise for your Bugged Out App.

  • Real World Angular 2 App with Backend - Bugged Out = Assets  
Reviews (0)