Opencast Admin UI - Introduction to developing using AngularJS

Admin UI
Introduction to developing using AngularJS
Xavier Butty
Software Engineer
for the open minded

– for the open minded
This is not an extensive AngularJS course…
.. but a short introduction to this framework using
portions of the new Admin UI
Aimed to help developer to  
start extending the Admin UI

First name, Last name
Position
for the open mindedfor the open minded
01
Base concepts
behind AngularJS

Model-View-Whatever works for you
Template
<!doctype html>
<html ng-app="myApp">
<head>
<title>My little AngularJS app</
title>
</head>
<body>
Hello {{ user }}!
<script src="angular.js"></script>
</body>
</html>
Model (Scope)
{
'user': 'Georges Bregy'
}
Controller
Directive
View (DOM)
Resource
Compilation
Service

Data binding
Two-way binding
Use Markup {{ myVar }} to represent data in the
template
Rendered into a live view
Updating the view update the model…
…and vice-versa

Data binding
<!doctype html>
<html ng-app="myApp">
<head>
<title>My little AngularJS app</title>
</head>
<body>
<h1>Welcome {{ user }}!</h1>
<ul>
<li ng-repeat="link in links">
<a ng-href="{{link.href}}">{{link.name}}</a>
</li>
<ul>
<select
ng-model="currentLang"
name="language"
ng-options="l.name for l in languages">
<option value="">-- choose language --</option>
</select>
</span>
<script src="angular.js"></script>
</body>
</html>
{
'user': 'Georges Bregy'
'links': [
{
'href': 'http://www.google.ch',
'name': 'Search'
},
{
'href': 'http://www.opencastcommunity.com',
'name': 'Opencast community'
}
],
'languages': [
{
'name': 'English'
},
{
'name': 'German'
}
],
'currentLang': {
'name': 'English'
};
}

Scope
Model attached to a portion of a view
One root scope…
…with unlimited child scopes that  
inherit from the parent scope

<!doctype html>
<html lang="en" ng-app="adminNg">
<head>…</head>
<body ng-cloak ng-controller="ApplicationCtrl" ng-click="bodyClicked()">
<header ng-controller="NavCtrl" class="primary-header">
<div class=“header-branding”>…</div>
<nav id="nav-dd-container" class="nav-dd-container">
<div class="nav-dd" id="lang-dd" old-admin-ng-dropdown="">
<div class="lang" ng-class="currentLanguageCode"></div>
<ul class="dropdown-ul">
<li>
<a href="#"
ng-repeat="language in availableLanguages | orderBy:'displayLanguage'"
ng-click="changeLanguage(language.code)">
<i class="lang {{ toLanguageClass(language) }}"></
i>{{ language.displayLanguage }}
</a>
</li>
</ul>
</div>
<div ng-if="documentationUrl" class="nav-dd help" id="help-dd" ng-click="toDoc()"></div>
<div class="nav-dd" id="user-dd" old-admin-ng-dropdown=“”>…</div>
</nav>
</header>
<footer id="main-footer" ng-controller="NavCtrl">
<div class="default-footer">
<div ng-if="version.version" class="meta">
Opencast Video Capture Software (v.{{ version.version }} - build:
{{ version.buildNumber }})
</div>
<div ng-if="feedbackUrl" class="feedback-btn" id=“feedback-btn”>…</div>
</div>
</footer>
</body>
</html>
Root scope
scope ApplicationCtrl
scope NavCtrl
x child scopes (ng-repeat)
scope NavCtrl

Dependancy injection
Injection of deﬁned component
Most common way: Inline Array Annotation
Alternative: Manual injection with $inject
// A controller for global page navigation
angular.module('adminNg.controllers')
.controller('NavCtrl', ['$scope', '$rootScope', '$location', '$window', '$resource', '$routeParams',
'Language',
function ($scope, $rootScope, $location, $window, $resource, $routeParams, Language) {
$scope.category = $routeParams.category || $rootScope.category;
$scope.availableLanguages = [];

Position
02
Main components

Modules
Use to organise the components of an app in package
Simplify unit tests and make them faster. Only the required modules
can be loaded.
For the admin UI, we have modules for:
Main app (adminNG), Controllers, Services, Filters, Directives
Other module are external components
.controller('NavCtrl', ['$scope', '$rootScope', '$location', '$window', '$resource',
'$routeParams', 'Language',
function ($scope, $rootScope, $location, $window, $resource, $routeParams, Language) {
…
shared/controllers/
navigationController.js

Controllers
Set the initial state of a scope
Linked to a deﬁned portion of a view
Allow to augment the scope
Override properties/methods inherit deﬁned in parent controllers 
In the new Admin UI:
/shared/controllers/**/*
/modules/*/controllers

<header ng-controller="NavCtrl" class="primary-header">
<div class="header-branding">
<div class="text-logo">Opencast</div>
<div class="logo-tag">Beta</div>
</div>
<nav id="nav-dd-container" class="nav-dd-container">
<div class="nav-dd" id="lang-dd" old-admin-ng-dropdown="">
<div class="lang" ng-class="currentLanguageCode"></div>
<ul class="dropdown-ul">
<li><a href="#" ng-repeat="language in availableLanguages
| orderBy:'displayLanguage'" ng-click="changeLanguage(language.code)">
<i class="lang {{ toLanguageClass(language) }}"></i>
.controller('NavCtrl', ['$scope', '$rootScope', '$location', '$window', '$resource',
'$routeParams', 'Language',
function ($scope, $rootScope, $location, $window, $resource, $routeParams,
Language) {
$scope.availableLanguages = [];
$scope.changeLanguage = function (key) {
Language.changeLanguage(key);
};
$scope.toLanguageClass = function (language) {
return Language.$convertLanguageToCode(language.code);
};
/shared/controllers/
navigationController.jsindex.html Deﬁnition
Usage

Services
Create custom object shareable through the App
Lazily instantiated  
Only instantiated when a component requires it
Singleton 
Each component requiring a service get a reference to the
same instance instantiated by the service factory.
In the new Admin UI : /shared/services/**/*

angular.module('adminNg.services')
.factory('AuthService', ['IdentityResource', function (IdentityResource) {
var AuthService = function () {
var me = this,
isAdmin = false,
isUserLoaded = false,
callbacks = [],
identity,
isAuthorizedAs = function (role) {
if (angular.isUndefined(me.user.roles)) {
return false;
}
return isAdmin ||
(angular.isArray(me.user.roles) && me.user.roles.indexOf(role) > -1) ||
me.user.roles === role;
};
this.user = {};
this.loadUser = function () {
identity = IdentityResource.get();
identity.$promise.then(function (user) {
var adminRole = user.org.adminRole;
me.user = user;
isAdmin = angular.isDefined(adminRole) && user.roles.indexOf(adminRole) > -1;
isUserLoaded = true;
angular.forEach(callbacks, function (item) {
isAuthorizedAs(item.role) ? item.success() : item.error();
});
});
};
this.getUser = function () {
return identity;
};
this.loadUser();
};
return new AuthService();
}]);
/shared/services/authService.js

Resources
Synchronisation with the RESTfull data source 
Natively use JSON for the data transfer 
Using the $http service 
In the new Admin UI : /shared/resources/**/*

angular.module('adminNg.resources')
.factory('AclResource', ['$resource', function ($resource) {
return $resource('/admin-ng/acl/:id', { id: '@id' }, {
get: {
method: 'GET',
transformResponse: function (data) {
return JSON.parse(data);
}
},
save: {
method: 'PUT',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
transformRequest: function (data) {
if (angular.isUndefined(data)) {
return data;
}
return $.param({
name : data.name,
acl : JSON.stringify({acl: data.acl})
});
}
}
});
}]);
/shared/resources/aclResource.js
AclResource.save({id: $scope.resourceId}, {
acl: {
ace: ace
},
name: $scope.metadata.name
}, function () {
Notifications.add('success', 'ACL_UPDATED', 'acl-form');
}, function () {
Notifications.add('error', 'ACL_NOT_SAVED', 'acl-form');
});
Resource deﬁnition
Usage

Directives
Allow to create custom view component
Can be cascaded
Each directive instance has its own scope
Take care to not overload the stack!
Non-native element wrapped in directive have to be
managed carefully!

angular.module('adminNg.directives')
.directive('withRole', ['AuthService', function (AuthService) {
return {
priority: 1000,
link: function ($scope, element, attr) {
element.addClass('hide');
AuthService.userIsAuthorizedAs(attr.withRole, function
() {
element.removeClass('hide');
}, function () {
element.remove();
});
}
};
}]);
<div class="btn-group">
<button data-open-modal="user-modal" data-action="add" class="add" with-
role="ROLE_UI_USERS_CREATE">
<i class="fa fa-plus"></i>
<span translate="USERS.ACTIONS.ADD_USER"></span>
</button>
</div>
/shared/directives/withRoleDirective.js
Usage
Directive deﬁnition

Filters
Function to be used within the expression
{{ value | filter:argument1 }}
 
Use it for input formatting  
- Date presentation 
- Text translation 
- Array presentation
Can also be used within the controller

angular.module('adminNg.filters')
.filter('trusted', ['$sce', function ($sce) {
return function(url) {
return $sce.trustAsResourceUrl(url);
};
}]);
<video id="player" ng-if="controls === 'false'">
<source ng-repeat="preview in video.previews"
ng-src="{{ preview.uri | trusted }}"
type="video/mp4" />
Your browser does not support HTML5 video.
</video>
/shared/ 
ﬁlters/trustedResourceUrlFilter
Filter deﬁnition
Usage

Position
Jasmine
for unit testing
03

How does a Jasmine specs look
like?
describe('Navigation controller', function () {
var $scope, $httpBackend, Language;
beforeEach(module('adminNg'));
beforeEach(module(function ($provide) {
var service = {
configureFromServer: function () {},
formatDate: function (val, date) { return date; },
formatTime: function (val, date) { return date; },
changeLanguage: function () {},
getLanguageCode: function () { return 'ja_JP'; },
getLanguage: function () { return {}; },

Position
04
Let’s work on it!

The summary of "create event"
show empty element
Some items show in the summary of the new event
wizard are empty, and should therefore not be
displayed.

Delete series and events
Add (x) icon in the events and series tableview to
allow deletion of single Events/Series

Questions? 
thanks for your attention
Xavier Butty
Software Engineer
for the open minded

Opencast Admin UI - Introduction to developing using AngularJS

Recommended

More Related Content

What's hot (18)

Viewers also liked (19)

Similar to Opencast Admin UI - Introduction to developing using AngularJS (20)

Recently uploaded (20)

Opencast Admin UI - Introduction to developing using AngularJS