AngularJS Online Training

AngularJS Online Training Course Content

Overview of AngularJS

  • Features and Benefits of AngularJS
  • MV* Design Pattern Overview
  • Downloading AngularJS
  • Referencing AngularJS Using a CDN
  • The AngularJS Digest Cycle
  1. $watch
  2. $apply
  • Overview of jqLite
  • Architecting an Application with AngularJS

Creating Single Page Applications (SPAs)

  • Single Page Application Model
  • AngularJS Programming Model for SPAs
  • Building the Shell HTML
  1. Designing a Common UI
  2. Defining Navigation
  • Managing Feature Containers
  1. Designing Partial Views
  2. Organizing Business Logic in Controllers
  3. Programming the Data Model
  • Marrying Views, Controllers and URLs

Building Modules in AngularJS

  • Overview of Modules
  • Organizing Code Using Modules
  • Defining an Application with angular.module()
  • Bootstrapping an Application with ngApp
  • Managing Dependencies with Dependency Injection
  • Dealing with Minification Issues

Creating Controllers

  • Defining a Controller with module.controller()
  • Creating Properties and Methods in a Controller
  • Using the ngController Directive
  • Defining $scope in a Controller
  • Avoiding Scope Conflicts Using “Controller As”

Using Built-In AngularJS Directives

  • AngularJS Directive Overview
  • Behavior-Driven Directives
  1. ngChange
  2. ngClick
  3. ngSubmit
  • DOM-Driven Directives
  1. ngShow/ngHide
  2. ngIf/ngSwitch
  3. ngSrc/ngHref
  • Data-Driven Directives
  1. ngBind
  2. ngInit
  3. ngModel
  4. ngClass/ngStyle

Using AngularJS Services

  • Built-In Services and Factories
  • Comparing Factories and Services
  • Using the $http and $resource Services
  1. Connecting to RESTful Web Services
  2. Performing CRUD Operations
  3. Retrieving JSON data Asynchronously
  • Logging Errors with $log
  • Using the $location and $window Services
  • Deferred and Promise API

AngularJS Routing

  • Overview of Routing
  • Configuring Routes with $routeProvider
  • Defining Route Parameters
  • Designing a Shell Page with ngView
  • Defining Templates
  • Mapping Route URLs to Templates

Data Binding

  • Overview of Data Binding
  • The ngModel Directive
  • Displaying Sets of Data with ngRepeat
  • Applying Filters
  1. currency
  2. date
  3. orderby
  4. filter
  • AngularJS Expressions

Integrating Forms in AngularJS

  • Using the Form Controller
  • Binding to Input Fields
  • Toggling Control State Using Directives and Expressions
  1. ngChecked
  2. ngShow
  3. ngDisabled

Validating Forms in AngularJS

  • Setting HTML5 Validation Attributes
  1. required
  2. pattern
  3. min/max
  • Using AngularJS Properties in Expressions
  1. $error
  2. $dirty
  3. $invalid
  • Styling the Form with Angular CSS classes
  1. ng-valid
  2. ng-invalid
  3. ng-dirty
  4. ng-pristine

Extending AngularJS

Defining Custom Directives

  • Shared and Isolate Scope
  • Defining One- and Two-Way Data Bindings
  • Local Scope Properties (@, = and &)

Defining Custom Services

  • Refactoring Code into a Service
  • Defining Properties and Methods
  • Returning a Service

Defining Custom Factories

  • Refactoring Code into a Factory
  • Defining Properties and Methods
  • Returning a Factory Object

Defining Constants and Values

Defining Custom Filters

Animating AngularJS Applications

  • CSS3 Animations
  1. CSS3 Transitions
  2. CSS3 Animations
  • Using the $animate Service
  • Adding Animations on Enter, Leave and Move Events
  • Injecting the ngAnimate Module

Integrating Third Party Frameworks

  • Creating a Responsive UI with the Bootstrap Grid System
  • Applying Bootstrap CSS Classes
  • Using Bootstrap Components
  1. Progress bar
  2. Modal
  3. Tabs
  4. Navbar
  • Using AngularStrap and AngularUI Components