AngularJS – HTTP Servers, Directives and Beyond

2 Days

Using AngularJS in your company and having trouble on-boarding new developers?

Jump to Sign-Up Form

This two-day follow-on course to our Fundamentals of AngularJS offering delves into a number of topics, including the basics of web resource access and security, how to write directives, filters and sorting mechanisms, and some advanced debugging and development tips and tricks. This course can be combined for an on-site four day offering with our AngularJS Fundamentals class. Contact us for details below. We are available for teaching private training courses.

Prerequisites:

  • AngularJS Fundamentals or equivalent knowledge
  • Read up on Javascript’s functional and object-oriented “Good Parts” using Douglas Crockford’s Javascript, The Good Parts
  • Comfort working in an IDE or editor and a build tool such as Gulp or Grunt (we will set up an environment for you, but for this course we focus on the client code and provide the backend, so it’s not 100% critical we match your platform).

Note: Can be combined for an on-site four day offering with our AngularJS Fundamentals class – contact us below for more details.

Topics

Key Topic Areas

In this two-day course, you will build an Angular application from the ground up.

01

Focusing on Enterprise Application

We discuss how to integrate with server-side resources using $http and $resource, and integrating with token or cookie-based security. We cover topics such as where to store your data, security concerns, and other enterprise development topics. Use this course to round out the basics and give you a leg up on developing applications using AngularJS.

02

Strengthening Fundamentals

We cover how to write and test directives, including topics such as templates, how to test with external template URLs, writing your own data-bound components, filters, paging and sorting mechanisms, and will share some tips and tricks along the way. Our learning environment uses JS-based build tools such as gulp, nodejs/npm, but your learning is NOT environment specific. Tips for Java developers on the Maven platform will also be provided.

 
What You’ll Learn

Course Outline

A chapter-by-chapter breakdown of all the concepts and tools we’ll be covering over the two-day course.

  • The Networking Objects
  • Getting Started – A sample $http GET
  • Configuration options
  • Results via Callbacks
  • Full Example – from Controller
  • POST/PUT/DELETE
  • Sample POST – creating a customer
  • Sample PUT – updating customer 43
  • Sample DELETE – removing the object
  • Callbacks and Services
  • The Promise API
  • Using a service with a promise
  • Clean up the promise call with pre-defined functions
  • Providing our own promises
  • Advanced uses of Promises
  • Interesting sidenote – errors with $q.all
  • Other $http techniques
  • Defining a request body
  • Defining request headers
  • Using Parameters
  • Working REST-style with response locations
  • $httpBackend unit testing
  • The e2eMock $httpBackend
  • End to End (e2e) Example
  • UI update techniques
  • Data binding options with remote data
  • The Router and promises
  • The controller and view
  • Lab
  • SPA and State
  • State in an Angular application
  • What to use, when – client-tier, middle-tier and database
  • RESTful API using $resource
  • Resource methods available by default
  • Using your resource
  • Providing your own PUT mapping
  • Creating RESTful objects with resources
  • Restful resource fetching and processing
  • HATEOAS / REST
  • Open Source project – angularjs-hateoas
  • External models
  • Lab
  • Built-in filter mechanics
  • Multi-field search filters
  • Writing and using your own filters
  • Filtering for modifying non-array objects
  • Transforming a number
  • Transforming a string
  • Dynamic sorting changes with controller methods
  • Pagination using filters and services
  • Third-party paging / scrolling APIs
  • Lab
  • Directive capabilities
  • General Directive Creation Syntax
  • Generate HTML content
  • Restricting the mounting options
  • Using a directive # As a tag with restrict: 'E' # As an attribute with restrict: 'A' *# As a style class name with restrict: 'C'
  • Lab 4.1 – A simple directive
  • Scopes and Directives
  • No nested scope (scope: false) – example
  • Shared scope (scope: true) – example
  • Isolate Scope
  • Isolate Scope – what can you do?
  • Bi-directional Data Binding
  • One-way Data Binding
  • Function Binding
  • Mapping Parameters for Function Bindings
  • Lab 4.2 : Scopes
  • Best Practices – Naming Directives
  • Use HTML templates for content
  • Internal template
  • Externalized templates
  • Defining a directive controller method
  • Lab 4.3 : Directives with controllers and templates
  • Interacting with the DOM and your template *
  • There are several pre-defined directive functions
  • Controller feature – DOM and attribute access
  • Controller feature – exporting methods
  • The link function
  • The compile method
  • Additional notes – compile function
  • The directive lifecycle
  • Lab 4.4 – Directive Lifecycle
  • Other Angular Directive properties
  • (Deprecated) Replacing the directive tags – replace
  • Terminal / Priority
  • Techniques – Using @ for widget properties
  • Testing Directives
  • Challenge – External templates
  • Maven Build Options
  • Example
  • Node-based build tools and templates
  • Gulp example, using gulp-ng-html2js
  • Lab 4.5 – Testing directives
  • Angular uses live bindings
  • The Digest Cycle : $watch and $update
  • Integrating with jQuery – the UI Date Picker
  • Using $apply to update Angular’s scope
  • Watching items with $watch
  • Does everything need a watch?
  • Watches via expressions
  • Let’s look at ng-bind for a minute
  • ngBind works this way
  • Angular model and scope binding options
  • Lab
  • Multi-part modal editing components
  • Parent and Child / nesting directives
  • Sibling directives and sharing scope
  • Providing a directive API with controllers / messages
  • Other directive component ideas
  • Providing a toolbar
  • Handling menu item selection
  • Example of meta-components – tabset – get scope of parent or child
  • Tips – controllers
  • Lab 5
  • Lab
  • 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

Kind Words from Our Students

Just wanted to thank you for your excellent instruction these past few days. Your ability to explain such a complicated framework in an intuitive way has been immensely helpful in filling in my gaps of AngularJS knowledge.

Course Alumni

Angular Training
2018-12-26T18:03:21+00:00

Course Alumni

Just wanted to thank you for your excellent instruction these past few days. Your ability to explain such a complicated framework in an intuitive way has been immensely helpful in filling in my gaps of AngularJS knowledge.

I still use your materials to learn about AngularJS. One of my co-workers just found one of your blog articles on Jasmine testing and it worked perfectly. Thank you.

Course Alumni

Angular Training
2018-12-26T18:06:49+00:00

Course Alumni

I still use your materials to learn about AngularJS. One of my co-workers just found one of your blog articles on Jasmine testing and it worked perfectly. Thank you.

The instructional design and delivery were excellent.

Jason W., student of Fortune 100 Repeat Client

Angular Training
2018-12-26T18:07:15+00:00

Jason W., student of Fortune 100 Repeat Client

The instructional design and delivery were excellent.

Know that your efforts are greatly appreciated and have greatly impacted my daily work life.

Alex S.

Angular Training
2018-12-26T18:07:39+00:00

Alex S.

Know that your efforts are greatly appreciated and have greatly impacted my daily work life.
Get Started

Interested in training at Chariot?

Use the contact form below to get in touch with us, and a member of our team will reach back out shortly.


* These fields are required.