Webdesigning Syllabus

 Introduction to AngularJs 2

• Evolution of the web
• Introduction to front end frameworks
• What is Single Page Application
• How SPA works
• Traditional website
• Misconception about SPA
• What’s new in SPA
• Benefits of SPA
• History of Angular
• Problems with angular 1.x
• Introduction to Angular 2
• Transpilers
• Tech Supporting ng2
• Dev Environment Setup
• Hello World Example – ng2

 ES6

• What is ES6?
• Does All browser supports ES6?
• Some basic features of ES6
• Scoping
• Destructuring
• Promises
• Arrow functions
• Drawback of Arrow Function
• Sets and Maps
• WeakMap
• Rest parameters
• Spread
• Iterators
• Generators
• Classes
• Inheritance
• Get & Set
• Module

 TypeScript I

• Typescript features
• Typescript: Data types
• Functions
• Function: Inferring the types
• Typescript: Classes
• Typescript: Inheritance
• Typescript: Interface
• Public ; private; and protected modifiers
• Generics
• Generic Types
• Generic Classes
• Generic Constraints

 TypeScript II

• Typescript: Decorators
• Enable Experimental Support for Decorators
• Class Decorator
• Property Decorator
• Method Decorator
• Parameter Decorator
• TypeScript Modules
• Implicit Internal Modules
• Named Internal Modules
• Exports
• External Modules
• Namespace
• Mixins

 Seed Project, BootStrapping,Project Structure,Angular Module,Component Basics, Project I

• Angular 2 Project
• Angular 2 Architecture
• Angular 2 beta
• Gulp
• Webpack
• webpack dev server
• Sass
• Jasmine
• Karma
• Angular 2 beta
• Running Angular 2 beta application
• Understanding Tsconfig.json
• Typings
• Bootstrapping Angular App
• Project Structure
• Angular Module
• Angular Library Module
• Basics of component
• Component Decorator
• Component Decorator details
• Advantage and limitations of component

 AngularJs Template Syntax, InBuilt Directives, Project I Cont..

• Interpolation
• Template Expressions
• Template Statements
• Binding Syntax
• Property Binding
• Property binding or interpolation?
• Attribute Bindings
• Class binding
• Style binding
• Event Binding
• Local Template Variables
• Built-in Directives – NgClass ; NgStyle;NgIf;NgFor;ngNonBindable;NgSwitch
• Difference in Event & Property Binding
• Two way data binding with ngModel
• User Input
• Form Controls in Angular 2
• Controls and Control Groups
• Form & NgForm
• input & NgControl
• Error & Validation Handling
• CSS for Forms
• Custom validation

 Dependency Injection in Angular 2

• Dependency Injection
• Why dependency injection?Dependency Injection: Usage
• Configuring the injector
• Injectable Decorators
• Dependency Injection Tokens

 Components in Detail

• Component in Angular 2
• Metadata for Classes
• Styles
• Encapsulation
• Templates
• Component Availability
• Annotations
• Event Delegation
• Delegation: EventEmitter
• ViewChildren & Content Children

 Directives in Detail

• Directives
• Difference between Directives and Component
• Directive Metadata
• Types of directive
• Point to remember
• Host
• HostBinding
• HostListener
• Web Component
• ExportAs
• LifeCycle
• ngOnInit
• ngOnChanges
• ngDoCheck
• ngOnDestroy
• Input
• Output.

 Pipes

• Pipes
• Chaining pipes
• Parameters in Pipe
• Custom Pipe
• Async Pipes
• Built In Pipes -date
• Slice
• Decimal
• Percent
• Currency
• J-son
• Lowercase
• Uppercase
• About Pipe in detail

 Routing, Navigation

• Router
• Behavior of Browser
• Introduction to Router
• The Basics
• Configuration
• RouteConfig
• RouterOutlet
• RouterLink
• ROUTER_PROVIDERS
• Navigation
• Life Cycle
• Two critical points
• Child Routers
• Query Parameters
• URL Style/HTML5 Mode
• Linker Route Parameters

 Http Client

• Http Client
• HTTP Get
• Post Methods
• Promises
• Observables vs Promises
• Transforming Data
• JSONP
• Custom Headers
• Query String Parameters
• Intro to RxJS

 Services, Providers,LifeCycle hooks

• Intro to Services in Angular 2
• Service
• Inject the HeroService
• Providers Overview
• Simple Service Example
• Lifecycle Hooks Component Lifecycle
• Methods – OnInit
• OnDestroy
• DoCheck
• OnChanges
• AfterContentInit
• AfterContentChecked
• AfterViewInit.

 Events in angular 2, data & state management

• Events in Angular Event Emitter Class
• Emit Method
• Next Method
• Subscribe Method

 Migrating Angular 1 to 2, Performance Considerations, change detection

• Migrating Angular 1 to 2 Code Changes
• Upgrade Adapter
• Hybrid App Angular 1 & 2
• Upgrade
• Controllers

 Testing & deployment

• Testing Angular 2 Apps Unit Testing
• Technologies – Jasmine
• Mock Dependencies
• Testing
• Components
• End to End Tests
• Performance Tests Deployment

 ReactJS I

• Introduction
• Data driven web application in Ideal shape
• Data driven web application in reality
• What is React?
• What is Flux?
• What is Relay?
• What is Relay?
• Why ES2015 (ES6)
• Introduction of Target project
• Book Store Application

 ReactJS II

• Setup React
• Setup Webpack and Babel
• Setup Project (A node project)
• Building project
• Test the project
• HMR (Hot Module Replacement)
• Linting our project
• Putting style to our project
• Adding Twitter Bootstrap & test it.

 Project II

• Mentee can select project from predefined set of Webnagars projects or they can come up with their own ideas for their projects

Comments are closed