Nebula is an HTML/JS application written in AngularJS using the MVC (model-view-controller) pattern.
The model is composed of JSON objects, arrays, and strings which represent the current state of the application and its communications thus far with a stream.
The view is comprised of AngularJS directives which are bundled together in views and presented to the user as web pages. Users change views through routing.
Each directive's controller is an AngularJS controller which utilizes shared services, global variables, and filters.
This diagram represents the tech stack for Nebula. AngularJS components are shown in purple. Red and orange “middleware” components represent our business logic in SBCL. Nebula provides the working stack and the wiring to use either local or remote HTTP/HTML and local and remote WebSockets as data transports.
Nebula's folder organization is designed to unify and simplify the management of the various parts that make up the application.
.
├── /assets
├── async-load.js
├── /frameworks
├── index.html
├── /mimix
├── package.json
└── README.md
/frameworks
contains all of the Nebula external dependencies, ie: code which was not written by The Mimix Company./mimix
contains all of the code written by The Mimix Company.index.html
is the application home page served up by the Nebula Electron app. Nebula operates as a single page application (SPA) with internal routing. When debugging with an external HTML server, it must be configured for SPA.package.json
provides deployment information for Node.js.README.md
an empty README file for you to use in your own deployments./mimix
.
├── /controllers
├── /css
├── /directives
├── /images
├── /json
├── /msl
├── /services
└── /views
/controllers
contains source files for each controller as well as the directive declarations, filters, routing, and startup code./css
contains Mimix overrides to the framework CSS./directives
contains HTML definitions for each directive./images
contains all image files./json
contains all JSON files, including navigation/settings and MSL test lists in JSON form, used with the Testbed./msl
contains MSL text files, used with the Testbed./services
contains definitions for each service used in the application./views
contains HTML views which render as web pages.The index page is responsible for loading the Nebula Local World as well as AngularJS and the rest of the application's dependencies.
¶ License
In order to encourage the spread of free, open source software, please retain the license statement at the beginning of
index.html
in any distributions you provide. Thank you.
The <div ng-view></div>
is where the Nebula application is displayed on the page. You can modify index.html
as necessary to relocate, deprecate, or replace this UI as you develop your own applications.
Nebula, in its current implementation, requires AngularJS and an add-on component for routing.
This section loads the application startup code, routing, directive declarations, and filters.
This section loads the controllers that provide the backing code for each directive. There is one controller per file. Controllers are named mxDirectiveName
where the matching directive is employed in the view through <mx-directive-name>
or @directive-name
. Controllers are instantiated when loaded by a directive in a view. Controllers can use the singleton pattern (every instance shares one controller) or the factory pattern (every instance has its own copy of the controller) based on the matching directive's declaration.
This section loads the services which are available to share among controllers. Services are only instantiated when used and always employ the singleton pattern (every instance shares one service).
This section loads the filters which are available to use inside directives. Filters are instantiated when used and always employ the factory pattern (every instance has its own copy of the filter).
mimix.start.js
sets up the global variables which are used throughout the application. It also provides an example of asynchronous loading of a JSON file, used for loading the navigation. The startup file also defines small utility functions which are called inside controllers but don't constitute services.
mimix.routing.js
defines how URLs are interpreted as AngularJS views. Though not used in this version, routing can also process URL parameters and pass them to components. See http://docs.angularjs.org/api/ngRoute/provider/$routeProvider.
Views are individual HTML files loaded when a particular route is invoked. They serve to group together directives for display as a web page. Views are declared in routing.
mimix.directives.js
returns a declaration function for each directive, matching it to its backing controller code. The syntax of directive declarations is described at https://docs.angularjs.org/api/ng/provider/$compileProvider#directive.
Notably, the scope:false
parameter makes factory (independent) instances, scope:{}
makes singleton (shared) instances, and scope:true
makes a new, factory instance that also inherits the parent controller. More information about creating custom components can be found in the AngularJS Intro.