Angular Training

Angular JS

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

2

What is AngularJS? â&#x20AC;˘ 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. â&#x20AC;˘ Angular attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs

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.

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

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

6

Directives In Angular 4 • Create Directive using Components • Binding/ Interpolation data in component • Implementing ngIf Directives

• Implementing ngFor Directives

7

Templates and Interpolation â&#x20AC;˘ Design Template in Angular4 â&#x20AC;˘ Building the Component

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

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

10

Deep Inside Components • Interfaces Classes in Angular4 • Adding Styles to component

• Different Lifecycle Hooks • Adding Custom Pipes • How to use Module Id

11

Dependency Injection and Service Angular4 • What is Dependency Injection • Design a Service

• Build the Service • Injecting the Service

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

13

Navigation and Routing Basics • How Routing Works • Configuring Routes

• Tying Routes to Actions • Placing the Views

14

Angular4 Routing and Navigation • Sending Parameters to a Route • Activating a Route with Code

• Authenticate Routes

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

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

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

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

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

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

21

Deployment on AWS • EC2 Machine • Intro to GitHub

• Deploy App on AWS

22

Prerequisite: â&#x20AC;¢ Basic working knowledge of HTML,CSS,JavaScript,Text editor-Visual Studio code/We storm/Atom and preffered one is Visual Studio .

23

24

Turn static files into dynamic content formats.

Create a flipbook