Course Code: buildingriabespoke
Duration: 35 hours
Prerequisites:
  • Should be familiar with any one web development technologies
  • Should have intermediate level exposure in JavaScript

SUGGESTED AUDIENCE: 

Web developer who wants to build best-of-breed web applications with the simplicity and elegance of JavaScript.

Overview:

This workshop aims at equipping the participants with the necessary knowledge and skills required to build rich internet applications using cutting edge RIA framework from google "Angular".

OBJECTIVES:

At the end of this training course, the participants will:

  • Be able to build RIA using Angular
  • Be able to write front end applications using typescript
  • Exploit two-way binding offered by Angular
  • Use dependency injection for better maintainability
  • Understand and use various directives offered by Angular
  • Create custom components

Use gulp for commonly performed tasks in JavaScript application development

CASE STUDIES: 

Following are the case studies that will be developed by the participants during the workshop:

A “Ticket Management” application using Angular

CASE STUDY:

A “Bug Tracker” application is built from the scratch as a part of the training program.  The following use cases are implemented to give sufficient scope for experimenting with all the basic to advanced aspects of the framework.

Use Cases

  1. Add a new bug                                                                        
  2. List the bugs                                                                             
  3. Toggle the 'closed' status of a bug
  4. Remove closed bugs                                                             
  5. Display statistics                                                    
  6. Search the bugs                                                                      
  7. Sort the bugs                                                                                                 
  8. Improve the bug display                                    
  9. Persist the bugs in the localStorage
  10. Display createdAt for each bug
  11. Persist the bugs in the server
  12. Every bug must have a unique url (Routing)
  13. Preparation for deployment
Course Outline:

HTML

  • Understanding the World Wide Web
    • The relationship between browser and server
    • The roles of HTML, CSS, and other technologies used in Web development
    • Quick overview of the HTTP Protocol
  • A Quick Overview of Web Development
    • Client-side Programming
    • Server-side Programming
  • Introduction to HTML
    • Getting Started
    • A Simple HTML Document
    • The HTML Skeleton
    • HTML Elements
    • HTML vs. HTML
  • Paragraphs, Headings and Text
    • Paragraphs
    • Breaks and Horizontal Rules
    • Quoted Text
    • Preformatted Text
    • Phrase Elements
    • Formatting Elements
  • HTML Links
    • Text Links
    • Absolute vs. Relative Paths
    • Targeting New Windows
    • Email Links
    • Anchors
    • The title Attribute
  • HTML Images
    • Inserting Images
    • Image Links
  • HTML Lists
    • Unordered Lists
    • Ordered Lists
    • Definition Lists
  • HTML Forms
    • How HTML Forms Work
    • The <form> Tag
    • Form Elements
    • Creating a Registration Form
  • HTML page framework tags
    • <html> and </html>
    • The role of the <head>...</head> region
    • The role of the <body>...</body> region
    • Adding a title, meta keywords, and meta description tags
  • Working with images
    • Understanding the GIF, JPEG, and PNG image formats (and when to use them)
    • Positioning images on the page
    • Flowing text around images
  • Using tables to display grids of data
    • Positioning tables on the page
    • Turning grid lines on and off
    • Customizing the table's appearance
    • Creating table heading and table data cells
    • Configuring cells to span multiple rows or columns
  • HTML5 Overview
    • Structure and paradigms, semantic Markup
    • DOM API changes
    • History
    • Geolocation
    • Using Modernizr.js for feature detection

Cascading Style Sheets

  • Introducing Cascading Style Sheets (CSS)
    • Origins of CSS
    • How CSS are used today
    • Where CSS "fits" in the page
  • Text formatting with CSS
    • Controlling font family, size, weight, style, and other properties
    • Applying text formats to multiple page sections (even if these sections are initially formatted very differently)
    • Reusing text formats across multiple pages
  • Positioning content with CSS
    • Breaking the page into DIV and SPAN regions
    • Understanding techniques for relative and absolute positioning
    • Using Z-Index values to control element stacking (and how to use this stacking to create drop shadows and other special effects)

Using Twitter Bootstrap

  • Overview
  • Understanding Bootstrap components
  • Including Bootstrap components in web pages
  • Layouts overview
  • Creating a tabular layout using Bootstrap
  • Responsive design
  • Typography overview
  • Creating and formatting tables for displaying tabular data
  • Styling form elements
  • Formatting buttons
  • Using Icons
  • Navigation
  • Progress bar styles
  • Breadcrumb trails
  • Modal Popups

TypeScript

TypeScript

  • Building Blocks
    • Modules
    • Interfaces
    • Class
    • Functions
    • Enum
  • Types
    • Static, Dynamic & Optional Types
    • Inferred Types
    • Builtin Types
    • Custom Types
    • Type Declaration
    • Type Inference
  • Abstractions
    • Defining Interfaces
    • Creating Interface Methods
  • Class
    • Private and Public Scope
    • Defining Members
    • Static Functions
    • Default and Optional Parameters
    • Overloading functions
    • Constructors
    • Implementing Interfaces
    • Inheritance and Polymorphism

Angular

  • Introduction to Angular
    • How Angular is opinionated
    • Difference between Angular 1.0 Angular 2.0 and above (Optional)
  • Angular Building Blocks
    • Module
    • Component
    • Template
    • Metadata
    • Data Binding
    • Service
    • Directive
    • Dependency Injection
  • Anatomy of an Angular Applications
    • Assembling applications using Modules
    • Identifying UI layers for Components
    • Metadata for Components
  • Testing
    • Jasmine Overview
    • Writing Tests in Typescript
    • Configure Karma to execute Tests
  • Components & Templates
    • Interpolation
    • Expressions and Statements
    • Bindings
    • Value Binding
    • Property Binding
    • Event Binding
    • Two way Binding
    • Component Life Cycle
    • Testing Components
  • Directives
    • Attribute Directives
    • Structural Directives
    • Using the Template Tag
    • Using the "*" in directives
    • Creating Components
    • Extending Directives
    • Creating Custom Directives
    • Updating DOM Nodes
    • Handling DOM Events
  • Pipes
    • Role of pipes in Angular applications
    • Using builtin pipes
    • Chaining Pipes
    • Creating Custom Pipes
    • Testing Direvtives
  • Dependency Injection
    • Configuring the Injector
    • Importing & Exporting Components
    • Importing & Exporting Services
    • Registering Providers
    • Class Providers and Value Providers
    • Factory Providers
  • Forms
    • Building forms using components and Templates
    • Two way binding
    • Change Tracking using ngControl
    • Validation
    • Reactive Forms
  • Routing and Navigation
    • Including the Router
    • Configuring the routes
    • Router Outlets and Links
    • Nested Routes
    • Accessing Route Params
    • Lazy loading of Modules and Components
  • Communicating with Servers
    • Using the http provider
    • Async Programming Using Promises
    • Resolving and Rejecting Promises
    • Configuring the requests
    • Sending Http Headers
    • Caching Responses
    • Request and Response Transformation
    • Using RESTful Resources
    • Using RxJS Objservables
  • RxJs
    • Streams as data source
    • Difference between Iterators and Observables
    • Using RxJs for observable manipulation
    • Sequences
    • Using sequence operators such as map(), filter(), concatAll(), reduce(), zip()
    • Handling Errors
  • Authentication & Authorization
    • Authentication Using JWT
    • Using Route Guards
      • CanActivate
      • CanActivateChild
      • CanDeactivate
      • CanLoad
    • JWT Http Interceptors
    • Authorization Workflow
    • Role-based Authorization
  • Realtime Updates using WebSockets
    • Need for bidirectional realtime communication
    • WebSockets overview
    • Using WebSockets in Angular
    • Subscribing and Publishing websocket events using RxJs
  • Profiling Angular Applications
    • Using Augury
  • Error Handling Strategies
    • Handling Local Errors
    • Handling Server Errors
    • Using the ErrorHandler Service
  • Build Automation
    • Using Webpack
    • Module Bundling using Webpack
    • Using Ahead Of Time compilation (AOT)