AngularJS is an open-source JavaScript framework created by Google, which is called as Single Page Applications (SPA). It should be an extension of standard HTML attributes with Directives. It fixes data to HTML with Expressions. It is a Superheroic JavaScript MVC (Model-View-Controller) structure. Angular JS will handle common web development tasks like routing, HTTP requests, testing, and animations. First AngularJS inspects the HTML page with custom HTML Tags. Then besides the labels, interacts with the AngularJS library to make Rich Internet Applications.

Course outline
AngularJS is one of the most popular Javascript framework used in front-end development. By registering for this course, you will learn how to setup, build and deploy AngularJS applications in addition to having a deep understanding on dependency injection, custom directives, custom filters and isolate scopes in directives.

Note: The topics covered in this course might get slightly adjusted depending on the cumulative decision made by the candidates who have signed up for the course.

Target Audience
Developers who are using AngularJS 1.0 and would like to learn about the upgraded features, web developers, front-end developers, mobile app developers, students

Pre-requisites
We expect candidates to have basic knowledge in using REST APIs, either through POSTMAN or a command-line interface.

  • Getting Started
    Introduction
    What is in AngularJS
    Creating an AngularJS Project
    Editing our First App
    Understanding the Project Structure
    Why TypeScript. What is TypeScript
  • Components, Templates & Databinding
    Getting Started with Components
    How an Angular JS App gets started
    Understanding App Modules
    Using Templates & Styles
    First Summary
    Creating a new Component
    About Unique Selectors
    Using multiple Components
    View Encapsulation and Styling
    Inserting Content with ng-content
    Databinding Overview
    String Interpolation
    Property Binding & Event Binding Overview
    Property Binding
    Binding to Custom Properties
    Event Binding
    Binding to Custom Events
    Two-Way Binding
  • Directives
    What are Directives
    Attribute Directives
    Building a Custom Attribute Directive
    Element Interaction with HostListener & HostBinding
    Directive Property Binding
    ngIf
    ngFor
    ngSwitch
  • Services & Dependency Injection
    What are Services
    Example – Logging Service
    What is Dependency Injection
    Example – Injecting the Logging Service
    Services & App Modules
    Multiple Instances vs One Instance
    Using NgModules
  • Routing
    Introduction to the Angular JS Router
    Setting up Routes
    Loading Routes
    Navigation with Links
    Understanding Navigation Paths
    Imperative Routing (Triggered in Code)
    Route Parameters
    Extracting Route Parameters
    Query Parameters
    Extracting Query Parameters
    Query Parameters and the routerLink Directive
    Child Routes
    Redirecting Request
    Styling Active Route Links
    Using Guards with AppModules
    Guards – CanActivate
    Guards – CanDeactivate
  • Forms
    Introduction to Forms in Angular JS
    Approach Basics
    Registering Controls
    Submitting a Form and Using the Output
    Form Properties
    Input Validation
    Form State & CSS Classes
    Default Values with ngModel
    Two-Way Binding with ngModel
    Form Groups
    Radio Button Controls
    Using the Form State, Providing a better UX
    Intro The Data-Driven Approach
  • Pipes
    What are Pipes
    Using Pipes
    Parametrizing Pipes
    Pipe Documentation
    Chaining Pipes
    Custom Pipes
  • Http
    Http & Observables
    Required Adjustments in this Module
    Demo Data Source – Firebase Setup
    Sending a GET Request
    Using NgModules
    The Power of Observables Operators – Map (ping Data)
    Sending a POST Request
    Retrieving and Transforming Data with Observables
  • Deploying an Angular JS Application
    Intro
    New Project Structure
    What to Deploy
    Setting up an App for Deployment
    Deploying to Github Pages with the Angular JS CLI
    Deploying to Github Pages Manually
  • Angular JS CLI
    Intro
    Installation
    New Project – ng new and ng init
    Building your Project – ng build & ng serve
    Understanding the Project Structure
    Linting your Code – ng lint
    Unit Tests – ng test
    Managing Project Content – ng generate & ng destroy
    Putting it into Production – ng build and ng github-pages
    Learning More – ng –help and Wrap Up
  • Example Project & Workflow Setup
    Intro
    Dependencies & Typings
    App Setup & Tsconfig
    Gulp
    Basic App Code