Angular JS
The following topics will be covered in our
AngularJS 4 & 5
Online Training:
Copyright @ 2015 Learntek. All Rights Reserved. 2
What is AngularJS?
• AngularJS is a structural framework for dynamic web apps. AngularJS
provides developers options to write client-side application (using
Typescript) in a clean MVC (Model View Controller) way. Angular is used
for Grouping the HTML into reusable components.
• Angular attempts to minimize the impedance mismatch between
document centric HTML and what an application needs by creating new
HTML constructs
Copyright @ 2015 Learntek. All Rights Reserved. 3
Why Angular?
• It is an excellent idea to decouple the client side of an app from the
server side. This allows development work to progress in parallel, and
allows for reuse of both sides.
• DOM control structures for repeating, showing and hiding DOM
fragments.
• It is very helpful indeed if the framework guides developers through the
entire journey of building an app: From designing the UI, through writing
the business logic, to testing.
Copyright @ 2015 Learntek. All Rights Reserved. 4
Starting with Angular 4 Application
• Angular vs Angular 2 vs Angular 4
• Overview of Sample Application
• Course Overview
• Language Use for Development
• Different Editor Overview
• Environment setup for Angular4
• Installing an Angular 4
Application
• Starting an Angular 4 Application
• Hosting Angular4 application
using seed
Copyright @ 2015 Learntek. All Rights Reserved. 5
Components in Angular4
• Introduction
• Use of Component?
• What is Component Class
• Integrating Decorator
• Implement and defining the Metadata
• Importing Third Party Library
• Creating first App Component
• Loading/Bootstrapping App Component
Copyright @ 2015 Learntek. All Rights Reserved. 6
Directives In Angular 4
• Create Directive using Components
• Binding/ Interpolation data in component
• Implementing ngIf Directives
• Implementing ngFor Directives
Copyright @ 2015 Learntek. All Rights Reserved. 7
Templates and Interpolation
• Design Template in Angular4
• Building the Component
Copyright @ 2015 Learntek. All Rights Reserved. 8
Interpolation & Pipes/Custom Pipes
• Binding property and values
• Implement Input with Two-way Binding
• Implement Events with Event Binding
• Custom Pipes and Data transforming
Copyright @ 2015 Learntek. All Rights Reserved. 9
Nested Components
• Component inside Component
• How to use Nested Component
• Use @Input to Pass data in Nested Component
• Use @Output to Pass data from Nested Component
Copyright @ 2015 Learntek. All Rights Reserved. 10
Deep Inside Components
• Interfaces Classes in Angular4
• Adding Styles to component
• Different Lifecycle Hooks
• Adding Custom Pipes
• How to use Module Id
Copyright @ 2015 Learntek. All Rights Reserved. 11
Dependency Injection and Service Angular4
• What is Dependency Injection
• Design a Service
• Build the Service
• Injecting the Service
Copyright @ 2015 Learntek. All Rights Reserved. 12
Adding Retrieving Data Using HTTP
• Building API Link
• Sending data in HTTP Request
• Exception Handling
• Observables from RXJS
• Reactive Extensions
• Subscribing data using Observable
Copyright @ 2015 Learntek. All Rights Reserved. 13
Navigation and Routing Basics
• How Routing Works
• Configuring Routes
• Tying Routes to Actions
• Placing the Views
Copyright @ 2015 Learntek. All Rights Reserved. 14
Angular4 Routing and Navigation
• Sending Parameters to a Route
• Activating a Route with Code
• Authenticate Routes
Copyright @ 2015 Learntek. All Rights Reserved. 15
Form Basic in Angular 4
• Creating new angular-seed Project
• Form and ngForm in Ang4
• Stop Inbuilt Form Validation of Browser
• Add bootstrap to Style Forms and Text Input
• Use Radio Buttons in Form
• Use Select and Options in Form
• Use Checkboxes in Form
Copyright @ 2015 Learntek. All Rights Reserved. 16
Binding Data in Angular4 Forms
• Use ngModel for 2-way binding
• Data Binding in Angular4 Forms
• Use Model Object
• Binding Models
• Data Binding in Select Control
• Data Binding in Checkbox
• Data Binding in Radio Buttons
Copyright @ 2015 Learntek. All Rights Reserved. 17
Validate Form in Angular4
• Validation Classes
• Properties of ngModel Validation
• Display Error Messages in Form
• Add Style Controls in Errors
• Select List validation
• Deep inside the Select Control
• Enable/Disable Submit Button
• Top Form Level Validation
• Attributes of HTML 5
Copyright @ 2015 Learntek. All Rights Reserved. 18
Posting Data using HTTP in Angular4 Forms
• Create Server Using Angular
• Post a Form data in Angular
Server
• Event Handling in Form’s Submit
• Adding Validation to form in
Angular4
• Adding RsJx
• Using Observable and a
Subscriber
• Send data to the Server
• Handling Error
• Dynamic Options for a Select
Control
Copyright @ 2015 Learntek. All Rights Reserved. 19
Third-party Form Controls
• External Date picker in Angular4
• Adding Time picker in Forms
• Styling up ng4-bootstrap
• Add Switch in Angular4
• Multiple Radio Buttons
Copyright @ 2015 Learntek. All Rights Reserved. 20
Modules in Angular4
• Use of Module in Angular4?
• Declarations of Array in Angular4
• Import and Export Various Array
• Angular4 Providers
• Building Shared Module in Angular4
Copyright @ 2015 Learntek. All Rights Reserved. 21
Deployment on AWS
• EC2 Machine
• Intro to GitHub
• Deploy App on AWS
Copyright @ 2015 Learntek. All Rights Reserved. 22
Prerequisite:
• Basic working knowledge of HTML,CSS,JavaScript,Text editor-Visual
Studio code/We storm/Atom and preffered one is Visual Studio .
Copyright @ 2015 Learntek. All Rights Reserved. 23
Copyright @ 2015 Learntek. All Rights Reserved. 24

Angular js Online Training

  • 1.
  • 2.
    The following topicswill be covered in our AngularJS 4 & 5 Online Training: Copyright @ 2015 Learntek. All Rights Reserved. 2
  • 3.
    What is AngularJS? •AngularJS is a structural framework for dynamic web apps. AngularJS provides developers options to write client-side application (using Typescript) in a clean MVC (Model View Controller) way. Angular is used for Grouping the HTML into reusable components. • Angular attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs Copyright @ 2015 Learntek. All Rights Reserved. 3
  • 4.
    Why Angular? • Itis an excellent idea to decouple the client side of an app from the server side. This allows development work to progress in parallel, and allows for reuse of both sides. • DOM control structures for repeating, showing and hiding DOM fragments. • It is very helpful indeed if the framework guides developers through the entire journey of building an app: From designing the UI, through writing the business logic, to testing. Copyright @ 2015 Learntek. All Rights Reserved. 4
  • 5.
    Starting with Angular4 Application • Angular vs Angular 2 vs Angular 4 • Overview of Sample Application • Course Overview • Language Use for Development • Different Editor Overview • Environment setup for Angular4 • Installing an Angular 4 Application • Starting an Angular 4 Application • Hosting Angular4 application using seed Copyright @ 2015 Learntek. All Rights Reserved. 5
  • 6.
    Components in Angular4 •Introduction • Use of Component? • What is Component Class • Integrating Decorator • Implement and defining the Metadata • Importing Third Party Library • Creating first App Component • Loading/Bootstrapping App Component Copyright @ 2015 Learntek. All Rights Reserved. 6
  • 7.
    Directives In Angular4 • Create Directive using Components • Binding/ Interpolation data in component • Implementing ngIf Directives • Implementing ngFor Directives Copyright @ 2015 Learntek. All Rights Reserved. 7
  • 8.
    Templates and Interpolation •Design Template in Angular4 • Building the Component Copyright @ 2015 Learntek. All Rights Reserved. 8
  • 9.
    Interpolation & Pipes/CustomPipes • Binding property and values • Implement Input with Two-way Binding • Implement Events with Event Binding • Custom Pipes and Data transforming Copyright @ 2015 Learntek. All Rights Reserved. 9
  • 10.
    Nested Components • Componentinside Component • How to use Nested Component • Use @Input to Pass data in Nested Component • Use @Output to Pass data from Nested Component Copyright @ 2015 Learntek. All Rights Reserved. 10
  • 11.
    Deep Inside Components •Interfaces Classes in Angular4 • Adding Styles to component • Different Lifecycle Hooks • Adding Custom Pipes • How to use Module Id Copyright @ 2015 Learntek. All Rights Reserved. 11
  • 12.
    Dependency Injection andService Angular4 • What is Dependency Injection • Design a Service • Build the Service • Injecting the Service Copyright @ 2015 Learntek. All Rights Reserved. 12
  • 13.
    Adding Retrieving DataUsing HTTP • Building API Link • Sending data in HTTP Request • Exception Handling • Observables from RXJS • Reactive Extensions • Subscribing data using Observable Copyright @ 2015 Learntek. All Rights Reserved. 13
  • 14.
    Navigation and RoutingBasics • How Routing Works • Configuring Routes • Tying Routes to Actions • Placing the Views Copyright @ 2015 Learntek. All Rights Reserved. 14
  • 15.
    Angular4 Routing andNavigation • Sending Parameters to a Route • Activating a Route with Code • Authenticate Routes Copyright @ 2015 Learntek. All Rights Reserved. 15
  • 16.
    Form Basic inAngular 4 • Creating new angular-seed Project • Form and ngForm in Ang4 • Stop Inbuilt Form Validation of Browser • Add bootstrap to Style Forms and Text Input • Use Radio Buttons in Form • Use Select and Options in Form • Use Checkboxes in Form Copyright @ 2015 Learntek. All Rights Reserved. 16
  • 17.
    Binding Data inAngular4 Forms • Use ngModel for 2-way binding • Data Binding in Angular4 Forms • Use Model Object • Binding Models • Data Binding in Select Control • Data Binding in Checkbox • Data Binding in Radio Buttons Copyright @ 2015 Learntek. All Rights Reserved. 17
  • 18.
    Validate Form inAngular4 • Validation Classes • Properties of ngModel Validation • Display Error Messages in Form • Add Style Controls in Errors • Select List validation • Deep inside the Select Control • Enable/Disable Submit Button • Top Form Level Validation • Attributes of HTML 5 Copyright @ 2015 Learntek. All Rights Reserved. 18
  • 19.
    Posting Data usingHTTP in Angular4 Forms • Create Server Using Angular • Post a Form data in Angular Server • Event Handling in Form’s Submit • Adding Validation to form in Angular4 • Adding RsJx • Using Observable and a Subscriber • Send data to the Server • Handling Error • Dynamic Options for a Select Control Copyright @ 2015 Learntek. All Rights Reserved. 19
  • 20.
    Third-party Form Controls •External Date picker in Angular4 • Adding Time picker in Forms • Styling up ng4-bootstrap • Add Switch in Angular4 • Multiple Radio Buttons Copyright @ 2015 Learntek. All Rights Reserved. 20
  • 21.
    Modules in Angular4 •Use of Module in Angular4? • Declarations of Array in Angular4 • Import and Export Various Array • Angular4 Providers • Building Shared Module in Angular4 Copyright @ 2015 Learntek. All Rights Reserved. 21
  • 22.
    Deployment on AWS •EC2 Machine • Intro to GitHub • Deploy App on AWS Copyright @ 2015 Learntek. All Rights Reserved. 22
  • 23.
    Prerequisite: • Basic workingknowledge of HTML,CSS,JavaScript,Text editor-Visual Studio code/We storm/Atom and preffered one is Visual Studio . Copyright @ 2015 Learntek. All Rights Reserved. 23
  • 24.
    Copyright @ 2015Learntek. All Rights Reserved. 24