fbpx

Angular

We can understand responsive page application and best approach of designing responsive pages with Routing techniques.

Join Now

In-Class

Course Includes

The designing of portable, reusable platform independent applications in Angular with the mode of responsive pages with SPA.

Course pre-requisites

Knowledge of Html, CSS, JavaScript and Node.js is added advantage.

Eligibility

Person who is more interested in developing Single Page Applications using web-technology.

WHAT YOU WILL LEARN!

All students will learn to:

• Understand how Angular is different than traditional web development frameworks
• Code using new ES6 and TypeScript language features
• Develop an application from scratch using Angular 5
• Explore Angular coding and architecture best practices
• Understand and use Angular Forms, Observables, Dependency Injection, and Routing
• Retrieve, update, and delete data using Angular’s Http service
• Unit test all the parts of an Angular application including Modules, Components, Services, and Pipes
• Upgrade an existing application from AngularJS to Angular 5 over time by running both frameworks in the same project
• Create, build, and deploy an Angular (Angular 5) application using the Angular CLI
• Develop dynamic Model-driven forms that are easier to unit test

Part 1: Foundations for Web Development

HTML 5
• Define Web Architecture.
• Introduction to HTML
• Features of HTML
• Define and Use different Types of HTML Tags.
• Layout Tags, Semantic Tags, Application Tags , Logical Tags
• Create Simple Static Web Pages
• Create and Work on Forms.
• Web Forms
• Audio, Video
• Canvas
• New elements of HTML5
• Tables
• Lists
• Frames and Iframes

CSS

• Introductions to CSS
• Style Sheet Types – learn how style sheets can be saved as
• Inline
• Internal
• External.
• CSS Rules – learn the syntax of CSS rules.
• HTML, ID and Class Selectors – see how different content in a web page can be selected for styling.
• Pseudo-Classes –apply link styles to achieve rollover effects. Consider Pseudo-classes related to forms and lists.
• Text, Font, Backgrounds, Border, Margin Rules
• The div and span Tags with overflow, floating.
• CSS Tooltips

JavaScript

• Introduction to JavaScript.
• Dialog windows
• Document object
• Usage of innerHTML with Document object
• Elements of JavaScript
• Variables
• Expressions
• Control Structures, Functions
• Objects and Arrays
• String methods, number methods
• Type conversions.
• Loops
• Regular Expressions
• Events and validations
• Error Handling with try, catch
• Debugging

JQuery

• Introduction to JQuery.
• Selectors of JQuery, Syntax.
• Events and Effects.
• Hide/show
• Fade, Slide
• Animate, Stop
• Callback
• chaining
• JQuery with HTML.
• Get, Set
• Add, Remove
• Traversing.
• Ancestors, Descendants, siblings
• JQuery with AJAX
• Load, Get, post.

Part 2: Advance Web Development – Angular Training
Pre-requisite: HTML, CSS and Javascript

Modul1 :– Introduction
• Introduction of Angular
• Module 2:- Why Angular
• User Experience similar to a Desktop Application
• Productivity and Tooling
• Performance
• Community
• Full-featured Framework
• Platform for Targeting Native Mobile not just Web Browsers

Module 3:- Understanding Angular Versions
• AngularJS (Angular 1.x)
• Angular versions

Module 4:- Understanding Angular
• Drop-in replacement for Angular 2

Module 5:- TypeScript & ES6
• Introduction
• What is Typescript
• Why Typescript
• Setup and installation
• IDE support
• Scoping using Let and Const Keywords ( ES6 )
• Template Literals ( ES6 )
• Spread Syntax and Rest Parameters ( ES6 )
• Destructuring ( ES6

Module 6:- Working with Angular CLI
• Angular CLI
• Anatomy of the project
• Debugging Angular apps
• Working with Augury

Module 7:- Main Building Block of Angular
• Modules
• Components
• Templates
• Metadata
• Data binding
• Directives
• Services
• Dependency injection

Module 8:- Component
• Introduction
• @Component decorator
• Component configuration object
• Custom components
• Component with templates
• Inline
• External
• Component with Styles
• Inline
• External

Module 9:- Templating
• HTML as template
• Data binding
• Interpolation
• Property Binding
• Event Binding
• Two way binding
• Template expressions
• Template syntax
• Attribute, class and style bindings
• @Input()
• Template@Output
• Template reference variables
• Safe navigation operator

Module 10: Directives
• Introduction
• Built-in directives
• Structural directive
• NgIf
• NgFor
• NgSwitch
• Attribute directive
• NgClass
• NgStyle
• NgModel
• @Directive decorator
• Custom directive development

Module 11 : Pipes
• Introduction
• Built-in pipes
• @Pipe decorator
• Custom pipe development

Module 12:- Forms
• Introduction
• @angular/forms library
• Template driven forms
• Form and field validation
• Validation check with ng-pristine,ng-dirty, ng-touched, ng-untouched, ng-valid, ng-invalid
• Show and hide validation error messages
• Form submission with ngSubmit
• Reactive/ Model drive forms
• ReactiveFormsModule
• FormGroup, FormControl classes
• FormBuilder for easy form building
• Validations using Validators
• Setting form model using setValue and patchValue
• Use FormArray to build repeated from controls or form groups

Module 13: Routing & Navigation
• Introduction
• @angular/router library
• Configure routes
• RouterModule.forRoot and RouterModule.forChild
• RouterOutlet, RouterLink, RouterLinkActive
• Nested Routes
• Parametrized routes
• Route guards
• Router events

Module 14 :– HTTP Deprecated & HttpClient
• Setup installing the module
• Making a request for JSON data
• Typechecking the response
• Reading the full response
• Error handling
• Requesting non-JSON data
• Sending data to the server
• Making a POST request
• Configuring other parts of the request

Module 16 : — Testing
• Introduction
• Testing in Typescript
• Testing Component
• Testing Service/Provider
• Testing Pipe

Join Now

In-Class

Enquire Now

Enquire Now