Opleiding: AngularJS voor Single Page Applications

Bouw intuïtieve, schaalbare webapps met AngularJS: van databinding tot Ajax en herbruikbare componenten.

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.

• 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