Develop responsive and feature-rich websites using AngularJS 1

Workshop Code: hsts-w28

---

What Is Included in this Live Workshop

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

Workshop Description

This hands-on programming workshop 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.

Comprehensive hands-on exercises are integrated throughout to reinforce learning and develop real competency.

This workshop introduces AngularJS 1.x. Students interested in Angular 2 should take the Developing Web Applications Using Angular 2 workshop instead.

Workshop 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 DB Management
Cross-platform Native App Development Using HTML5, CSS3 and JavaScript
Object Oriented Programming with UML

---

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.

---

Overall Info About our Workshops

Highlights

• 6 hour hands-on training led by experienced instructors
• Digital workshop contents

Enrollment Fee

Online live starts from $390

Workshop Session Dates

Our workshops are offered all year around. Upon registration we enroll you to the earliest available class but you can reschedule it free of charge. Location

• Online or in our DC office at 3165 Mt Pleasant St NW
  

Time

• Saturdays 9AM-4:30PM (1 hour Lunch)
• Weekdays 6:30PM-9:30 PM

---

Workshop 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
• $watch
• $apply
• 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- Data Binding

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

7- Integrating Forms in AngularJS

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

8- Validating Forms in AngularJS

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

---