Introduction to Angularjs [Around 30-45 Days] 

 Introduction to AngularJS

• What does AngularJS do for me?
• Who controls AngularJS?
• How can I get AngularJS?

 

 Our first AngularJS application

• A basic application
• Using angular-seed
• The pieces of the puzzle
• How it fits together
• Model, View, Controller from the AngularJS Perspective

 

 Single Page Applications

• What do we mean by Single Page Application?
• Creating Angular Modules
• Using Angular’s Routing Service
• Creating a Skeleton Single Page Application

 Controllers

• Where Controllers fit in, and what they do, from Angular’s perspective
• Managing Scope
• Setting up Behavior
• Building a basic controller
• A more advanced controller

 Models

• How to create a model
• Explicit models
• Implicit models

 Views

• Angular’s take on the View: a little bit different
• Tying a View to a Controller
• Tying a View to a model

 Expressions

• Expressions are lightweight code snippets
• Expression capabilities
• Limitations
• The border between expressions and $eval

 Filters

• Standard filters
• Writing your own filter
• Tying filters together

 Scopes

• What are scopes?
• What do scopes provide?
• Scope lifecycle
• Scopes as glue between controller and view
• Scope hierarchies
• Scope and events

 

Angularjs 2 Training Institute in Ahmedabad

1 – 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
• Angular 2 – Environment
• Architecture
• Modules

2 – Introduction to TypeScript and ES6

• 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

3 – Components in Angular 2

• What is a Component?
• An Example Component
• Component Starter
• Developing a Simple Login Component
• Login Component: Add HTML
• The HTML Component Template

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

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

6 – 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
•  

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

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

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

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

ANGULAR JS 4.0

Difference between Angular-1.X and Angular -4.0

Understanding component architecture

Dependency injection design pattern

NG SET UP

• Initializing Angular CLI.
• Initializing Web page.
• Set up VS code.
• Adding required templates to VS code.
• Set up GIT LAB

CREATING ANGULAR APPLICATION

• Understanding setup files
• Understanding Architecture of Application
• Building  Hello World

CREATING THE GATHERING PROJECT REQUIREMENT

BUILDING THE COMPONENT

• Understanding the decorators
• Understanding the Selectors
• Understanding the Providers
• Referring the Component in the Application
• Adding Component to the module

BUILDING THE MODULE

• Understanding NG Module
• Declarations
• Imports
• Exports
• Providers

REFERRING A MODULE IN ANOTHER MODULE

COMPONENT LIFE CYCLE

• Understanding Component life cycle Hooks
• Understanding  various Interfaces
• Consuming classes in component
• Consuming Interfaces in Component
• Consuming Component in a component

RX JS – REACTIVE PROGRAMING

• Understanding what is reactive programming
• What are Observables
• What is a Subject
• Map Method

WORKING WITH RXJS WITH ANGULAR 4.0

REST API CALLS

• HTTP Calls with Observables
• Error handling
• Streaming
• Integrating with third party API”s

BUILD IN DIRECTIVES

• * ngFor
• * ngIf , Else
• Show and hide elements
• Rendering Images in Angular 4.0
• Rendering Tables in Angular 4.0

 PROVIDERS

• How to Use Providers
• Communicate with Component
• Working with RXJS in Providers

CREATING PIPES

• Understanding Build in pipes
• Creating Custom pipes

ADVANCES ANGULAR 4.0

• Working with Routing
• Authenticating and Authorization
• Component to component communication
• Understanding input output methods
• Understanding Subjects
• Understanding Event emitters

SETTING UP REVERSE PROXY WITH WEBSERVER

• Page nation
• Calendar