Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreAngular 2 & TypeScript Beginner Web Development
Rating: 3.9 out of 53.9(578 ratings)
5,947 students
Angular 2 & TypeScript Beginner Web Development
Angular 2 web development for beginners with TypeScript & Firebase
Created byMark Price, Devslopes by Nathan Sevedge
Last updated 9/2018
English
What you'll learn
- Build web apps that can connect to servers
- Build web apps that can be reused
- Understand TypeScript & Angular 2
Explore related topics
Course content
5 sections • 132 lectures • 19h 32m total length
- What is Angular 2?3:57
Learn what Angular 2 is and what you can create with it.
- Angular 2 - Why we use TypeScript18:48
Learn why we will use TypeScript over Javascript and how TypeScript works.
- Angular 2 - Overview of tools9:15
Get an overview of the 2 simple tools you will be using in this course and learn how to use them.
- Angular2 - skeleton project overview3:26
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)27:20
Learn what dependancies are and how to add them to your Angular 2 project.
- Angular2 - Configuring the TypeScript Compiler (tsconfig.json)7:54
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)19:22
Learn how to configure your SystemJS Module Loader and how it works in your Angular 2 project
- Angular2 - Installing the NPM Packages (npm install)8:11
Learn how to install all your dependancies using the NPM command for your Angular 2 project.
- Angular2 - Creating the Root Module (app.module.ts)10:46
Learn how to install the root module into your Angular 2 project
- Angular2 - Creating the Root Component (app.component.ts)11:59
Learn what a component is and how to include it into your Angular 2 project.
- Angular2 - Configuring the Starting of the App (main.ts)5:02
How to configure the main.ts file into your Angular 2 project.
- Angular2 - Creating the Hosting Webpage (index.html)16:20
How to create the hosting page for the entire Angular 2 app.
- Angular2 - Creating the Global Stylesheet (styles.css)3:21
How to create global stylesheets for your Angular 2 project.
- Angular2 - Building and Running the App (npm start)9:26
How to build and run your Angular 2 app.
- Assets
- Angular 2 - Task Card App Introduction3:37
Introduction to your Angular2 Task Card App
- Angular 2 - How to Clone the Skeleton Project11:24
How to clone your skeleton project for your Angular2 app
- Angular 2 - Creating the Card Component16:30
How to create the Card Component for your Angular2 app.
- Angular 2 - Creating the Card's HTML Markup (External Template)6:54
Learn how to create the Cards HTML for your Angular2 app.
- Angular 2 - Styling the Card Component3:04
Learn how to style the Card Component for your Angular2 app.
- Angular 2 - Adding the Task Status Icon (Third Party Library)11:36
Learn how to add a status icon to the Task Card in your Angular2 app.
- Angular 2 - Creating the Task Model Class4:38
Learn how to create a Task Model Class for your Angular2 app.
- Angular 2 - Creating the Properties for the Card Component (Input Properties)4:24
Learn how to create the properties for the Card Component in your Angular2 app.
- Angular 2 - Using the Task Property Data (Property Binding)8:24
Learn how to use Property Binding with Angular2
- Angular 2 - Creating the Task Data Source8:38
Learn how to create a data source to use in your Angular2 app.
- Angular 2 - Using the Data Source to Generate Tasks (ngFor)10:15
Learn how to use your data source with ngFor in your Angular2 app.
- Angular 2 - Creating the Add Task Form5:40
Learn how to create your Add Task Form in HTML for your Angular2 app.
- Angular 2 - Styling the Add Task Form9:05
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)13:40
Learn how to add the Form Syntax with Angular2 in your app.
- Angular 2 - Creating the Add Task Method (TypeScript Methods)10:24
Learn how to add Tasks with TypeScript Methods to your Angular2 app.
- Angular 2 - Adding New Tasks to the Data Source (Event Binding)4:47
Learn how to use Event Binding in Angular2 to add tasks to your app.
- Angular 2 - Protecting the Data Source from Empty Tasks6:42
Learn how to protect the data source from empty tasks in your Angular2 app.
- Angular 2 - Clearing the Input Field After Adding a Task1:59
Learn how to clear the input field after adding a task in your Angular2 app.
- Angular 2 - Marking Tasks as Complete/Not Complete6:00
Learn how to mark your task complete/incomplete in your Angular2 app.
- Angular 2 - Styling the Completed Cards (Class Binding)7:39
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)5:48
Learn how to use ngIf with Angular2 to set the task status label in your app.
- Angular 2 - NgIf Directive vs the Hidden Property5:44
Learn the difference between the NgIf Directive and the Hidden Property in Angular2.
- Angular 2 - Final Tweaks10:28
Lets make the final tweaks to our Angular2 Task Card app.
- Exercise1:38
- Assets
- Angular 2 - Introduction to the App2:47
Introduction to our Reusable Weather Component in Angular 2
- Angular 2 - Creating the Weather Component12:35
Learn how to create the weather component for our Angular 2 app.
- Angular 2 - Creating the Weather Component Template7:51
Learn how to create the weather component template for our Angular 2 app.
- Angular 2 - Styling the Weather Component6:30
Learn how to style our weather component for our Angular 2 app.
- Angular 2 - Creating the Weather Component (Services)12:41
Learn how to create a Service for our Angular 2 Weather Component app.
- Angular 2 - An Introduction to Dependency Injection13:26
Learn about Dependency Injection for our Angular 2 app.
- Angular 2 - Getting the User's Geographical Location11:19
Learn how to get the users geographical location in our Angular 2 app.
- Angular 2 - Signing Up for Forecast.io (Weather Data Web API)4:29
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)6:29
Learn what and how to use observables in Angular 2. (ReactiveX (RXJS) Library)
- Angular 2 - Introduction to JSONP Get Requests (HTTP/JSONP)3:19
Learn how to use JSONP get requests in Angular 2
- Angular 2 - Getting the Weather Data (HTTP/JSONP)19:05
Learn how to get weather data using HTTP/JSONP in Angular 2
- Angular 2 - Converting the Location Method to an Observable14:51
Learn how to convert the location method to an observable in Angular 2
- Angular 2 - Creating the Weather Model Class3:40
Learn how to create the Weather Model Class in our Angular 2 app.
- Angular 2 - Introduction to the Component Lifecycle2:53
Learn about the Component Lifecycle in Angular 2
- Angular 2 - Subscribing to the Weather Data Observable (ngOnInit)11:30
Learn how to use the Angular 2 ngOnInit to subscribe to our Weather Data Observable
- Angular 2 - Displaying the Weather Data in the Template3:00
Learn how to display the weather data using Angular 2 in our template.
- Angular 2 - Formatting the Weather Data on the Template (Pipes)7:23
Learn how to use Angular 2 pipes to format the weather data in our template.
- Angular 2 - Converting the Wind Value (Custom Pipes)12:06
Learn how to use Angular 2 custom pipes to covert the wind value in our app.
- Angular 2 - Converting the Temperature Value (Custom Pipes)9:41
Learn how to use Angular 2 custom pipes to covert the temperature value in our app.
- Angular 2 - Getting a Goole Maps API Key5:22
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)15:57
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 Component3:19
Learn how to display the location on the component in our Angular 2 app.
- Angular 2 - Allowing the Changing of the Data Units12:05
Learn how to use Angular 2 to allow our data units to change
- Angular 2 - Adding the Javascript Icon Library (Skycons)3:57
Learn how to add the javascript icon library to our Angular 2 app.
- Angular 2 - Adding the Animated Weather Icons10:39
Learn how to animate weather icons in our Angular 2 app.
- Angular 2 - Configuring the Weather Based Colors9:28
Learn how to configure the weather based colors in our Angular 2 app.
- Angular 2 - Changing the Component Colors Based on the Weather (ngStyle)13:38
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 Available8:03
Learn how to use Angular 2 to hide the component content until the data is available.
- Angular 2 - Adding a Loading Indicator6:23
Learn how to add a loading indicator to our Angular 2 project.
- Angular 2 - Final Tweaks20:21
Adding some final tweaks to our Angular 2 weather app.
- Angular 2 - Reusing the Component in Another App13:50
Learn how to reuse the component in another Angular 2 app.
- Angular 2 - Summary and Challenges3:41
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.
- Assets
- Introduction to the Bugged Out App1:45
A brief overview of the Angular 2 Bugged Out App you'll be building.
- Angular 2 - Adding the Bugs Module (Feature Module)13:34
Learn how to add the Feature Module to your Angular2 app.
- Angular 2 - Creating a Shared Module16:48
Learn how to create a shared module with Angular 2
- Angular 2 - Creating the Bug List Component5:45
Learn how to use Angular2 to create a bug list component.
- Angular 2 - Introduction to Routing8:15
Learn how to use Angular2 routing.
- Angular 2 - Creating the Router13:06
Learn how to create the router with Angular2.
- Angular 2 - Creating the Bug Module's Own Routing10:18
Learn how to create the bug module's own routing using Angular2
- Angular 2 - Implementing Route Redirection4:54
Learn how to implement Angular2 route redirection.
- Angular 2 - Adding Wildcard Routing4:18
Learn how to add wildcard routing with Angular2
- Angular 2 - Creating the Navbar Component5:42
Learn how to create the Navbar Component in our Angular2 app.
- Angular 2 - Creating the Navbar Template9:38
Learn how to create the Navbar Template for our Angular2 app.
- Angular 2 - Styling the Navbar6:20
Lets learn how to style the Navbar in our Angular2 app.
- Angular 2 - Introduction to Router Links7:54
Learn how to use Angular2 router links.
- Angular 2 - Creating the Bug List Template7:58
Learn how to create the Bug List Template in our Angular2 app.
- Angular 2 - Styling the Bug List Component13:28
Lets style the Bug List Component in our Angular2 app.
- Angular 2 - Introduction to the Core Module9:30
- Angular 2 - Creating the Core Module14:12
Learn how to create the Angular2 core module
- Angular 2 - Introduction to Firebase6:52
Learn how we will use Firebase in our Angular2 app.
- Angular 2 - Creating the Firebase Project2:41
Learn how to create the Firebase Project for our Angular2 App.
- Angular 2 - Adding the Firebase SDK3:38
Learn how to add the Firebase SDK to our Angular2 app.
- Angular 2 - Creating the Firebase Config Service15:48
Learn how to create the Firebase Config Service for our Angular2 app.
- Angular 2 - Structuring Our Bug Data in the Firebase Database12:50
Learn how to structure our Bug Data in the Firebase Database for use in our Angular2 app.
- Angular 2 - Configuring Access to the Firebase Database5:34
Learn how to configure access to the Firebase Database for our Angular2 app.
- Angular 2 - Creating the Bug Service3:58
Learn how to create the Bug Service with Angular2.
- Angular 2 - Introduction to Firebase Listeners16:45
Learn how to use Firebase Listeners for our Angular2 app.
- Angular 2 - Using a Firebase Listener to Get Data23:51
Learn how to use Firebase Listeners to get data in our Angular2 app.
- Angular 2 - Typescript Data Encapsulation11:09
Learn how to use Typescript Data Encapsulation in our Angular2 app.
- Angular 2 - Creating the Bug Model Class5:38
Learn how to create the Angular2 Bug Model Class.
- Angular 2 - Parsing the Bug Data from Firebase (TypeScript Casting)9:50
Learn how to Parse Data from Firebase with Typescript Casting in our Angular2 app.
- Angular 2 - Displaying the Bugs in the Table4:40
Learn how to display the Bugs in the Table in our Angular2 app.
- Angular 2 - Creating the Bug Detail Component5:25
Learn how to create the Bug Detail Component using Angular2.
- Angular 2 - Creating the Bug Detail Template (Bootstrap Modal)5:07
Learn how to create the Bug Detail Template using Bootstrap in our Angular2 app.
- Angular 2 - Displaying the Bug Detail Modal (Attribute Binding)12:49
Learn how to display the bug detail modal using the Angular2 attribute binding.
- Angular 2 - Creating the Bug Detail Form13:07
Learn how to create the bug detail form for our Angular2 app.
- Angular 2 - Styling the Bug Detail Form15:03
Learn how to style the detail form in our Angular2 app.
- Angular 2 - Creating the Form Model (Reactive Forms/Model Driven Forms)7:42
Learn how to create the Form Model in Angular2.
- Angular 2 - Binding the Form Model to the Template8:00
Learn how to build the Form Model template in our Angular2 app.
- Angular 2 - Submitting the Reactive Form6:33
Learn how to submit the reactive form for our Angular2 app.
- Angular 2 - Using Validators for Form Validation7:25
Learn how to create Angular2 Validators for Form Validation.
- Angular 2 - Introduction to Form and FormControl States9:15
Learn how Angular2 Form and FormControl States work.
- Angular 2 - Creating a Custom Validator17:54
Learn how to create your first Custom Validator in Angular2.
- Angular 2 - Applying a Custom Validator (Reactive Form / Model Driven Form)6:26
Learn how to apply your Angular2 Custom Validator you created.
- Angular 2 - Applying Validation Styling7:14
Learn how to style your new Angular2 Validator.
- Angular 2 - Creating Reactive Forms Using the FormBuilder6:13
Learn how to create the reactive forms using your Angular2 FormBuilder.
- Angular 2 - Creating the Add Bug TypeScript Method6:24
Learn how to create the Add Bug with the TypeScript Method in your Angular2 app.
- Angular 2 - Using the Add Bug TypeScript Method11:51
Learn how to use your Add Bug Typescript Method in your Angular2 app.
- Angular 2 - Resetting the Form on Submit5:38
Learn hot to reset the form on submit with Angular2.
- Angular 2 - Passing an Existing Bug into the Form16:53
Learn how to pass an existing bug into the form with Angular2.
- Angular 2 - Creating the Bug Update Method8:36
Learn how to create the Bug Update Method in Angular2.
- Angular 2 - Using the Update Bug Method13:22
Learn how to use your Angular2 Update Bug Method.
- Angular 2 - Adding a Firebase Child Changed Listener3:39
Learn how to add a child changed listener with Firebaseto work with your Angular2 app.
- Angular 2 - Parsing the Bug Updates13:11
Learn how to parse the bug updates in your Angular2 app.
- Angular 2 - Transforming the Date Format in the Table3:11
Learn how to transform the Date Format in the Table with Angular2.
- Angular 2 - Displaying the Status String in the Table (TypeScript Enum)10:21
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 Table5:19
Learn how to display the Severity String in the Table in our Angular2 app.
- Using the TypeScript Enums for the Dropdowns19:40
Learn how to use the TypeScript Enums for the dropdowns in your Angular 2 app.
- Disabling the Submit Button when the Form is Invalid9:38
Learn how to disable the Submit Button in Angular 2 when forms are invalid.
- Final Tweaks of the Bugged Out App9:55
Make the final tweaks to your Angular 2 Bugged Out App.
- Bugged Out Exercise3:12
Push your Angular 2 skills with this fun exercise for your Bugged Out App.
- Quiz 1
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:
- 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 this course is for:
- 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