Angular 2 & TypeScript Beginner Web Development
4.1 (424 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.
5,273 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2 & TypeScript Beginner Web Development to your Wishlist.

Add to Wishlist

Angular 2 & TypeScript Beginner Web Development

Angular 2 web development for beginners with TypeScript & Firebase
4.1 (424 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.
5,273 students enrolled
Created by Mark Price
Last updated 3/2017
English
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 19.5 hours on-demand video
  • 3 Articles
  • 6 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build web apps that can connect to servers
  • Build web apps that can be reused
  • Understand TypeScript & Angular 2
View Curriculum
Requirements
  • You'll need any computer running macOS or Windows
  • You should know the basics of HTML/CSS - but not required
Description

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:

  1. Tooling
  2. Automation
  3. TypeScript
  4. Components
  5. Forms
  6. Validation
  7. Services
  8. HTTP
  9. Firebase
  10. Directives
  11. 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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
133 Lectures
19:32:21
+
Overview and Tools
4 Lectures 32:15

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

Preview 03:57

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

Preview 18:48

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

Preview 09:15

How to get free live help
00:15
+
Angular 2 - Creating a Skeleton Project
12 Lectures 02:03:07

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

Preview 03:26

Learn what dependancies are and how to add them to your Angular 2 project.

Angular2 - Defining the Dependancies (package.json)
27:20

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

Angular2 - Configuring the TypeScript Compiler (tsconfig.json)
07:54

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

Angular2 - Configuring the SystemJS Module Loader (systemjs.config.js)
19:22

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

Angular2 - Installing the NPM Packages (npm install)
08:11

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

Angular2 - Creating the Root Module (app.module.ts)
10:46

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

Angular2 - Creating the Root Component (app.component.ts)
11:59

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

Angular2 - Configuring the Starting of the App (main.ts)
05:02

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

Angular2 - Creating the Hosting Webpage (index.html)
16:20

How to create global stylesheets for your Angular 2 project.

Angular2 - Creating the Global Stylesheet (styles.css)
03:21

How to build and run your Angular 2 app.

Angular2 - Building and Running the App (npm start)
09:26

Assets
00:00
+
Angular 2 Fundamentals - Task Card App
25 Lectures 02:58:58

Introduction to your Angular2 Task Card App 

Preview 03:37

How to clone your skeleton project for your Angular2 app

Angular 2 - How to Clone the Skeleton Project
11:24

How to create the Card Component for your Angular2 app.

Angular 2 - Creating the Card Component
16:30

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

Angular 2 - Creating the Card's HTML Markup (External Template)
06:54

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

Angular 2 - Styling the Card Component
03:04

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

Angular 2 - Adding the Task Status Icon (Third Party Library)
11:36

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

Angular 2 - Creating the Task Model Class
04:38

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

Angular 2 - Creating the Properties for the Card Component (Input Properties)
04:24

Learn how to use Property Binding with Angular2

Angular 2 - Using the Task Property Data (Property Binding)
08:24

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

Angular 2 - Creating the Task Data Source
08:38

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

Angular 2 - Using the Data Source to Generate Tasks (ngFor)
10:15

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

Angular 2 - Creating the Add Task Form
05:40

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

Angular 2 - Styling the Add Task Form
09:05

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

Angular 2 - Adding the Angular Form Syntax (Template Driven Form)
13:40

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

Angular 2 - Creating the Add Task Method (TypeScript Methods)
10:24

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

Angular 2 - Adding New Tasks to the Data Source (Event Binding)
04:47

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

Angular 2 - Protecting the Data Source from Empty Tasks
06:42

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

Angular 2 - Clearing the Input Field After Adding a Task
01:59

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

Angular 2 - Marking Tasks as Complete/Not Complete
06:00

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

Angular 2 - Styling the Completed Cards (Class Binding)
07:39

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

Angular 2 - Setting the Task Status Label to Reflect the Status (ngIf)
05:48

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

Angular 2 - NgIf Directive vs the Hidden Property
05:44

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

Angular 2 - Final Tweaks
10:28

Exercise
01:38

Assets
00:00
+
Web API's/HTTP - Reusable Weather Component
33 Lectures 04:52:18

Introduction to our Reusable Weather Component in Angular 2

Preview 02:47

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

Angular 2 - Creating the Weather Component
12:35

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

Angular 2 - Creating the Weather Component Template
07:51

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

Angular 2 - Styling the Weather Component
06:30

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

Angular 2 - Creating the Weather Component (Services)
12:41

Learn about Dependency Injection for our Angular 2 app.

Angular 2 - An Introduction to Dependency Injection
13:26

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

Angular 2 - Getting the User's Geographical Location
11:19

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

Angular 2 - Signing Up for Forecast.io (Weather Data Web API)
04:29

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

Angular 2 - Introduction to Observables (ReactiveX (RXJS) Library)
06:29

Learn how to use JSONP get requests in Angular 2

Angular 2 - Introduction to JSONP Get Requests (HTTP/JSONP)
03:19

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

Angular 2 - Getting the Weather Data (HTTP/JSONP)
19:05

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

Angular 2 - Converting the Location Method to an Observable
14:51

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

Angular 2 - Creating the Weather Model Class
03:40

Learn about the Component Lifecycle in Angular 2

Angular 2 - Introduction to the Component Lifecycle
02:53

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

Angular 2 - Subscribing to the Weather Data Observable (ngOnInit)
11:30

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

Angular 2 - Displaying the Weather Data in the Template
03:00

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

Angular 2 - Formatting the Weather Data on the Template (Pipes)
07:23

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

Angular 2 - Converting the Wind Value (Custom Pipes)
12:06

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

Angular 2 - Converting the Temperature Value (Custom Pipes)
09:41

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

Angualr 2 - Getting a Goole Maps API Key
05:22

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

Angular 2 - Getting the Location Name Using Reverse Geocoding (Google Maps API)
15:57

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

Angular 2 - Displaying the Location on the Component
03:19

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

Angular 2 - Allowing the Changing of the Data Units
12:05

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

Angular 2 - Adding the Javascript Icon Library (Skycons)
03:57

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

Angular 2 - Adding the Animated Weather Icons
10:39

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

Angular 2 - Configuring the Weather Based Colors
09:28

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

Angular 2 - Changing the Component Colors Based on the Weather (ngStyle)
13:38

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

Angular 2 - Hiding the Component Content Until the Data is Available
08:03

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

Angular 2 - Adding a Loading Indicator
06:23

Adding some final tweaks to our Angular 2 weather app.

Angular 2 - Final Tweaks
20:21

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

Angular 2 - Reusing the Component in Another App
13:50

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.

Angular 2 - Summary and Challenges
03:41

Assets
00:00
+
Real World Angular 2 App with Backend - Bugged Out
59 Lectures 09:05:42

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

Introduction to the Bugged Out App
01:45

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

Angular 2 - Adding the Bugs Module (Feature Module)
13:34

Learn how to create a shared module with Angular 2

Angular 2 - Creating a Shared Module
16:48

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

Angular 2 - Creating the Bug List Component
05:45

Learn how to use Angular2 routing.

Angular 2 - Introduction to Routing
08:15

Learn how to create the router with Angular2.

Angular 2 - Creating the Router
13:06

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

Angular 2 - Creating the Bug Module's Own Routing
10:18

Learn how to implement Angular2 route redirection.

Angular 2 - Implementing Route Redirection
04:54

Learn how to add wildcard routing with Angular2

Angular 2 - Adding Wildcard Routing
04:18

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

Angular 2 - Creating the Navbar Component
05:42

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

Angular 2 - Creating the Navbar Template
09:38

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

Angular 2 - Styling the Navbar
06:20

Learn how to use Angular2 router links.

Angular 2 - Introduction to Router Links
07:54

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

Angular 2 - Creating the Bug List Template
07:58

Lets style the Bug List Component in our Angular2 app.

Angular 2 - Styling the Bug List Component
13:28

Angular 2 - Introduction to the Core Module
09:30

Learn how to create the Angular2 core module

Angular 2 - Creating the Core Module
14:12

Learn how we will use Firebase in our Angular2 app.

Angular 2 - Introduction to Firebase
06:52

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

Angular 2 - Creating the Firebase Project
02:41

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

Angular 2 - Adding the Firebase SDK
03:38

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

Angular 2 - Creating the Firebase Config Service
15:48

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

Angular 2 - Structuring Our Bug Data in the Firebase Database
12:50

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

Angular 2 - Configuring Access to the Firebase Database
05:34

Learn how to create the Bug Service with Angular2.

Angular 2 - Creating the Bug Service
03:58

Learn how to use Firebase Listeners for our Angular2 app.

Angular 2 - Introduction to Firebase Listeners
16:45

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

Angular 2 - Using a Firebase Listener to Get Data
23:51

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

Angular 2 - Typescript Data Encapsulation
11:09

Learn how to create the Angular2 Bug Model Class.

Angular 2 - Creating the Bug Model Class
05:38

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

Angular 2 - Parsing the Bug Data from Firebase (TypeScript Casting)
09:50

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

Angular 2 - Displaying the Bugs in the Table
04:40

Learn how to create the Bug Detail Component using Angular2.

Angular 2 - Creating the Bug Detail Component
05:25

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

Angular 2 - Creating the Bug Detail Template (Bootstrap Modal)
05:07

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

Angular 2 - Displaying the Bug Detail Modal (Attribute Binding)
12:49

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

Angular 2 - Creating the Bug Detail Form
13:07

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

Angular 2 - Styling the Bug Detail Form
15:03

Learn how to create the Form Model in Angular2.

Angular 2 - Creating the Form Model (Reactive Forms/Model Driven Forms)
07:42

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

Angular 2 - Binding the Form Model to the Template
08:00

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

Angular 2 - Submitting the Reactive Form
06:33

Learn how to create Angular2 Validators for Form Validation.

Angular 2 - Using Validators for Form Validation
07:25

Learn how Angular2 Form and FormControl States work.

Angular 2 - Introduction to Form and FormControl States
09:15

Learn how to create your first Custom Validator in Angular2.

Angular 2 - Creating a Custom Validator
17:54

Learn how to apply your Angular2 Custom Validator you created.

Angular 2 - Applying a Custom Validator (Reactive Form / Model Driven Form)
06:26

Learn how to style your new Angular2 Validator.

Angular 2 - Applying Validation Styling
07:14

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

Angular 2 - Creating Reactive Forms Using the FormBuilder
06:13

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

Angular 2 - Creating the Add Bug TypeScript Method
06:24

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

Angular 2 - Using the Add Bug TypeScript Method
11:51

Learn hot to reset the form on submit with Angular2.

Angular 2 - Resetting the Form on Submit
05:38

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

Angular 2 - Passing an Existing Bug into the Form
16:53

Learn how to create the Bug Update Method in Angular2.

Angular 2 - Creating the Bug Update Method
08:36

Learn how to use your Angular2 Update Bug Method.

Angular 2 - Using the Update Bug Method
13:22

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

Angular 2 - Adding a Firebase Child Changed Listener
03:39

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

Angular 2 - Parsing the Bug Updates
13:11

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

Angular 2 - Transforming the Date Format in the Table
03:11

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

Angular 2 - Displaying the Status String in the Table (TypeScript Enum)
10:21

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

Angular 2 - Displaying the Severity String in the Table
05:19

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

Using the TypeScript Enums for the Dropdowns
19:40

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

Disabling the Submit Button when the Form is Invalid
09:38

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

Final Tweaks of the Bugged Out App
09:55

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

Bugged Out Exercise
03:12
About the Instructor
Mark Price
4.5 Average rating
24,706 Reviews
128,808 Students
16 Courses
Unity 3D Android iOS 10 Swift 3 & React Teacher

I am a veteran mobile developer having built over 57 mobile apps for iOS and Android, and I've also build multiple Unity 3D games, including Call of Duty Ghosts mobile. 

I also spend most of my days now as a professional engineering instructor - changing the lives of students throughout the world - helping them make amazing salaries as engineers.

My passion is helping people reveal hidden talents and guide them into the world of startups and programming. I currently am teaching iOS 10, Apple TV & tvOS, React & Flux web development, Objective-C, Swift 3, Android, Javascript, Node, and Java. I also teach Unity 3D game development.