Call Us: +32 2 466 00 16
Email: info@u2u.be
Follow Us:

Building Web-Apps with AngularJS

2days
Training code
uangjs

Upcoming sessions

This course is currently not scheduled

Subscribe to waiting list

Introduction to AngularJS

AngularJS separates JS code from views by using data binding. This leads to easier to understand and more maintainable code. This module will teach you how to use data binding as well as other fundamental building blocks of any AngularJS application.

  • Getting Started
  • MVW-pattern
  • Binding to single values
  • Binding to collections
  • Value Conversion
  • Directives
  • Services
  • Utility Functions

Modules and Scopes

Scopes are the glue between your JS code and your HTML views. Misunderstanding scopes is often a source of frustration. This module tries to get rid off that. In addition you will use Modules and Dependency Injection to organize your code.

  • Dependency Injection
  • Organizing code into Modules
  • RootScope and Scope hierarchy
  • Scope inheritance

Factories and Services

There is a lot more to an application than just the UI. This module will teach you about services to host your reusable code.

  • Injecting a Service
  • Defining a Service
  • Factories
  • Manage Service Dependencies

Building a Single Page Application

Instead of jumping from one page to the next, you can simply stay on the same page and load sub-views dynamically which makes your web-app feel a lot more like a desktop/mobile app. This has a number of benefits, but is quite challenging to build. This module introduces client-side routing in AngularJS.

  • Route and Location Services
  • Partial views
  • Resources
  • Include

Directives

Directives are responsible for adding new behavior to an existing element, or to create a completely new element all together. This is what people turn to when they need custom controls.

  • Understanding Directives
  • Creating a Directive
  • Restrictions
  • Templates
  • Isolating the Scope
  • DOM Manipulation and Events
  • Directive Communication

Angular internals

This theoretical module is all about grasping the internals of AngularJS. By really understanding how it works, you are equipped to do advanced debugging, spot bottlenecks and spend less hours looking at code that is supposed to work, but doesn't.

  • Bootstrapping
  • Angular runtime
  • Compile and Link phases
  • Scope life cycle

Filters

Don't put stuff like this on your screen: '"Thu Feb 02 2017 08:58:10 GMT+0100 (Romance Standard Time)". Put stuff like this on your screen: "2017/02/02". Be smart, use filters.

  • Using a Filter
  • Built-in Filters
  • Custom Filters

Data Validation

Nobody is perfect, and definitely not your end users. Do validation and inform them that it's their fault, not your code!

  • Form Directives
  • Displaying and Styling Feedback
  • Custom Validation
  • Custom Form Directives

Jasmine Test Framework

Who needs testing anyway? You do. Yes you, don't look surprised. You'll be writing a lot of code in JavaScript and to guarantee its quality you need tests. Jasmine is a standalone test framework that you can use to test any piece of JavaScript code. We'll take a look at some test runners too.

  • Challenges for testing
  • Jasmine Introduction
  • Features: Asserts, Suites, Async, Spies
  • Karma Test runner

Testing in Angular

AngularJS adds a bunch of constructs to Jasmine. This eases writing tests for AngularJS-specific code.

  • Unit Testing with Jasmine
  • Angular-Mock
  • End-To-End testing

Client-side concepts like Data Binding, heavy use of web services, Single Page Applications, etc. help developers to vastly improve user experience. However this is not always easy to build because HTML was never designed for applications. AngularJS is an MVW-based framework that transforms HTML into what HTML would be if it were designed for applications. By providing a structure for setting up views and binding them to data, combined with a powerful routing system allows the developer to easily create Single Page Applications that are well-structured, efficient and easy to maintain. AngularJS also focusses on testability by using dependency injection.

This course targets professional web developers who are looking for a kick-start into the world of AngularJS. This course is NOT about Angular2! This course is about AngularJS 1.X. Participants of this course need to have a good understanding of JavaScript, HTML and CSS.

© 2018 U2U All rights reserved.