¶ Nebula Architecture
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.
![nebula-tech-stack[1].png](/nebula-tech-stack%5B1%5D.png)
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.
¶ Folder Organization
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
/frameworkscontains all of the Nebula external dependencies, ie: code which was not written by The Mimix Company./mimixcontains all of the code written by The Mimix Company.index.htmlis 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.jsonprovides deployment information for Node.js.README.mdan empty README file for you to use in your own deployments.
/mimix
.
├── /controllers
├── /css
├── /directives
├── /images
├── /json
├── /msl
├── /services
└── /views
/controllerscontains source files for each controller as well as the directive declarations, filters, routing, and startup code./csscontains Mimix overrides to the framework CSS./directivescontains HTML definitions for each directive./imagescontains all image files./jsoncontains all JSON files, including navigation/settings and MSL test lists in JSON form, used with the Testbed./mslcontains MSL text files, used with the Testbed./servicescontains definitions for each service used in the application./viewscontains HTML views which render as web pages.
¶ Index.html
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.htmlin any distributions you provide. Thank you.
¶ AngularJS View Container
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.
¶ AngularJS
Nebula, in its current implementation, requires AngularJS and an add-on component for routing.
¶ Mimix App
This section loads the application startup code, routing, directive declarations, and filters.
¶ Mimix Controllers
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.
¶ Mimix Services
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).
¶ Mimix Filters
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).
¶ Startup
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.
¶ Routing
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
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.
¶ Directive Declarations
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.