IIRF Online > Development > Web Development > Typescript > Angular 2 & TypeScript Beginner Web Development
Angular 2 & TypeScript Beginner Web Development by Udemy
Angular 2 web development for beginners with TypeScript & Firebase
Course Highlights
- Build web apps that can connect to servers
- Build web apps that can be reused
- Understand TypeScript & Angular 2
Skills you will learn!
Curriculum
3 Topics
What is Angular 2?
Angular 2 - Why we use TypeScript
Angular 2 - Overview of tools
12 Topics
Angular2 - skeleton project overview
Angular2 - Defining the Dependancies (package.json)
Angular2 - Configuring the TypeScript Compiler (tsconfig.json)
Angular2 - Configuring the SystemJS Module Loader (systemjs.config.js)
Angular2 - Installing the NPM Packages (npm install)
Angular2 - Creating the Root Module (app.module.ts)
Angular2 - Creating the Root Component (app.component.ts)
Angular2 - Configuring the Starting of the App (main.ts)
Angular2 - Creating the Hosting Webpage (index.html)
Angular2 - Creating the Global Stylesheet (styles.css)
Angular2 - Building and Running the App (npm start)
Assets
25 Topics
Angular 2 - Task Card App Introduction
Angular 2 - How to Clone the Skeleton Project
Angular 2 - Creating the Card Component
Angular 2 - Creating the Card's HTML Markup (External Template)
Angular 2 - Styling the Card Component
Angular 2 - Adding the Task Status Icon (Third Party Library)
Angular 2 - Creating the Task Model Class
Angular 2 - Creating the Properties for the Card Component (Input Properties)
Angular 2 - Using the Task Property Data (Property Binding)
Angular 2 - Creating the Task Data Source
Angular 2 - Using the Data Source to Generate Tasks (ngFor)
Angular 2 - Creating the Add Task Form
Angular 2 - Styling the Add Task Form
Angular 2 - Adding the Angular Form Syntax (Template Driven Form)
Angular 2 - Creating the Add Task Method (TypeScript Methods)
Angular 2 - Adding New Tasks to the Data Source (Event Binding)
Angular 2 - Protecting the Data Source from Empty Tasks
Angular 2 - Clearing the Input Field After Adding a Task
Angular 2 - Marking Tasks as Complete/Not Complete
Angular 2 - Styling the Completed Cards (Class Binding)
Angular 2 - Setting the Task Status Label to Reflect the Status (ngIf)
Angular 2 - NgIf Directive vs the Hidden Property
Angular 2 - Final Tweaks
Exercise
Assets
33 Topics
Angular 2 - Introduction to the App
Angular 2 - Creating the Weather Component
Angular 2 - Creating the Weather Component Template
Angular 2 - Styling the Weather Component
Angular 2 - Creating the Weather Component (Services)
Angular 2 - An Introduction to Dependency Injection
Angular 2 - Getting the User's Geographical Location
Angular 2 - Signing Up for Forecast.io (Weather Data Web API)
Angular 2 - Introduction to Observables (ReactiveX (RXJS) Library)
Angular 2 - Introduction to JSONP Get Requests (HTTP/JSONP)
Angular 2 - Getting the Weather Data (HTTP/JSONP)
Angular 2 - Converting the Location Method to an Observable
Angular 2 - Creating the Weather Model Class
Angular 2 - Introduction to the Component Lifecycle
Angular 2 - Subscribing to the Weather Data Observable (ngOnInit)
Angular 2 - Displaying the Weather Data in the Template
Angular 2 - Formatting the Weather Data on the Template (Pipes)
Angular 2 - Converting the Wind Value (Custom Pipes)
Angular 2 - Converting the Temperature Value (Custom Pipes)
Angular 2 - Getting a Goole Maps API Key
Angular 2 - Getting the Location Name Using Reverse Geocoding (Google Maps API)
Angular 2 - Displaying the Location on the Component
Angular 2 - Allowing the Changing of the Data Units
Angular 2 - Adding the Javascript Icon Library (Skycons)
Angular 2 - Adding the Animated Weather Icons
Angular 2 - Configuring the Weather Based Colors
Angular 2 - Changing the Component Colors Based on the Weather (ngStyle)
Angular 2 - Hiding the Component Content Until the Data is Available
Angular 2 - Adding a Loading Indicator
Angular 2 - Final Tweaks
Angular 2 - Reusing the Component in Another App
Angular 2 - Summary and Challenges
Assets
60 Topics
Introduction to the Bugged Out App
Angular 2 - Adding the Bugs Module (Feature Module)
Angular 2 - Creating a Shared Module
Angular 2 - Creating the Bug List Component
Angular 2 - Introduction to Routing
Angular 2 - Creating the Router
Angular 2 - Creating the Bug Module's Own Routing
Angular 2 - Implementing Route Redirection
Angular 2 - Adding Wildcard Routing
Angular 2 - Creating the Navbar Component
Angular 2 - Creating the Navbar Template
Angular 2 - Styling the Navbar
Angular 2 - Introduction to Router Links
Angular 2 - Creating the Bug List Template
Angular 2 - Styling the Bug List Component
Angular 2 - Introduction to the Core Module
Angular 2 - Creating the Core Module
Angular 2 - Introduction to Firebase
Angular 2 - Creating the Firebase Project
Angular 2 - Adding the Firebase SDK
Angular 2 - Creating the Firebase Config Service
Angular 2 - Structuring Our Bug Data in the Firebase Database
Angular 2 - Configuring Access to the Firebase Database
Angular 2 - Creating the Bug Service
Angular 2 - Introduction to Firebase Listeners
Angular 2 - Using a Firebase Listener to Get Data
Angular 2 - Typescript Data Encapsulation
Angular 2 - Creating the Bug Model Class
Angular 2 - Parsing the Bug Data from Firebase (TypeScript Casting)
Angular 2 - Displaying the Bugs in the Table
Angular 2 - Creating the Bug Detail Component
Angular 2 - Creating the Bug Detail Template (Bootstrap Modal)
Angular 2 - Displaying the Bug Detail Modal (Attribute Binding)
Angular 2 - Creating the Bug Detail Form
Angular 2 - Styling the Bug Detail Form
Angular 2 - Creating the Form Model (Reactive Forms/Model Driven Forms)
Angular 2 - Binding the Form Model to the Template
Angular 2 - Submitting the Reactive Form
Angular 2 - Using Validators for Form Validation
Angular 2 - Introduction to Form and FormControl States
Angular 2 - Creating a Custom Validator
Angular 2 - Applying a Custom Validator (Reactive Form / Model Driven Form)
Angular 2 - Applying Validation Styling
Angular 2 - Creating Reactive Forms Using the FormBuilder
Angular 2 - Creating the Add Bug TypeScript Method
Angular 2 - Using the Add Bug TypeScript Method
Angular 2 - Resetting the Form on Submit
Angular 2 - Passing an Existing Bug into the Form
Angular 2 - Creating the Bug Update Method
Angular 2 - Using the Update Bug Method
Angular 2 - Adding a Firebase Child Changed Listener
Angular 2 - Parsing the Bug Updates
Angular 2 - Transforming the Date Format in the Table
Angular 2 - Displaying the Status String in the Table (TypeScript Enum)
Angular 2 - Displaying the Severity String in the Table
Using the TypeScript Enums for the Dropdowns
Disabling the Submit Button when the Form is Invalid
Final Tweaks of the Bugged Out App
Bugged Out Exercise
Quiz 1
Angular 2 & TypeScript Beginner Web Development
Related Typescript Courses
Thank You!
Your review has been submitted successfully.