Angular Web App Development

Course about development of modern web apps using Angular

Angular has in relatively short time become the defacto industrial standard for designing modern Single-Page web Applications (SPA). SPA means the browser loads just one HTML file (/index.html), which in turn slurps HTML snippets, JS and CSS files. All logical web pages are rendered by JS functions, snippets and styles.

This course teaches you everything you need to know to quickly get going by designing modern web apps using Angular.

This course covers Angular version 6, which is the modern version of Angular based on TypeScript.

This is what you will learn
  • Generate Angular projects and artifacts using ng-cli
  • Design Angular components, with models and views
  • Using pipes to format data
  • Using ng directives to control DOM in HTML templates
  • Designing services to encapsulate business logic
  • Understand how to make back-end calls to REST-WS servers
  • Writing both unit and e2e tests
Course Contents

Background and Overview

  • Misko Hevery
  • Why AngularJS were created
  • Why Angular 2 was redesigned from the ground-up
  • What happended to Angular version 3
  • Angular version 6
  • What is a single-page application (SPA)
  • Angular alternatives

PART-1 - Angular Quick-Tour

In this section, we builds an app step-by-step, to given a better conceptual foundation for the remainder of the course.

    Setting up the DEV Environment

    • NodeJS and NPM
    • TypeScript
    • Angular CLI (ng)
    • JetBrains WebStorm vs. MS Visual Code

    Starting a Project

    • Understanding the ng client
    • Getting help from ng
    • Creating a new project
    • Generating components and other artefacts
    • Inline templates and styles
    • Text formattinbg using pipes
    • Suppressing unit test files
    • Creating a "Hello Angular" app

    A Simple Calculator

    • Understanding the root module and app component
    • Import dependent module
    • Two-way binding of form fields
    • Component styling
    • Handling events

    Component Interaction

    • Using Twitter Bootstrap
    • Undestanding components
    • Creating the operands component
    • Creating the results component
    • Formatting data
    • Passing data between components
    • Creating a service for the computation work
    • Understanding dependency injection

    PART-2 - Foundation

    In this section, we discussion the techniques, tools and libraries used by the Angular framework.

    JS Modules and Loaders

    • What is a JS module
    • Understanding the IFFE concept
    • The module patter
    • ES6 modules

    Asynchronous Computation

    • Execution models
    • The JavaScript execution model
    • JS-VM call-stack vs. call-back-queue
    • Using call-backs
    • Understanding the call-back boomerang effect
    • Understanding promises
    • Using promises
    • Promise chains
    • Understanding async function in modern JS
    • Using async and await

    RxJS

    • What is reactive programming?
    • Understanding event streams
    • The Observable pattern
    • Observables vs. Observers
    • Common stream operations such as filter, map, reduce

    Unit Testing in JavaScript

    • The unit testing ecosystem of JS
    • Installation of Jasmine
    • Jasmine tests
    • Matchers
    • Life-cycle functions
    • Test selection
    • Testing async code

    TypeScript

    • What is TypeScript
    • Relation to JS, ES5, ES6
    • Understanding the type support in TS
    • Installation of TypeScript
    • Modules
    • Scalar type types
    • Composite data types
    • ES6 Lambda expressions
    • Functions
    • Classes and member variables and functions
    • Visibility and accessor methods
    • Static members
    • Interfaces
    • Generic classes

    PART-3 - Angular Explained

    In this section, we discuss all core artifacts of Angular and how to use them.

      Template Syntax

      • HTML attributes vs DOM properties
      • Understanding the DOM
      • Interpolation with handlebar expressions
      • Using the null-catch operator
      • Template reference variables
      • Property input [prp]=expr
      • Event output (ev)=expr
      • Two-way binding [(var)]=expr
      • Implementation of the number-stepper component

      Angular Pipes

      • What is an Angular pipe
      • Use the json pipe for debugging
      • Various text transformation
      • Formatting numbers
      • Formatting dates
      • Sub-lists
      • Subscribing to RxJS feeds using the async pipe
      • User-defined pipes
      • Implementing the train-case pipe

      Angular Directives

      • What is an Angular directive
      • What do the '*' prefix mean
      • NG templates
      • Conditional inclusion with *ngIf
      • Using template-snippets with *ngIf
      • Conditional inclusion with ngSwitch
      • Repeating elements with *ngFor
      • Support variables to *ngFor
      • Setting CSS classing with ngClass
      • Setting CSS styles with ngStyle
      • User-defined directives
      • Implementing the highlight directive

      Modules & Components

      • TypeScript modules vs Angular modules
      • The root module and its purpose
      • ngModule annotation attributes
      • Module dependencies
      • Entry components and what they are used for
      • Bootstrap components
      • Brief about component architecture
      • Data flow between components

      Services

      • What is a service
      • Understanding dependency injection in Angular
      • Service definition
      • Service usage, aka injection
      • What is a provider
      • Swapping service implementations
      • Using constant value services
      • Injecting a constant value service

      Routing and Navigation

      • What is routing
      • Preparing the app for routing
      • Defining routes
      • Define the routing target
      • How to switch to another page
      • Redirecting routes
      • Routing demo
      • Setting a CSS class for an active route
      • Route parameters
      • Associating data to a route
      • Router events
      • Child routes
      • Route guards
      • Guard actions
      • Sample entry guard
      • Mock authentication

      Working with Forms

      • Different ways of using forms in Angular
      • FormControl
      • Validators
      • User-defined validator
      • FormGroup
      • Using the FormBuilder service
      • Model-driven forms
      • Submitting a model-driven form
      • Implementing a reactive form field
      • Reactive incremental search demo
      • Template-driven forms
      • Template-driven field mapping
      • Submitting a template-driven form

      PART-4 - Angular Development

      In this section, we discuss topics related to developing a webb-app ready to be deployed.

        Back-end Calls

        • Using the Angular HttpClient service
        • Basci operations
        • Invoking a public REST-WS service

        Unit Testing in Angular

        • Generating tests via ng-cli
        • Running tests
        • Running tests within WebStorm
        • Angular TestBed and how to initialize
        • Bootstrapping TestBed in async mode
        • How to lookup view elements
        • Trigger a change detection
        • Testing @Input elements
        • Testing @Output elements
        • Mock dependencies
        • Testing async operations
        • Using FakeAsync() and tick()
        • Performing fake HTTP operations

        Function Testing in Angular

        • What is e2e testing
        • Understaing Protractor
        • Using page objects
        • Element locators
        • Trigger element events/actions

        Deployment

        • Overview of the ng-cli documentation
        • Upgrading ng-cli
        • Upgrading Angular
        • Adding BASH completion
        • Configuring ng-cli
        • Setting defaults for artefact generation
        • Using a CSS pre-processor, such as SCSS
        • Building an app
        • Chosing a build target
        • Using different environment config files
        • Building for production deployment
        • Configuring 3rd party CSS/JS libraries
        • Server aspects, such as redirection and CORS

        PART-5 - Project

        In this section, you will have the opportunity to work with a complete Angular web-app and add features to it.

          The Books & Video Store

          • Domain Model
          • REST-WS Back-End Server
          • Store Components
          • Cart and Checkout Components
          • Order Component
          Facts
          Name Angular Web App Development
          Duration3 Days
          LevelBeginner
          Audience Web apps developers
          PrerequisitesWorking knowledge of programming in JavaScript and HTML/CSS
          Tools
          • NodeJS
          • JetBrain WebStorm IDE
          • Google Chrome
          Price19 000 kr + moms 19000
          Course Dates
          DatePlace
          Loading course dates...
          Same-Company Discout

          We offer a 20% discount for additional participants from the same company and at the same course date. Read more here.

          On-Site Course

          If you order an On-Site course, we will come to you and hold the course in your office. The price is determined by our price model and is based on the number of course days, number of participants and any travel and lodging.

          Read more about out price modell and term of sales here.

          Related Courses
          CourseDaysLevel
          JavaScript3 Beginner Show
          TypeScript2IntermediateShow
          NodeJS2IntermediateShow
          GulpJS2 BeginnerShow