Mô tả

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!


Bạn sẽ học được gì

Build web apps that can connect to servers

Build web apps that can be reused

Understand TypeScript & Angular 2

Yêu cầu

  • You'll need any computer running macOS or Windows
  • You should know the basics of HTML/CSS - but not required

Nội dung khoá học

5 sections

Overview and Tools

3 lectures
What is Angular 2?
03:57
Angular 2 - Why we use TypeScript
18:48
Angular 2 - Overview of tools
09:15

Angular 2 - Creating a Skeleton Project

12 lectures
Angular2 - skeleton project overview
03: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

Angular 2 Fundamentals - Task Card App

25 lectures
Angular 2 - Task Card App Introduction
03: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

Web API's/HTTP - Reusable Weather Component

33 lectures
Angular 2 - Introduction to the App
02: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

Real World Angular 2 App with Backend - Bugged Out

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

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.