
Angular JS Training
AngularJS, one of the greatest well-structured JavaScript frameworks with very compelling and advanced features is dominating the IT world now. It is a new, powerful, client-side technology that provides a way of accomplishing really powerful things in a way that embraces and extends HTML, CSS and JavaScript, while shoring up some of its glaring deficiencies. Also, it is used in simplifying testing, developing technical nuances for developers.
AngularJS was developed and maintained by
Google. Its latest version is 4. In single-page application, android mobile
application and in smooth web application front in, AngularJS is the best
programing language. Simple unit test, getting your works done by writing fewer
lines of code and focusing and full control over logic make AngularJS very
popular among the advanced IT world.
Module 1 – Introduction to "Modern (ES5)" JavaScript
- JavaScript Refresher
- Basic language features
- Creating variables with var
- Functions and functional programming
- Nesting functions
- Nesting with function reference variables
- Creating Objects with JavaScript literal syntax and constructor functions
- Indexed property access
- Typeof and objects
- Special comparisons for objects
- Scope and Context
- JavaScript visibility rules
- Global variables
- Object functions and execution
- The this keyword in JavaScript
- By reference – vs – by value
- JavaScript types: Number, String, Boolean, Date
- JavaScript == and false conditions
- Meet "Triple Equals" ===
- Primitives and wrapper objects in JavaScript
- Arrays – Ordered sequence of items
- Key JavaScript built-in objects
- Using Object.create
- Prototype – key points
- Metadata – built-in functions and objects
- AngularJS and JavaScript’s good parts
- Closure key points
- JSON
- Jasmine – the JavaScript testing API
- Lab 1 – Functional JavaScript
Module 2 – Introducing AngularJS and Modules
- SPAs and division of labor
- History of AngularJS
- AngularJS JavaScript API
- Small applications
- Expressions and bindings
- Defining a module
- Where to mount ng-app
- Major Angular components
- Models, scopes, views and templates
- Dependency Injection
- AngularJS and Scripts
- Multi-module applications
- Example Module Reference and extension
- Testing modules with Jasmine
- Lab 2 – Angular JS Modules
Module 3 – AngularJS Views and Templates
- Templates and Views
- Views on the main page with ng-app
- The Routing mechanism
- View Areas and View Routing
- Configuring Routing
- Brief Detour – Angular style guide
- Unit Testing routes
- Route Path Variables
- Search Parameters
- Route, search parameters are fetched with $location
- Recap – Routing Steps
- Best Practice – Externalize View templates
- Testing routing and view templates
- More comprehensive tests
- ng-model
- ng-hide and ng-show
- ng-init and ng-repeat
- Running Angular Applications in NodeJS, Java, etc.
- Lab 3 – Angular JS Views and Templates
Module 4 – Controllers, Model and Scope
- The relationship between M, V, and C – the $scope
- Angular’s MVC – the M-V-VM Pattern
- Controllers – set up your view
- Controllers and $scope
- The ng-controller directive
- Event-triggering directives
- Executing controllers from routes
- Bindings, scope relationships and lifecycle
- One-way data binding
- Two-way data binding
- Variables and scope
- Scopes and nesting
- How long do scopes live?
- Visualizing scope
- Models in the scope
- Example – Editable content in repeater
- Events in $scope with a function
- Example – bind to a function
- Better with objects…
- Watching a variable in the scope
- Break
- Sorting and Filtering
- Unit Testing controllers and scopes
- Setting up stubbed controller data
- Writing the test spec
- Labs 4.1, 4.2 and 4.3 – Controllers and scope
- Parameter variables and minification
- Minification tips
- Web Testing
- ng0scenario and protractor
- Lab 4.4 (a or b) – Scenario or Protractor tests (optional)
Chapter 5 – Services
- The role of services
- Four ways to define a service
- Using a service from a controller
- Using closure to hide data in a service
- Adding dependencies to a service
- Testing Services
- Dealing with service dependencies
- Injecting a replacement stub into Angular
- Lab 5 – Defining A Service
- Using Jasmine’s Spy framework
- Advanced Spies
- Returning results from services
- Async service – $http and callbacks
- Promises and the thenfunction
- Sending a message to a message bus
- Sample Message Bus
- Problems with message busses
Module 6 – Putting it all together with Forms
- Form handlers in Angular
- Placement rules
- Forms workshop in plunker
- Setting up form handlers on controllers
- Properties of forms, fields
- Form Processing
- The ngMessagesmodule
- Forms and models
- Nested Forms
- Switching location
- Data binding and forms with ng-formand <input>tags
- Pre-1.3 Angular in-line form validation
- Regular expression validations
- Angular validators depend on field type
- More validators
- More HTML Fields
- Key validator attributes
- Select using ng-options and arrays
- Select with object-based collections
- Text Areas
- Other form validation techniques in Angular
- Submitting form data within the single-page application
- Interacting with a service
- Lab 6 – Forms
- Forms notes for 1.3 and above
- Enhancements for error handling
Module 7 – Directives
- Directive capabilities
- General Syntax
- Using a directive
- Directives and Scopes
- Isolated Scope
- Passing Parameters by Reference
- Binding : two way data binding with =
- Binding: Evaluation binding with @
- Binding: Using &to expose events
- Subscribing to a message in a directive
- Manipulating the DOM via jQuery / jqLite
- Problem with testing and templateUrl
- Good example directives
- Directives summary
- Lab 7 – Writing and integrating a directive