Information Technology Reference
In-Depth Information
activate
Controller
Template
Directives
set up
compiled
Parent View
Model
Scope
View
Child
Child
View
Visual Object
Scope
View
Parent
Fig. 3.
The composition structure in AngularJS
AngularJS has a template system for reusing the same types of views. With
directives, developers can declaratively specify data-bindings between views and
scopes and set up controller association to views. Controllers are totally different
from the original definition of the MVC. They work as glue to set up a linkage
between models and scopes. Scopes manage the state of views, expose data form
models to the corresponding view, and operate models according to the message
form the view. Similar to the IntelligentPad, views and scopes have parent-child
relationships corresponding to the containment structure of the views. When
a child scope is created, it inherits properties from the parent scope. Through
this mechanism, a child scope and its parent can access each other for some
communication. Developers can define custom directives as element names, CSS
classes, or element attributes to reuse user-defined functionalities or behaviors
in a declarative way.
4 Implementation
We developed a prototypical meme media platform based on the AngularJS. We
needed to implement the following functionalities:
1. views working as a wrapper of different contents,
2. the view composition mechanism by defining parent-child relationships,
3. the functional linkage through slot connection, and
4. the uniform user interface and operations of views.
We implemented each functionality by following the AngularJS's fashion. It
makes it possible to integrate a lot of existing third-party components or di-
rectives developed with AngularJS seamlessly. The wrapper functionality was
implemented by defining a special directive to specify the media object wrap-
per (1). Attaching this directive to an HTML element, the element works as
a wrapper of its contents. For (2), we reused the Angular's parent-child rela-
tionships of scopes. The functional linkage between a parent and a child was
implemented in the controllers and scopes (3). We defined a basic controller for
