About ng_modular_admin

A port of Modular Admin to Angular Dart

ng_modular_admin is still alpha quality. Don't use it on your production project!

This project is a port of Modular Admin HTML to Angular Dart and is based on Boostrap 4. The upstream project is built like a standard Bootstrap template (HTML, monolithic CSS, and some JavaScript), but this port focuses on adapting the theme to the world of web components.

The goal for ng_modular_admin is to make it easy to build sophisticated single page applications (SPA's) with Angular Dart by providing a library of common components along with a standard layout.

Web Components

In the web component world, GUI widgets are built as custom elements. For example, this port of Modular Admin has elements like <ma-side-nav> and <ma-button>. Web components have style encapsulation, which means the styles for a component are scoped only to that component. This prevents components from different vendors from interfering with each other or with your own code.

In addition, web components may have simpler markup than plain HTML, because the author of each component can hide complexity inside the custom element. It's the HTML equivalent of providing a high-level API that abstracts over a low-level API.

The web component movement is still small but growing. Google Polymer and Microsoft X-Tag are two major component systems under development, but there isn't yet a single component library that meets all of our needs, so we built ng_modular_admin to fill the void.

Getting Started

To use ng_modular_admin in your own Angular Dart project, you need to do two things:

  1. Add Modular Admin as a dependency in pubspec.yaml.
  2. Add the stylesheet to your index.html:

The stylesheet element should look like this:

<link rel='stylesheet'
      type='text/css'
      href='packages/ng_modular_admin/css/modular-admin.css'>

If you're not familiar with Dart, read the Language Overview. If you're not familiar with Angular Dart, read About AngularDart.

Resources

For additional information, consult the following resources: