Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Life Purpose Meditation Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Blender
30-Day Money-Back Guarantee

This course includes:

  • 19.5 hours on-demand video
  • 3 articles
  • 6 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development Typescript

Angular 2 & TypeScript Beginner Web Development

Angular 2 web development for beginners with TypeScript & Firebase
Rating: 3.8 out of 53.8 (577 ratings)
5,931 students
Created by Mark Wahlbeck, Devslopes by Mark Wahlbeck
Last updated 9/2018
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Build web apps that can connect to servers
  • Build web apps that can be reused
  • Understand TypeScript & Angular 2

Course content

5 sections • 132 lectures • 19h 32m total length

  • Preview03:57
  • Preview18:48
  • Preview09:15

  • Preview03:26
  • Angular2 - Defining the Dependancies (package.json)
    27:20
  • Angular2 - Configuring the TypeScript Compiler (tsconfig.json)
    07:54
  • Angular2 - Configuring the SystemJS Module Loader (systemjs.config.js)
    19:22
  • Angular2 - Installing the NPM Packages (npm install)
    08:11
  • Angular2 - Creating the Root Module (app.module.ts)
    10:46
  • Angular2 - Creating the Root Component (app.component.ts)
    11:59
  • Angular2 - Configuring the Starting of the App (main.ts)
    05:02
  • Angular2 - Creating the Hosting Webpage (index.html)
    16:20
  • Angular2 - Creating the Global Stylesheet (styles.css)
    03:21
  • Angular2 - Building and Running the App (npm start)
    09:26
  • Assets
    00:00

  • Preview03:37
  • Angular 2 - How to Clone the Skeleton Project
    11:24
  • Angular 2 - Creating the Card Component
    16:30
  • Angular 2 - Creating the Card's HTML Markup (External Template)
    06:54
  • Angular 2 - Styling the Card Component
    03:04
  • Angular 2 - Adding the Task Status Icon (Third Party Library)
    11:36
  • Angular 2 - Creating the Task Model Class
    04:38
  • Angular 2 - Creating the Properties for the Card Component (Input Properties)
    04:24
  • Angular 2 - Using the Task Property Data (Property Binding)
    08:24
  • Angular 2 - Creating the Task Data Source
    08:38
  • Angular 2 - Using the Data Source to Generate Tasks (ngFor)
    10:15
  • Angular 2 - Creating the Add Task Form
    05:40
  • Angular 2 - Styling the Add Task Form
    09:05
  • Angular 2 - Adding the Angular Form Syntax (Template Driven Form)
    13:40
  • Angular 2 - Creating the Add Task Method (TypeScript Methods)
    10:24
  • Angular 2 - Adding New Tasks to the Data Source (Event Binding)
    04:47
  • Angular 2 - Protecting the Data Source from Empty Tasks
    06:42
  • Angular 2 - Clearing the Input Field After Adding a Task
    01:59
  • Angular 2 - Marking Tasks as Complete/Not Complete
    06:00
  • Angular 2 - Styling the Completed Cards (Class Binding)
    07:39
  • Angular 2 - Setting the Task Status Label to Reflect the Status (ngIf)
    05:48
  • Angular 2 - NgIf Directive vs the Hidden Property
    05:44
  • Angular 2 - Final Tweaks
    10:28
  • Exercise
    01:38
  • Assets
    00:00

  • Preview02:47
  • Angular 2 - Creating the Weather Component
    12:35
  • Angular 2 - Creating the Weather Component Template
    07:51
  • Angular 2 - Styling the Weather Component
    06:30
  • Angular 2 - Creating the Weather Component (Services)
    12:41
  • Angular 2 - An Introduction to Dependency Injection
    13:26
  • Angular 2 - Getting the User's Geographical Location
    11:19
  • Angular 2 - Signing Up for Forecast.io (Weather Data Web API)
    04:29
  • Angular 2 - Introduction to Observables (ReactiveX (RXJS) Library)
    06:29
  • Angular 2 - Introduction to JSONP Get Requests (HTTP/JSONP)
    03:19
  • Angular 2 - Getting the Weather Data (HTTP/JSONP)
    19:05
  • Angular 2 - Converting the Location Method to an Observable
    14:51
  • Angular 2 - Creating the Weather Model Class
    03:40
  • Angular 2 - Introduction to the Component Lifecycle
    02:53
  • Angular 2 - Subscribing to the Weather Data Observable (ngOnInit)
    11:30
  • Angular 2 - Displaying the Weather Data in the Template
    03:00
  • Angular 2 - Formatting the Weather Data on the Template (Pipes)
    07:23
  • Angular 2 - Converting the Wind Value (Custom Pipes)
    12:06
  • Angular 2 - Converting the Temperature Value (Custom Pipes)
    09:41
  • Angular 2 - Getting a Goole Maps API Key
    05:22
  • Angular 2 - Getting the Location Name Using Reverse Geocoding (Google Maps API)
    15:57
  • Angular 2 - Displaying the Location on the Component
    03:19
  • Angular 2 - Allowing the Changing of the Data Units
    12:05
  • Angular 2 - Adding the Javascript Icon Library (Skycons)
    03:57
  • Angular 2 - Adding the Animated Weather Icons
    10:39
  • Angular 2 - Configuring the Weather Based Colors
    09:28
  • Angular 2 - Changing the Component Colors Based on the Weather (ngStyle)
    13:38
  • Angular 2 - Hiding the Component Content Until the Data is Available
    08:03
  • Angular 2 - Adding a Loading Indicator
    06:23
  • Angular 2 - Final Tweaks
    20:21
  • Angular 2 - Reusing the Component in Another App
    13:50
  • Angular 2 - Summary and Challenges
    03:41
  • Assets
    00:00

  • Introduction to the Bugged Out App
    01:45
  • Angular 2 - Adding the Bugs Module (Feature Module)
    13:34
  • Angular 2 - Creating a Shared Module
    16:48
  • Angular 2 - Creating the Bug List Component
    05:45
  • Angular 2 - Introduction to Routing
    08:15
  • Angular 2 - Creating the Router
    13:06
  • Angular 2 - Creating the Bug Module's Own Routing
    10:18
  • Angular 2 - Implementing Route Redirection
    04:54
  • Angular 2 - Adding Wildcard Routing
    04:18
  • Angular 2 - Creating the Navbar Component
    05:42
  • Angular 2 - Creating the Navbar Template
    09:38
  • Angular 2 - Styling the Navbar
    06:20
  • Angular 2 - Introduction to Router Links
    07:54
  • Angular 2 - Creating the Bug List Template
    07:58
  • Angular 2 - Styling the Bug List Component
    13:28
  • Angular 2 - Introduction to the Core Module
    09:30
  • Angular 2 - Creating the Core Module
    14:12
  • Angular 2 - Introduction to Firebase
    06:52
  • Angular 2 - Creating the Firebase Project
    02:41
  • Angular 2 - Adding the Firebase SDK
    03:38
  • Angular 2 - Creating the Firebase Config Service
    15:48
  • Angular 2 - Structuring Our Bug Data in the Firebase Database
    12:50
  • Angular 2 - Configuring Access to the Firebase Database
    05:34
  • Angular 2 - Creating the Bug Service
    03:58
  • Angular 2 - Introduction to Firebase Listeners
    16:45
  • Angular 2 - Using a Firebase Listener to Get Data
    23:51
  • Angular 2 - Typescript Data Encapsulation
    11:09
  • Angular 2 - Creating the Bug Model Class
    05:38
  • Angular 2 - Parsing the Bug Data from Firebase (TypeScript Casting)
    09:50
  • Angular 2 - Displaying the Bugs in the Table
    04:40
  • Angular 2 - Creating the Bug Detail Component
    05:25
  • Angular 2 - Creating the Bug Detail Template (Bootstrap Modal)
    05:07
  • Angular 2 - Displaying the Bug Detail Modal (Attribute Binding)
    12:49
  • Angular 2 - Creating the Bug Detail Form
    13:07
  • Angular 2 - Styling the Bug Detail Form
    15:03
  • Angular 2 - Creating the Form Model (Reactive Forms/Model Driven Forms)
    07:42
  • Angular 2 - Binding the Form Model to the Template
    08:00
  • Angular 2 - Submitting the Reactive Form
    06:33
  • Angular 2 - Using Validators for Form Validation
    07:25
  • Angular 2 - Introduction to Form and FormControl States
    09:15
  • Angular 2 - Creating a Custom Validator
    17:54
  • Angular 2 - Applying a Custom Validator (Reactive Form / Model Driven Form)
    06:26
  • Angular 2 - Applying Validation Styling
    07:14
  • Angular 2 - Creating Reactive Forms Using the FormBuilder
    06:13
  • Angular 2 - Creating the Add Bug TypeScript Method
    06:24
  • Angular 2 - Using the Add Bug TypeScript Method
    11:51
  • Angular 2 - Resetting the Form on Submit
    05:38
  • Angular 2 - Passing an Existing Bug into the Form
    16:53
  • Angular 2 - Creating the Bug Update Method
    08:36
  • Angular 2 - Using the Update Bug Method
    13:22
  • Angular 2 - Adding a Firebase Child Changed Listener
    03:39
  • Angular 2 - Parsing the Bug Updates
    13:11
  • Angular 2 - Transforming the Date Format in the Table
    03:11
  • Angular 2 - Displaying the Status String in the Table (TypeScript Enum)
    10:21
  • Angular 2 - Displaying the Severity String in the Table
    05:19
  • Using the TypeScript Enums for the Dropdowns
    19:40
  • Disabling the Submit Button when the Form is Invalid
    09:38
  • Final Tweaks of the Bugged Out App
    09:55
  • Bugged Out Exercise
    03:12
  • Quiz 1
    3 questions

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 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

Instructors

Mark Wahlbeck
CEO Devslopes | iOS | Android | Freelancing
Mark Wahlbeck
  • 4.4 Instructor Rating
  • 46,216 Reviews
  • 290,954 Students
  • 15 Courses

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.

Devslopes by Mark Wahlbeck
Learn programming & app development
Devslopes by Mark Wahlbeck
  • 4.4 Instructor Rating
  • 51,095 Reviews
  • 328,938 Students
  • 26 Courses

Devslopes transforms beginner students into paid professionals through curated project based videos, interactive quizzes, and exercises.  After completing each course, you will have a strong portfolio, coupled with the technical understanding to build your own custom applications.


Our target students are:

First time developers

Entrepreneurs who want to build their own technology startup

Current developers looking to either advance their careers or learn new technologies.


By taking our courses, our students have been able to:

Get jobs as developers with amazing salaries

Launch (and even sell) their technology startups 

Get promotions and make substantial career changes


We strive to teach students how to code through polished apps inspired by real world examples. We want our students to build projects that they are proud of, that look and operate just like apps they use in their everyday life. 


We are passionate about helping people reveal their hidden talents and guiding them into the exciting world of startups and programming.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.