Aktuelle Trendstudie Digitale Innovation 2020
KOSTENLOS DOWNLOADEN

Tutorial: AngularJS mit RequireJS und JQuery UI

Dieses Tutorial beschäftigt sich ausschließlich mit der Nutzung von AngularJS in Kombination mit RequireJS und JQuery UI. Wer noch keinen Einblick in AngularJS oder RequireJS hat, sollte sich daher zunächst unser Tutorial über AngularJS + RequireJS anschauen.

Warum ein Tutorial?

Dieses kleine Tutorial ist entstanden, da ich selbst in das eine oder andere Fettnäpfchen bei der Kombination dieser Technologien getreten bin.

Voraussetzungen

  • AngularJS – hat ein eigenes aber nicht ausreichendes JQuery
  • JQuery – wird von JQuery UI benöigt
  • JQuery UI
  • RequireJS
  • App mit AngularJS und RequireJS

Umsetzung

Zuerst müssen wir JQuery und JQuery UI in unsere Abhängigkeiten von RequireJS aufnehmen.

require.config({
    baseUrl: 'app',
    paths: {
        'jquery': '../lib/jquery-2.1.0.min',
        'angular': '../lib/angularjs.min',
        'jquery_ui': '../lib/jquery-ui-1.10.4.min'
    },
    shim: {
        'angular' : { 'exports' : 'angular' },
        'jquery': {'exports' : 'jQuery'},
        'jquery_ui': { deps: ['jquery'] }
    },
    priority: [
        'jquery',
        'jquery_ui',
        'angular'
    ],
    deps: ['jquery'],
    callback: function ($) {
        'use strict';

        require([
            'angular',
            'routes'
        ], function (angular) {
            // init app
            angular.bootstrap(document, ['app']);
        });
    }
});

Es reicht oft nicht aus einfach nur die Abhängigkeiten unter shim aufzuführen, denn die Anfragen und das Laden von Dateien können trotzdem in einer anderen Reihenfolge abgeschlossen werden. Dafür wird die korrekte Ladereihenfolge unter priority festgelegt. Wichtig ist hierbei, dass JQuery vor AngularJS steht, da sonst automatisch das AngularJS JQuery benutzt wird. Dieses ist jedoch nicht ausreichend für JQuery UI, was zu einigen Fehlern in der Javascript-Entwicklerkonsole des Browsers führen kann.

Des Weiteren können für den callback der RequireJS Konfiguration auch Abhängigkeiten eingefügt werden. Dies geschieht über deps. So wird sichergestellt, dass das Original JQuery zuerst zur Verfügung steht.

Anwendungsfälle

Die Kombination von AngularJS und JQuery UI wird dann interessant, wenn man z.B. Drag and Drop, sortierbare Listen oder andere JQuery UI Widgets benutzen möchte. Diese Verbindung der Technologie kann ein sehr gutes Grundgerüst für eine moderne und benutzerfreundliche App sein.

Gemeinsam etwas starten?
Einfach Kontakt aufnehmen:

FLYACTS Anne

NEUKUNDEN & ANFRAGEN

ANNE SCHULZE

+49 3641 55 987 92
hallo@flyacts.com

FLYACTS Christin

PR & MARKETING

CHRISTIN DOMIN

+49 3641 55 987 93
presse@flyacts.com

Share This