OC ICT - Opleidingen Internet - AngularJS voor Single Page Applications

HTML / JavaScript Opleidingen

AngularJS voor Single Page Applications

Bouw Single Page Applications met AngularJS

Code	Duur	Trainingsvorm
OCNG01	3 dagen	Individueel.
Lesmethoden: Individueel en Virtueel.
Prijs:€ 1.485,00 BTWvrij.

Overview

AngularJS is een framework voor het bouwen van complexe (client-sided) webapplicaties. AngularJS is een Javascript library waarmee u op een eenvoudige, intuïtieve en declaratieve wijze webapplicaties kunt bouwen. AngularJS biedt oplossingen voor alle niveaus van applicatieontwikkeling. Van het structureren en binden van data, tot Ajax-communicatie met webservers, het verwerken van geretourneerde gegevens in een client-sided datamodel en het maken van herbruikbare componenten.

Doelstelling

Deze cursus geeft een overzicht van de technische architectuur van Single Page Webapplicaties en een introductie in AngularJS. Na deze training kunt u zelfstandig met behulp van AngularJS een HTML5 applicatie bouwen.

Doelgroep

Web ontwikkelaars.

Inhoud (klik op de inhoud voor meer/minder details)

AngularJS
- AngularJS architectuur
  - Concepten
- Historie
  - Libraries en frameworks
  - Omschrijving van AngularJS
  - AngularJS op internet
  - AngularJS versies
  - AngularJS in de pagina
  - Client-sided HTML templates
  - Data binding
  - Dependency injection
  - Directives
- De ontwikkelomgeving inrichten
  - Editor en browser
  - Webserver
  - Andere tools
  - Debugging
  - Oracle JDeveloper, Domains en WebLogic Server

Beginnen met AngularJS
- Stel Angular page-sjabloon in
  - Directive ng-app
  - Directive notatie
- Model elementen
  - ng-model
  - ng-true-value en ng-false-value
- Itereren over collecties met ng-repeat
- Gegevens filteren, opmaken en sorteren
  - uppercase, lowercase en orderBy

Modules en controllers
- Module
  - Module als setter en als getter
  - Dependencies
- Controller
  - Directive ng-controller
  - $scope
  - Controller definiëren
  - Code refactoring
  - Controller functies en directive ng-click
  - Ng-click binnen ng-repeat
- Module en controller in afzonderlijke files
- Andere controller syntaxis
  - Minification safe syntaxis
  - Named functions
  - Injectie met $inject
- ControllerAs (alias) syntaxis
  - Geen $scope

Routing in Angular-apps
- Routing
  - Single page Application of SPA
  - Routing op http-server
  - Routing installeren
- Module ng-route
  - download en install
  - De routing-directive ng-view
- $routeProvider
  - Parameters voor .when()
  - Controllers maken
  - Views maken
  - Inline HTML in template
- Master/detail pagina's
  - id doorgeven met $routeParams
  - Master/detailview met persoonsgegevens

Datacomponenten
- Factories en Services
  - Singleton
  - Dataflow in de applicatie
  - Factory of service
- Factory
  - De controller aanpassen
  - Detailgegevens ophalen via de factory
  - Gegevens toevoegen via de factory
- Service
  - Methodes rechtstreeks op de functie schrijven
  - De service injecteren
- Waarden aangeven: Constant en Value

Live data ophalen met $http
- Werking $http
  - Algemene werking van $http
  - JSON file van server
  - Fout afhandeling
- Live API's op internet gebruiken
  - Dummy persoonsgegevens
- Ajax-chaining met .then()
  - Opeenvolgende Ajax-calls
  - The Promise API
  - Flattening Promise Chains
  - Filmgegevens op OMDb API
  - relatedMovies ophalen
  - Error handling in .then()
- Promises
  - The Deferred Object
  - The Promise Object
  - Rejecting a Promise
  - Using the $q Constructor
  - The finally() Method
  - Promise Chaining
  - Promises met $q
  - Meer API's
- Interceptors in AngularJS

Meer standaarddirectives
- Directives voor DOM-manipulatie
  - ng-href en ng-src, ng-show en ng-hide, ng-if
  - ng-class voor CSS-class beheer
- Directives voor event handling
  - ng-click, ng-mouse, ng-keypress, ng-paste
- Directives voor formulieren
  - ng-submit
  - Selectlist en ng-change
  - ng-focus en ng-blur, ng-checked
- Overige directives
  - ng-cloak
  - ng-copy, ng-cut en ng-paste
  - ng-disabled

Custom directives
- Eenvoudige custom directives
  - Een klokje maken in de pagina
  - Naamgeving van directives in HTML en JavaScript
  - Klok functionaliteit geven
- Directive Definition Object (DDO)
  - Properties in DDO
- Isolated scope creëren in een directive
  - Bad practice
  - Scope isoleren via DDO
  - Gegevens als attributen doorgeven
  - Controller van de directive aanpassen
- Onafhankelijke module maken van de directive
- DOM-manipulatie directives
  - Het DDO uitbreiden
  - Werken met jqLite
  - Waarden van attributen benaderen
- Case: een jQuery-plug-in in een AngularJS-directive gebruiken
  - Popover van Twitter Bootstrap en jQuery
  - HTML-code schrijven
  - Directive-module schrijven
  - De functie link voor de directive schrijven
  - De directive injecteren
  - HTML-code schrijven om de directive te gebruiken
- Kant-en-klare custom directives vinden en gebruiken
- Verder met AngularJS