Developing Web Applications Using AngularJS
Course Code: hsts-c21
What is included in this course
Course Description
The AngularJS 1 course provides a thorough introduction to the AngularJS JavaScript Framework. Attendees will learn the fundamental skills necessary to build Web Applications using AngularJS and the MV* (Model View Whatever) design pattern. Topics include creating controllers, using scope to manage data, designing views/templates, routing, data binding and filters, applying directives, as well as form integration and validation. Students will also use AngularJS' built-in services to communicate with RESTful web services and provide CRUD database operations. Students will learn how to use CSS animations and Bootstrap to enhance the UI as well as learn to employ third-party components such as modal dialogs (“modals”), progress bars and navbars. In addition, students will learn to extend AngularJS with custom directives, services and filters.
The AngularJS 2 course provides a thorough introduction to the Angular JavaScript Framework including coverage of versions 2 through 4. Attendees will learn the fundamental skills necessary to build Web Applications using Angular and the MVVM (Model-View-ViewModel) design pattern. Topics include using TypeScript and ECMAScript 6 to create components, using directives and components to define UI elements, routes and screens, applying dependency injection, designing views/templates, routing, data binding and pipes, applying directives, as well as form integration and validation. Students will also use the Angular services to communicate with RESTful web services and provide CRUD database operations.
Comprehensive hands-on exercises are integrated throughout to reinforce learning and develop real competency.
We offer both AngularJS 1 and AngularJS 2 courses. See the course outline section for details.
In AngularJS 1 course, you will learn:
- Referencing AngularJS in a Web page
- Building Single Page Applications using AngularJS
- Integrating forms with AngularJS
- Organizing code using modules
- Injecting dependencies into a Module
- Configuring routes with ngRoute and $routeProvider
- Refactoring reusable code into factories and services
- Defining business logic using controllers
- Performing Ajax requests with the $http and $resource services
- Communicating with RESTful web services
- Reading data from remote servers using $http
- Providing new behaviors to HTML using AngularJS directives
- Enhancing the UI using animations and Bootstrap
- Extending AngularJS with custom directives, filters and services
In AngularJS course, you will learn:
- Using TypeScript and ECMAScript 6 to create components
- Using directives and components to define UI elements, routes and screens
- Working effectively with component lifecycle events
- Injecting dependencies to lessen coupling and increase testability
- Unit testing Angular applications with Karma and Jasmine
- Using property binding to link DOM elements with model data
- Building Single Page Applications using Angular
- Integrating forms with Angular
- Organizing code using modules
- Communicating with RESTful Web services
Course Prerequisites
Knowledge of HTML, CSS and JavaScript equivalent to attending the HTML5 & HTML Intro with CSS or Responsive Site Design with Bootstrap and jQuery Programming for Beginners or JavaScript and jQuery Introduction Programming classes. Knowledge of jQuery is helpful, but not required.
Related Training and Certification Courses:
Intro to Dreamweaver with Website Development Training
SQL Programming and Database Management
Object Oriented Programming with UML
Node.JS Coding with Hands-on Training
Cross-platform Native App Development Using HTML5, CSS3 and JavaScript
PHP Programming Language
Build Dynamic Applications Using PHP & MySQL
Introduction to Web Application Development Using JEE, Frameworks, Web Services and AJAX
Introduction to Python Programming
Self-paced training
This course is available in a self-paced video format starting at $60. Click here to learn more and register. For complete self-paced web design training, visit our Web design and development bundle page.
Corporate and Enterprise Training
Our live courses are also offered via our enterprise training program which comes with:
- In-person training at your location
- Access to recorded sessions of live classes
- Flexible training schedules that match your employees’ availability
- Course curriculum customization based on your training requirements and business goals
- Special rates for small or large groups
Feel free to contact us by email or phone to discuss your training needs and get a quote.
Overall Info About our Live Classes
Highlights
-
30 hours of hands-on training led by experienced instructors
-
Digital courseware and online course tracking
-
Final course project delivery
-
Certificate of Completion for each course
-
Session-based assignment
Enrollment Fee
In-person in DC or live online for $2990 per course
Course Session Dates
Our courses are offered all year around. Upon registration we enroll you to the earliest available class but you can reschedule it free of charge.
Locations
- Virtual live instructor classes via Zoom
- In-person classes in Washington DC and Virginia:
Below are our DC classroom locations:
- Dupont Circle
- 1666 Connecticut Ave NW Washington D.C. 20009
- Logan Circle
- 1624 14th St NW Washington D.C. 20009
- Chinatown
- 601 I St NW Washington D.C. 20001
- Columbia Heights
- 3343 14th St NW Washington D.C. 20010
Below are our Virginia classroom locations:
- Falls Church
- Comining soon...
-
Private custom training on site or at your location
-
Project based training cn site or at your location
Time
-
Online Monday-Friday: 11 am-5:30 pm EST
-
DC Monday-Friday: 9 am-3:30 pm EST
-
DC/Online Saturdays: 11 am-5:30 pm EST
-
DC/Online Sundays: 1 pm-7:30 pm EST
-
Private custom & project based training: your preference
Software Versions
Our classes are taught on the most current version of software whenever possible. To request a specific version, please Contact Us or call us at 240-200-6131
Course Outline
Topics Covered in this Course
1- Overview of AngularJS
- Features and Benefits of AngularJS
- MV* Design Pattern Overview
- Downloading AngularJS
- Referencing AngularJS Using a CDN
- The AngularJS Digest Cycle
- Overview of jqLite
- Architecting an Application with AngularJS
2- Creating Single Page Applications (SPAs)
- Single Page Application Model
- AngularJS Programming Model for SPAs
- Building the Shell HTML
- Designing a Common UI
- Defining Navigation
- Managing Feature Containers
- Designing Partial Views
- Organizing Business Logic in Controllers
- Programming the Data Model
- Marrying Views, Controllers and URLs
3- 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
4- 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"
5- Using Built-In AngularJS Directives
- AngularJS Directive Overview
- Behavior-Driven Directives
- ngChange
- ngClick
- ngSubmit
- DOM-Driven Directives
- ngShow/ngHide
- ngIf/ngSwitch
- ngSrc/ngHref
- Data-Driven Directives
- ngBind
- ngInit
- ngModel
- ngClass/ngStyle
6- Using AngularJS Services
- Built-In Services
- Comparing Factories and Services
- Using the $http and $resource Services
- Connecting to RESTful Web Services
- Performing CRUD Operations
- Retrieving JSON data Asynchronously
- Logging Errors with $log
- Using the $location and $window Services
- Deferred and Promise API
7- 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
8- Data Binding
- Overview of Data Binding
- The ngModel Directive
- Displaying Sets of Data with ngRepeat
- Applying Filters
- currency
- date
- orderby
- filter
- AngularJS Expressions
9- Integrating Forms in AngularJS
- Using the Form Controller
- Binding to Input Fields
- Toggling Control State Using Directives and Expressions
- ngChecked
- ngShow
- ngDisabled
10- Validating Forms in AngularJS
- Setting HTML5 Validation Attributes
- Using AngularJS Properties in Expressions
- Styling the Form with Angular CSS classes
- ng-valid
- ng-invalid
- ng-dirty
- ng-pristine
The following topics of AngularJS 1 may be included at the discretion of your instructor.
11- 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
12- Animating AngularJS Applications
- CSS3 Animations
- CSS3 Transitions
- CSS3 Animations
- Using the $animate Service
- Adding Animations on Enter, Leave and Move Events
- Injecting the ngAnimate Module
13- Integrating Third Party Frameworks
- Creating a Responsive UI with the Bootstrap Grid System
- Applying Bootstrap CSS Classes
- Using Bootstrap Components
- Progress bar
- Modal
- Tabs
- Navbar
- Using AngularStrap and AngularUI Components
Below is for Angular2 JS course outline which introduces Angular versions 2 through 4.
1- Overview of Angular and the MVVM Design Pattern
- Features and Benefits of Angular
- Angular Architecture
- MVVM Design Pattern Overview
- Downloading Angular
- Referencing Angular Using a CDN
- Choosing an IDE
- Creating a Simple Application with Angular
- Angular CLI
2- Working with TypeScript
- TypeScript vs ECMAScript 6
- TypeScript Basics
- Types
- Working with Built-In Types
- Custom Types
- Utilities
- Using Fat Arrow Syntax
- Template Strings
- Setting Up and Using Node.js
- Transpiling TypeScript into JavaScript
- TypeScript Compiler Configuration
- TypeScript Declaration Files
- Installing Typings Files
3- Angular Modules
- Using Modules to Create an Application
- Default Modules
- Exporting Classes, Functions and Values
- Limiting Scope
- Grouping Modules
- Specifying Module Dependencies
- Organizing Code Files
- Module Testing
- Best Practices
4- Angular Components
- Component LifeCycle
- Component Templates to Define Views
- Using Decorators to Define MetaData
- Component Styles
- Encapsulation
- ShadowDOM Style Encapsulation
- View Style Encapsulation
- No Encapsulation
- ElementRef and Popups
- ExportAs
- Lifecycle Hooks
- OnInit, OnDestroy, OnChanges, DoCheck
- AfterContentInit, AfterViewInit
- AfterContentChecked, AfterViewChecked
- Change Detection
- Basic Data Binding
- One-Way Binding
- Two-Way Binding
- Directives
5- Using Built-In Directives and Introduction to Pipes
- Overview of Angular Built-In Directives
- NgIf, NgFor, NgClass, NgStyle, NgSwitch, etc.
- Building Custom Directives
- Overview of Angular Built-In Filters
- Currency, Date, Json, LimitTo, Number, etc.
- Building Custom Filters
6- Some additional Built In Pipes
- Built-In Pipes
- Custom Pipes
- Adding and Using Parameters
- Using a Pipe in a Component
- Data Pipes
7- Defining and Consuming Services
- Dependency Injection
- Registering Providers with the Injector
- Creating a Service
- Consuming a Service
- Mocking a Service
- Working with Async Services and Promises
8- The Angular Animation System
- The Web Animations API
- States and Transitions
- Entering and Leaving
- Animating Properties
- KeyFrames
- Parallel Animation Groups
9- The HTTP Library
- Callbacks, Promises and Observables
- Importing the HTTP Module
- Creating Requests
- Processing Responses
- Web API
- Interacting with a RESTFul Service
- POST Requests
- DELETE Requests
- PUT Requests
- HEAD Requests
10- Angular Routing and Navigation
- Overview of Routing
- Client-Side vs Server-Side Routing
- Working with the Component Router
- Adding Router Imports
- Performing Router Configuration
- Using Router State
- Redirects
- Location Strategies
- Routing Parameters
- Router Lifecycle Events
- Nesting Routes
The following topics of AngularJS 2 may be included at the discretion of your instructor.
11- Data Binding and Programming Models
- Interpolation
- One-Way (Unidirectional) Binding
- Two-Way Binding
- Event Binding
- Observables vs. Promises
- Working with Observables
- Dealing with Out of Order Responses
- Altering Observables with Reactive Extensions (Rx)
- Reactive Programming Model
- Organizing Code Using Domain Models
12- Building and Deploying Applications
- Developing a Deployment Strategy
- Picking a Package Manager
- Using a Module Loader
- Using Gulp for More Complex Builds
- Managing Dependencies
- Using Sourcemaps
- Including Static Libraries and Files
- Transpiling
- Linting
- Handling Static Files
- Dealing with Internationalization Issues
13- Forms
- Template Driven Forms
- Input and Output Properies
- Property and Event Binding
- Interpolation
- Form Components
- Using Control and ControlGroup
- Using the FormBuilder Factory
- Form State
- Form Validation
- NgModel and NgForm Directives
- Model Driven Forms
- FormGroup and FormControl Classes
14- Creating Single Page Applications (SPAs)
- SPA Characteristics and Advantages
- SPA Potential Drawbacks
- Structuring Templates in an SPA
- Security Challenges and Approaches for Angular SPAs
- When Not to Use SPA Architecture
View Other Classes!