Angular JS Online Training

1

• Angular JS

2

• The following topics will be covered in our
• AngularJS 4 5
• Online Training

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

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

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

7
Directives In Angular 4

• Create Directive using Components
• Binding/ Interpolation data in component
• Implementing ngIf Directives
• Implementing ngFor Directives

8
Templates and Interpolation

• Design Template in Angular4
• Building the Component

9
Interpolation Pipes/Custom Pipes

• Binding property and values
• Implement Input with Two-way Binding
• Implement Events with Event Binding
• Custom Pipes and Data transforming

10
Nested Components

• Component inside Component
• How to use Nested Component
• Use _at_Input to Pass data in Nested Component
• Use _at_Output to Pass data from Nested Component

11
Deep Inside Components

• Interfaces Classes in Angular4
• Adding Styles to component
• Different Lifecycle Hooks
• Adding Custom Pipes
• How to use Module Id

12
Dependency Injection and Service Angular4

• What is Dependency Injection
• Design a Service
• Build the Service
• Injecting the Service

13
Adding Retrieving Data Using HTTP

• Building API Link
• Sending data in HTTP Request
• Exception Handling
• Observables from RXJS
• Reactive Extensions
• Subscribing data using Observable

14
Navigation and Routing Basics

• How Routing Works
• Configuring Routes
• Tying Routes to Actions
• Placing the Views

15
Angular4 Routing and Navigation

• Sending Parameters to a Route
• Activating a Route with Code
• Authenticate Routes

16
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

17
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

18
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
19
Posting Data using HTTP in Angular4 Forms
Create Server Using Angular Post a Form data in Angular Server Event Handling in Forms 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
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

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

22
Deployment on AWS

• EC2 Machine
• Intro to GitHub
• Deploy App on AWS

23
Prerequisite

• Basic working knowledge of HTML,CSS,JavaScript,Tex
  t editor-Visual Studio code/We storm/Atom and
  preffered one is Visual Studio .

24
(No Transcript)