AngularJS1.x Syllabus:

Introduction:

    What is AngularJS ?
    History of AngularJS ?
    Sweet spot of AngularJS.
    Complete Solution for Client-Side.
    How AngularJS Works as Single Page Application ?
    What is Two-Way Data Biding and How it works ?

Structure of AngularJS:

    Overview of Library Files.
    How to Configure AngularJS Application ?
    What is Root Element in AngularJS ?
    How to Bootstrap the Web Apps by using ng-app ?
    How to Extend HTML DOM with additional attributes ?
    What is AngularJS Expression and how to use ?
   
Controllers and Scopes:

    What is Controller in AngularJS ?
    Uses of Controller ?
    How to call Controller methods ?
    How to pass parameter values to the Controller ?
    Overview of Controller Inheritance.
    Limitations of Controllers.
    What is Scope in Controller ?
    How Scope act as Data-Model ?
    Overview of Scope Hierarchies.
    How to pass Scope values to View ?
    How to Receive View data to the Scope ?

Directives:

    What is Directive in AngularJS ?.
    What are the List of Directives ?
    Features of Directives.
    How to Attach Directives in Views.
    How to create Custom Directive ?
    How to set Custom Directives as Element, Attribute, Class and Comment?
    What is Isolating scope of a Directive ?
    How to Create a Directive which Wraps Other Elements ?

Filters:

    What is Filters in AngularJS ?
    What are the List of Filters in Angularjs ?
    Features of Filters.
    How to use Filters as Service and use in js ?
    How to pass parameters in Filters ?

Forms in AngularJS:

    How form works in AngularJS ?
    How to pass form data to AngularJS ?
    How to do form Validation in AngularJS ?
    What are the form states ?
    How form states and CSS Classes work together dynamically ?
    How to do custom validation ?
    What is ng-message and how to use in forms ?

Dependency Injection:

    Define Dependency Injection.
    Why DI (Dependency Injection) ?
    How to use DI ?
    List of Dependency Annotation ?

Components and Modules:

    Overview of Services.
    What is Factory ?
    What is Providers ?
    How to Create Custom Services, Factory and Providers ?
    How to Inject components into other components ?
    What are the 2 Modules in AngularJS ?
    Where and When to use these 2 modules ?

Routing in AngularJS:

    What is Routing ?
    How to use Routing ?
    How to use $routeProvider ?
    How to divide a template into multiple templates ?
    How to attach divided multiple templates in views ?
    How Routing converts our Application as SPA ?
    How to pass/receive parameters in url-path ?

$http Communication Service with JSON:

    Features of $http service in AngularJS ?
    Configuration of $http Service methods.
    What are the $http methods and where to use it ?
    How to pass view-data to server side with $http ?
    How to pass parameters with $http ?
    What is cache in $http ?
    How to receive Success Callback and Error Callback in $http ?

List of inbuilt Services:

    $anchorScroll
    $animate
    $cacheFactory
    $interpolate
    $interval
    $location
    $log
    $rootScope
    $timeout
    $window and more

List of Angular JS inbuilt Methods:

    JSON Properties and Methods
    angular.copy
    angular.equals
    angular from Json
    angular to Json and more

ANGULAR 2.x Syllabus:

Introduction to Angular 2:

    What is Angular 2?
    Central Features of the Angular Framework
    Why Angular?
    Scope and Goal of Angular
    Angular 2 vs. AngularJS
    Installing and Using Angular 2
    Adding Angular 2 and Dependencies to Your App
    Building Blocks of and Angular 2 Application
    A Basic Angular 2 Application

Introduction to TypeScript:

    Programming Languages for Use with Angular
    TypeScript Syntax
    The Type System – Defining Variables
    The Type System – Defining Arrays
    The Type System – Classes & Objects
    Class Constructors
    Class Constructors – Alternate Form
    Interfaces
    Parameter and Return Value Types
    Working with Modules
    TypeScript Transpilation
    Arrow Functions
    Template Strings
    Template Strings – Variables and Expressions
    Template Strings – Multiline
    Generics – Class
    Generics – Methods
    Generics – Restricting Types

Components in Angular 2.x:

    What is a Component?
    An Example Component
    Component Starter
    Developing a Simple Login Component
    Login Component: Add HTML
    The HTML Component Template
    Login Component
    Component Decorator Properties
    Component Lifecycle Hooks
    Using a Lifecycle Hook: OnInit

Data and Event Binding:

    Binding Syntax
    One-Way Output Binding
    Binding Displayed Output Values
    Two-Way Binding of Input Fields
    Input Binding Examples
    Binding Events
    Binding Events Examples
    Setting Element Properties
    Setting Properties: Examples

Attribute Directives and Property Bindings:

    What are Directives
    Directive Types
    Apply Styles by Changing Classes
    Changing Classes – Example
    Applying Styles Directly
    Applying Styles Directly – Example
    Obsolete Directives and Property Binding
    Controlling Element Visibility
    Setting Image Source Dynamically
    Setting Hyperlink Source Dynamically

Structural Directives:

    Structural Directives
    Adding and Removing Elements Dynamically
    Looping Using ngFor
    ngFor – Basic Syntax
    ngFor – Full Template Syntax
    Creating Tables with ngFor
    ngFor Local Variables
    ngFor Changes in the backing data source
    Swapping Elements with ngSwitch
    ngSwitch – Basic Syntax
    ngSwitch – Full Template Syntax

Template Driven Forms:

    Template Driven Forms
    Note on Deprecated Forms APIs
    A Basic Angular Form
    Binding Input Fields
    Accessing the Form Object
    Binding the Form Submit Event
    The Submit Function
    Basic HTML5 Validation – “required” Attribute
    HTML5 vs. Angular Validation
    Angular Validation
    Displaying Form Validation State
    Displaying Field Validation State
    Displaying Validation State Using Classes
    Disabling Submit when Form is Invalid
    Submitting the Form
    Binding to Object Variables
    Additional Input Types
    Checkboxes
    Select(drop down) Fields
    Rendering Options for Select (drop down)
    Date fields
    Radio Buttons

Service and Dependency Injection:

    What is a Service?
    Creating a Basic Service
    What is Dependency Injection?
    What Dependency Injection Looks Like
    Injecting Services
    Using a Service in a Component: Dedicated Instance
    Using onInit to Initialize Component Data
    Using a Shared Service Instance
    Dependency Injection

HTTP Client:

     The Angular HTTP Client
    Using The HTTP Client – Overview
    Setting up the Root Component
    Service Using Http Client
    Importing Individual HTTP Providers into Services
    Service Imports
    The Observable object type
    What does an Observable Object do?
    Making a Basic HTTP GET Call
    Using the Service in a Component
    The Component
    Component Code Review
    Importing Observable Methods
    Enhancing the Service with .map() and .catch()
    Using .map()
    Using .catch()
    Using toPromise()
    GET Request
    GET Request with Options
    POST Request
    Reading HTTP Response Headers

Pipes and Data Formatting:

    What are Pipes?
    More on Pipes
    Formatting Changes in Angular 2
    Using a Built-in Pipe
    Built-In Pipes
    Using Pipes in HTML
    Chaining Pipes
    Using Pipes in JavaScript
    Some Pipe Examples
    Decimal Pipe
    CurrencyPipe
    Custom Pipes
    Custom Pipe Example
    Using Custom Pipes
    A Filter Pipe
    A Sort Pipe
    Pipe Category: Pure and Impure
    Pure Pipe Example
    Impure Pipe Example

Introduction to Single Page Application:

    What is a Single Page Application (SPA)
    SPA Workflow
    Traditional Web Application Capabilities
    Single Page Application Advantages
    SPA and Traditional Web Sites
    SPA Challanges
    Implementing SPA’s Using Angular 2
    Simple SPA Using Visibility Control
    SPA Using Angular Components
    SPA with Angular Components – Switching
    SPA with Angular Components – The Displayed Component
    Implement SPA Using an Angular Component Router

The Angular Component Router:

     Routing and Navigation
    The Component Router
    Traditional Browser Navigation
    Component Router Terminology
    Setting up the Component Router
    Local URL Links
    Browser pushState
    Routes
    The app.routes.ts File
    The app.routes.ts File – Example
    Bootstrapping Routing in Main.ts
    A Basic App With Routing
    App Routes
    AppComponent – Code
    AppComponent – Router Related Features
    AppComponent – precompile array
    AppComponent – routerLinks
    Programmatic Navigation
    Basic Navigation
    Passing Data During Navigation
    Creating Routes with Route Parameters
    Navigating with Route Parameters
    Using Route Parameter Values
    Retrieving the Route Parameter Synchronously
    Retrieving a Route Parameter Asynchronously
    Query Parameters
    Query Parameters – Example Component
    Query Parameters – queryParams
    Query Parameters – Navigation
    Retrieving Query Parameters Asynchronously
    Problems with Manual URL entry and Bookmarking
    Fixing Manual URL entry and Bookmarking