Grundkurs i Angular

Angular har på kort tid blivit industri-standard för att bygga moderna webbapplikationer baserade på principen om single-page application (SPA). Detta innebär att browsern laddar en enstaka HTML fil, som i sin tur laddar JavaScript kod och CSS style-sheets. Alla logiska webbsidor byggs upp av JS funktioner, HTML template snippets och renderas med CSS stylesheets. Denna kurs lär dig allt du behöver veta för att snabbt komma igång och bygga moderna webbapplikationer med hjälp av Angular.

Grundkurs i Angular
4 dagar
Beginner
Webbapps utvecklare
God erfarenhet av att programmera i JavaScript och HTML/CSS
  • Node.js && NPM && NPX
  • ng-cli
  • MS Visual Code || JetBrains IntelliJ IDEA
  • Chrome || Firefox || Edge
Denna kurs behandlar Angular, som utgör den moderna versionen av Angular, baserad på TypeScript. Således inte Angular.js, som är den ursprungliga version, baserad by klassisk JavaScript.
Här ser du vilka kursdatum som är tillgängliga. Klicka på en av datumknapparna för att anmäla dig till ett kurstillfälle. På kursen pratar läraren svenska, medan vårt kursmaterial alltid är författat på engelska.

Du sitter bekvämt framför datorn och deltar i kursen via internet. Vi använder programvaran Zoom för alla våra fjärrkurser.

I priset ingår kursmaterial som PDF.

Pris: 20 000 kr + MOMS/VAT (25%)

Du sitter bekvämt i ett av våra klassrum, vilka finns centralt placerade i Stockholms innerstad (Östermalmstorg).

I priset ingår tryckt kursmaterial (och som PDF), samt kaffe/te med smörgås på förmiddagen och kaffe/te med bulle på eftermiddagen.

Pris: 25 000 kr + MOMS/VAT (25%)

Om ni är tre eller fler personer från samma företags, kan ni beställa en företagsanpassad kurs. Då håller vi kursen på ett datum som passar er. Antingen på plats i era lokaler eller som en fjärrkurs. Vi kan även mixa fjärr- och klassrumskurs, om några av er önskar delta på distans medan resten föredrar att ses på plats.

Företagsanpassad Kurs

Här är ett sammandrag av vad du får lära dig på kursen.

  • Generation of project files and artifacts using ng-cli
  • Design of Angular components, with models and views
  • The use of pipes to format data in HTML fragments
  • The use of ng directives to manipulate DOM in an HTML snippet
  • Design service classes to encapsulate business logic
  • Be able to implement calls to REST-WS background services
  • Implement both device and function tests (e2e)

Background and Overview

  • Why Angular.js were created
  • Misko Hevery
  • Why Angular 2 was redesigned from the ground-up
  • What happened to Angular version 3
  • Angular version 6 and forward
  • What is a single-page application (SPA)
  • Angular tools and sub-systems

PART-1 - ANGULAR QUICK-TOUR

In this section, we build an app step-by-step, to give 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
  • Getting help from ng-cli

Creating an Angular Project

  • Understanding the ng client
  • Creating a new project
  • Project directory structure
  • Directory changes between Angular version 5 and 6
  • Bootstrap files
  • Generating components and other artefacts
  • Inline templates and styles
  • Text formatting using pipes
  • Suppressing unit test files
  • Angular Console, the ng-cli GUI
  • The disk size of node_modules/

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

A Simple web shop Angular app

  • Understanding the root module and app component
  • Import dependent module
  • Handling click events
  • Iterating over collections
  • Text formatting using pipes
  • Two-way binding of form fields
  • Component styling
  • Component Interaction
  • Creating a service for the computation work
  • Understanding dependency injection
  • Creating the operands component
  • Creating the results component
  • Passing data between components

PART-2 - ANGULAR BASICS

Discussion of the most essential parts of Angular.

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

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

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

PART-3 - ANGULAR INTERMEDIATE

Discussion of slightly more complex parts of Angular

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

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

Back-end Calls

  • Understanding the HTTP protocol
  • HTTP request operations (methods)
  • HTTP response codes
  • What is a web service
  • What is a REST web service
  • What is AJAX
  • Using the XMLHttpRequest object
  • Sample CRUD REST operations using XMLHttpRequest
  • Using the Angular HttpClient service
  • Basic operations with HttpClient
  • Invoking a public REST-WS service

PART-4 - ANGULAR DEVELOPMENT

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

Unit Testing in JavaScript

  • The unit testing ecosystem of JS
  • Installation of Jasmine
  • Jasmine tests
  • Matchers
  • Life-cycle functions
  • Test selection
  • Testing async code
  • 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
  • Understanding 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
  • Choosing 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