Smart kurs från Ribomation om

Kurs i Modern Angular

Kurs i Modern Angular (v4), med fokus på att du snabbt kommer igång med att bygga moderna SPA webbapplikationer

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ån och bygga moderna webbapplikationer med hälp av Angular.

Denna kurs behandlar Angular version 4, som utgör den moderna versionen av Angular, baserad på TypeScript. Vi har också en kurs, sedan tidigare, som behandlar AngularJS dvs version 1.

Detta får du lära dig på kursen
  • Skapa och utöka ett Angular project med ng-cli
  • Kunna skapa och tillämpa vanliga Angular artifakter,
  • Använda Components, Pipes, Directives och Providers
  • Kunna skapa SPA webbapplikationer med flera sidor via Angular routing
  • Skapa egna services och använda dependency injection
Innehåll Expand All

Background and Overview

  • Historik
  • Why AngularJS were created
  • Why Angular 2 was redesigned from the ground-up
  • What happended to Angular version 3
  • What is a single-page application (SPA)
  • Angular architecure
  • Angular artefacts

PART-1 Angular Quick-Tour

I kursens första del bygger vi en enkel Angular app enligt principen "Följa John", så att du får en bra utgångspunkt för resten av kursen.

Setting up a DEV Environment

  • NodeJS and NPM
  • TypeScript
  • Angular CLI (ng)
  • MS Visual Code vs. JetBrains WebStorm
  • http-server and json-server
  • curl and httpie http clients

Starting a Project

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

A Simple Calculator

  • Creating a new project
  • Understanding the root module and app component
  • Two-way binding of form fields
  • Module imports

Component Interaction

  • 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

Using a REST Back-End

  • Brief about REST web serviecs
  • Writing an ExpressJS REST-WS server in TypeScript
  • Using the Angular Http service
  • Creating a service class for REST-WS invocations
  • Running the system with a live back-end

Simple Routing

  • Adding more computation functions to the back-end
  • Adding another results component
  • Creating a services providing a RxJS stream of data
  • Setting up routing between the simple and the advanced component
  • Hiding certain widgets based on conditions

PART-2 Foundation

I kursens andra del går vi igenom de tekniker och ramverk som Angular bygger på.

TypeScript

  • What is TypeScript
  • Relation to JS, ES5, ES6
  • Understanding the type support in TS
  • Modules
  • Scalar type types
  • Composite data types
  • ES6 Lambda expressions
  • Functions
  • Function Overloading and Default/Optional/Rest parameters
  • Classes and member variables and functions
  • Visibility and accessor methods
  • Static members
  • Annotations (aka decorators)
  • Sub-classes and abstract classes and methods
  • Interfaces
  • Generic classes

RxJS

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

JS Modules and Loaders

  • What is a JS module
  • Understanding the IFFE concept
  • SystemJS and WebPack

PART-3 Angular Explained

I denna tredje del av kursen går vi på djupet av Angular och beskriver de olika beståndsdelarna av ramverket, så att du förstår hur de passar ihop med varandra och tänkt att användas.

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 betweenb components

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

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

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

Deployment

  • Configuring ng-cli
  • Setting defaults for artefact generation
  • ng-cli documentation on github
  • 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-4 The Books & Video Store

I denna avslutande del av kursen bygger vi en fullt fungerande online bok- och videobutik, baserad på alla kunskaper förvärvade under kursen.

  • Domain Model
  • REST-WS Back-End Server
  • Store Components
  • Cart and Checkout Components
  • Order Component
SnabbFakta
Namn
Angular Web App Development
Längd
3 dagar
Nivå
Intermediate
Målgrupp
Webb-applikations-utvecklare
Förkunskaper
God erfarenhet av att programmera i JavaScript och HTML/CSS
Teknisk miljö
  • NodeJS, NPM
  • En editor/IDE såsom WebStorm
  • En modern webbläsare såsom Google Chrome
Schemalagd Kurs

Pris

19 000 kr + moms

Vi ger 20% rabatt för tillkommande deltagare från samma företag vid samma kurstillfälle. Läs mer om vår samma-företags-rabatt.

Aktuella KursDatum
StartdatumPlats
2018-01-10Stockholm City
2018-02-07 Stockholm City
2018-03-07Stockholm City
2018-03-26Stockholm City
Relaterade Kurser
KursLängdNivå
JavaScript3 dagar Beginner
TypeScript2 dagarIntermediate
NodeJS2 dagarAdvanced
GulpJS for Web Apps2 dagarIntermediate
AngularJS (v1) for Web Apps2 dagarBeginner
Företagsintern Kurs

Om du beställer en företagsintern kurs kommer vi till er och håller kursen i era lokaler. Priset bestäms av vår prismodell och baseras på antalet kursdagar, antalet deltagare, samt i förekommande fall resa och logi.

Prisexempel för NN deltagare

PPP + moms

Antal
Område

Läs mer om vår prismodell och beställningsvillkor.