UI Developer with Angular
UI developer training course content
HTML
- Introduction
- Elements
- Attributes
- HTML Document Head
- Title
- Meta tag
- Charset
- Style tag
- Script tag
- Link tag
- Base tag
- HTML Body
- What is Semantic?
- Block vs Inline elements
- Text format
- Header tags
- Links / Anchor tags
- Target, title attributes
- Relative vs Absolute
- Id links and External id links
- Access Keys
- Html Lists
- Unordered list
- Ordered list
- Definition list
- Nested list
- Table
- Table structure
- Semantic Table structure
- Rows - Columns
- Col Span
- Row Span
- Cell padding, Cell spacing
- Borders and formatting table
- Images and objects
- Embedding images
- Working with Transparent images
- Embedding Video audio
- Object tag with params
- Html Forms
- Form tag
- Input types
- Layouts and semantic html layout structure
- Usability & Accessibility standards
- Creating Sample Project using Html
CSS
- Introduction
- Types of CSS
- Syntax
- Selectors
- Colours
- Lengths & Percentages
- Formatting html elements
- CSS box model
- Grouping
- Nesting
- Pseudo classes and elements
- Floats
- Display property
- Positions
- Background images
- Shorthand properties
- Rounded corners
- Gradients
- Embedding fonts
- Transitions
- Layouts
- Fixed layouts
- RWD
Java Script
- Data types
- Numbers
- Strings
- Boolean
- Undefined
- Null
- Arrays
- Objects
- Variables
- Comments
- Operators
- Arithmetic operators
- Comparison operators
- Logical operators
- Assignment operators
- Conditional operator
- Conditional Statements
- If, if else, if else if
- Switch
- Loops
- While loop
- Do while loop
- For loop (Advance concepts how to optimize)
- For in loop (will be discussed in objects)
- Functions
- Defining function
- Types of defining functions and types of calling functions
- Function statements
- Working parameters
- Assign params to functions
- Working with āNā number of params
- Special Arguments array
- Return statements
- Anonymous functions
- Nested functions
- Function that return functions
- Self-invoking functions
- Literal functions
- Scopes
- Lexical scope
- Closures
- Closures in Loop
- Objects /Prototype & patterns (Object oriented javascript)
- What is objects?
- Defining Objects?
- Properties and methods
- Inheritance
- Prototype
- Js patterns
- Singleton pattern
- Constructor pattern
- Discussing about other patterns
- Linking objects with another object
- Accessing other object properties and methods
- Data Structures
- Arrays
- Defining arrays
- Exploring arrays properties
- Exploring array methods
- Working with multi-dimensional arrays
- Looping array data
- More Advanced concepts in Arrays and array methods
- Javascript Built in Functions and objects
- String
- Date
- Math
- Regex
- BOM, DOM, Window
- Events
- Exploring event types
- Binding events
- Optimal way of attaching events
- Event Phases
- Capturing
- Bubbling
- Targeting
- Event Delegation
- Prevent Default
- Working with timeout functions
- Ajax with Core javascript
- Form handling with javascript
- Cookies
- Error Handling
- Debugging
- Sample Project Creation using Javascript
JQuery
- Introduction
- Jquery Selectors
- Jquery Events
- Jquery Effects
- Modifying DOM
- Ajax
- Form Validation
- Creating Sample project
HTML5
- New HTML 5 Controls
- Audio and Video Controls
- New input types
- Canvas
- SUV control
- New Semantic controls
- HTML5 API
- Exploring HTML5 new features
- GEO Location
- Drag/Drop
- Local Storage
- App Cache
- WEB Workers
- SSE
BootStrap3
- Introduction
- Layout system
- Grid system
- Components
- Themes
- Creating Project with bootstrap
Angular JS
- Introduction to Angular
- Overview
- Angular Architecture
- MVC Frameworks
- Hello World in Angular
- Angular Features
- Models
- Routing
- Extended HTML Vocabulary
- Components
- Services
- Controllers
- Views/Directives
- Events
- Controllers and Markup
- Introduction
- Controllers and Scope
- Built-in Directives
- Event Directives
- ngClick
- ngDblClick
- ngMousedown
- ngMouseenter
- ngMouseleave
- ngMousemove
- ngMouseover
- ngMouseup
- ngChange
- More Directives
- ngApp
- ngBind
- ngBindTemplate
- ngBindHtml
- ngBindHtmlUnsafe
- ngHide
- ngShow
- ngCloak
- ngStyle
- ngClass
- ngClassEven
- ngClassOdd
- ngPluralize
- ngSwitch
- Browser Compatibility
- Expressions
- Filters
- Built-in Filters
- uppercase
- lowercase
- number
- currency
- date
- json
- orderBy
- limitTo
- filter
- Custom Filters
- Built-in Filters
- TwoWay Binding
- ngModel
- Validation
- Required
- ngPattern
- Form Properties
- CSS Classes
- Creating and Using Services
- Introduction to Services
- Built-In Services
- $http and $q Services Together
- $resource Service
- $cacheFactory Service
- $compile Service
- $parse Service
- $locale Service
- $timeout Service
- $filter Service
- $log
- $rootScope
- $window
- $document
- $route
- $routeParams
- $location
- $controller
- Custom Service
- Creating the custom service
- Consuming the custom service
- Routing
- Introduction to Routing o Single Page Applications Adding Your First
Route - More Routing and Browser History
- Creating a Default Route
- Accessing Parameters from the Route
- $route Service
- Enabling HTML5 Routing
- Template and Resolve Properties
- $location Service
- Introduction to Routing o Single Page Applications Adding Your First
- Creating Custom Directives
- Introduction to Directives
- Why do we need custom directives
- Creating Your First Directive
- Domain Specific Language via Custom Elements
- Isolating Directive Scope
- Exploring Isolate Scope Bindings
- Handling Events with Directives
- Observing and Responding to Changes
- Using Controllers within Directives
- Sharing Directive Controllers via Require
- Directive Priority and using Terminal
- Using Require with Nested Directives
- Testing Angular Applications
- Unit testing
- Introduction to Jasmine
- Writing unit tests with Jasmine
- Automate Unit Tests with Karma
- Introduction to Karma
- Automate unit tests with Karma
- End to End Testing of Angular
- Introduction to protractor
- Setting up protractor
- Write End to End Tests with protractor
- Execute end to end tests with protractor
- Unit testing
- Securing Angular JS Applications
- Why Angular Security
- Typical security risks in client side frameworks
- Output encoding
- Httponly
- https
- secure cookies
- ngSanitize Module
- Optimize angularjs application
- Bundling and Minification
- Limit the number of Ajax request
- Pass the data chunk by chunk
- Use async where ever possible
- Create SPA applications
- Using modular Javascript
- Limit the data transfer between client and server
Node JS
- Node JS Introduction
- Environment setup
- Introduction to NPM
- Installing NPM Packages
- Callback methods
- Event loops
- Event emitters
- Rest Services/Web API
ES 6
- New Features In ES6
- Introduction
- let, const and Block Scoping
- Arrow Functions
- Default Function Parameters
- Rest and Spread
- Object Literal Extensions
- for ... of Loops
- Template Literals
- Modules and Classes
- Introduction and Setup
- Module Basics
- Named Exports in Modules
- Class Fundamentals
- extends and super
- Properties for Class Instances
- Static Members
TypeScript
- Introduction
- What is TypeScript
- Why and where to use TypeScript
- Variables and Functions
- Defining Types
- String
- Int
- bool
- Type Inference
- Object types
- Function types
- Arrow Functions
- Defining Types
- Classes and Interfaces
- Defining Class
- Properties
- Methods
- Extending the Classes
- Using Interfaces
- Extending the Interfaces
- Defining Class
- Modules
- Creating a Module
- Using Modules
- Module Dependencies
Angular 2/4
- Introduction to MVVM
- Why Angular 4
- Expressive HTML
- Powerful Data Binding
- Modular by Design
- Built-in Back-End Integration
- Components
- Introduction
- Template
- String
- URL
- Class
- Properties
- Methods
- Metadata
- Decorator
- Using As Directives
- Modules
- ES2015 Modules
- Export Module
- Import Module
- Data Binding
- Interpolation
- Property Binding
- Two way Binding
- ngModel
- Event Binding
- Angular Built-in Directives
- Structural Directives
- *ngIf
- *ngFor
- # Local Variable
- For Loop through objects
- Structural Directives
- Pipes
- Introduction
- Built in Pipes
- lowercase
- uppercase
- currency
- JSON
- date
- decimal
- slice
- Creating Custom Pipes
- Using Custom Pipes
- Advanced Components
- Strong Typing and Interfaces
- Encapsulating styles
- Styles
- StyleUrls
- Lifecycle
- Create
- Render
- Render children
- Process changes
- Destroy
- Lifecycle hooks
- OnInit
- OnChanges
- OnDestroy
- Nested Components
- Building Nested Component
- Using Nested Component
- Pass data to Nested Component
- Raise Event from Nested Component
- Services and Dependency Injection
- What is service
- Build service
- Register service
- Injecting the service
- Using Built In Services
- Data Exchange Using Http
- Observables and Reactive Extensions
- Receiving Data Using Http
- Sending Data using Http
- Handling Errors
- Subscribing to an Observable
- Navigation and Routing
- Routing
- Configuring Routes
- Tying Routes to Actions
- Placing the Views
- Passing Parameters to a Route
- Activating a Route with Code