Skip to content
This repository has been archived by the owner on Mar 20, 2024. It is now read-only.

Commit

Permalink
docs: update branding; Angular -> AngularJS (#36)
Browse files Browse the repository at this point in the history
  • Loading branch information
Splaktar committed Nov 28, 2018
1 parent 657cb2f commit ab73394
Show file tree
Hide file tree
Showing 12 changed files with 75 additions and 59 deletions.
61 changes: 37 additions & 24 deletions ARCHITECTURE.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,19 @@ More insight information about the way `material-tools` works.
#### Quick Links
- [Creating a custom Material Build](#creating-a-custom-material-build)
- [Creating a static theme stylesheet](#creating-a-static-theme-stylesheet)
- [How to run Angular in NodeJS](#how-to-run-angular-in-nodejs)
- [How to run AngularJS in NodeJS](#how-to-run-angular-in-nodejs)
- [Why are some files manually compiled](#why-are-some-type-of-files-compiled-manually)
- [Under-the-Hood: Understanding the Virtual Context](#under-the-hood-understanding-the-virtual-context)

### Creating a custom Material Build
Material Tools allows developers to build a subset of the [Angular Material 1.x](http://www.github.com/angular/material) framework with specific components.
Material Tools allows developers to build a subset of the
[AngularJS Material](http://www.github.com/angular/material) framework with specific components.

As a developer you could just specifiy the given [components](https://github.com/angular/material/tree/master/src/components)
and `material-tools` will run Angular Material in the `NodeJS` environment.
As a developer you could just specifiy the given
[components](https://github.com/angular/material/tree/master/src/components)
and `material-tools` will run AngularJS Material in the `NodeJS` environment.

> Read more about [running an Angular module in NodeJS](#how-to-run-angular-in-nodejs)
> Read more about [running an AngularJS module in NodeJS](#how-to-run-angular-in-nodejs)
The tools will then resolve all dependencies of the specified modules and fetch
all required files.
Expand All @@ -32,30 +34,36 @@ At the end all generated output files will be written to a given folder or can b
### Creating a static theme stylesheet
Another great feature of Material Tools is the generation of a static theme stylesheet.

You may have noticed that in Angular Material the generation of the themes inside of the browser could damage the performance.
Especially storing the generated styles in `<style>` elements in the documents head is not really efficient.
You may have noticed that in AngularJS Material the generation of the themes inside of the browser could
damage the performance. Especially storing the generated styles in `<style>` elements in the documents head
is not really efficient.

> The browser is not able to make any optimizations and it also takes a while to be able to see the styles in action.
> The browser is not able to make any optimizations and it also takes a while to be able to see the styles in
action.

This issue can be easily solved by having a static theme stylesheet.

<img height="250" src="https://cloud.githubusercontent.com/assets/4987015/17679920/f8713b40-633d-11e6-8092-d60e69e8bf86.PNG">


To be able to build a static theme stylesheet the tools need to be able to access the [`$mdTheming`](https://github.com/angular/material/tree/master/src/core/services/theming) service.
To be able to build a static theme stylesheet the tools need to be able to access the
[`$mdTheming`](https://github.com/angular/material/tree/master/src/core/services/theming) service.

As part of the [Virtual Context](#under-the-hood-understanding-the-virtual-context), we also hook into the AngularJS prototype to build our own injector, which includes all `services`, `directives`, `providers` and more.
As part of the [Virtual Context](#under-the-hood-understanding-the-virtual-context), we also hook into the
AngularJS prototype to build our own injector, which includes all `services`, `directives`, `providers` and
more.

This allows us to access the `$mdThemingProvider`, which is responsible for configurating the theme.
Once the theme is configured we instantiate our service by calling the `$get` method of the provider.

After instantiating the `$mdTheming` service we could run the theme generation and hook into the mocked `document.head`
After instantiating the `$mdTheming` service we could run the theme generation and hook into the mocked
`document.head`

The head will contain the generated theme styles as `<style>` elements, which will be extraced then.

### How to run Angular in NodeJS
### How to run AngularJS in NodeJS

To be able to run an Angular module in NodeJS the tools need to mock a browser environment.
To be able to run an AngularJS module in NodeJS the tools need to mock a browser environment.

> Material Tools does only mock the most necessary parts of the browser so the mock is as small as possible.
Expand All @@ -67,16 +75,19 @@ This can lead to situations, where the tools are interfering with the user's bui
- The mock is polluting the `globals` of NodeJS.
- The NodeJS [module](https://nodejs.org/api/modules.html) cache will be polluted with wrong exports.

Read more about the way we solved that issue with the [Virtual Context](#under-the-hood-understanding-the-virtual-context)
Read more about the way we solved that issue with the
[Virtual Context](#under-the-hood-understanding-the-virtual-context).

### Why are some type of files compiled manually

Some developers are expecting Material Tools to export the Angular Material stylesheet without the layouts included by default.
Some developers are expecting Material Tools to export the AngularJS Material stylesheet without the layouts
included by default.

Since the `core` module of Angular Material always includes the `layouts` by default, we are not able to retrieve the `core` module
without the `layouts` included.
Since the `core` module of AngularJS Material always includes the `layouts` by default, we are not able to
retrieve the `core` module without the `layouts` included.

To work around this issue, we have to manually compile the `core` module with explicitly excluding the `layout` stylesheets.
To work around this issue, we have to manually compile the `core` module with explicitly excluding the
`layout` stylesheets.

### Under-the-Hood: Understanding the Virtual Context
Material Tools places a high value on on the isolation of the modified NodeJS environment.
Expand All @@ -85,18 +96,20 @@ The Virtual Context allows the tools to run specific code completely isolated in
another [V8](https://developers.google.com/v8/) context. <br/>
It is not only isolating the given code. It also provides a minimalistic NodeJS environment.

> It is also possible to require other files from the Virtual Context without leaving the isolated context.<br/>
> It is also possible to require other files from the Virtual Context without leaving the isolated context.
A minimal `require` method has been created inside of the plain V8 context, which supports:
- Nesting of the isolated context
- Creating / Overwriting context global variables (e.g `window`)
- Enabling [strict mode](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Strict_mode)

It plays such a big role in Material Tools, because it allows us to completely isolate our changes from the original NodeJS context
and also allows us to overwrite the `globals` as mentioned previously.
It plays such a big role in Material Tools, because it allows us to completely isolate our changes from the
original NodeJS context and also allows us to overwrite the `globals` as mentioned previously.

The overwriting of the `globals` is important to be able to run an Angular application in NodeJS.
The overwriting of the `globals` is important to be able to run an AngularJS application in NodeJS.

> That's why the Virtual Context is also responsible for mocking the most necessary parts of a browser to run an Angular application.
> That's why the Virtual Context is also responsible for mocking the most necessary parts of a browser to
run an AngularJS application.

<img src="https://cloud.githubusercontent.com/assets/4987015/17678625/2e07fa6a-6338-11e6-9fe6-e6ee54dec53e.png" height="210">
<img src="https://cloud.githubusercontent.com/assets/4987015/17678625/2e07fa6a-6338-11e6-9fe6-e6ee54dec53e.png"
height="210">
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License

Copyright (c) 2014-2016 Google, Inc. http://angularjs.org
Copyright (c) 2014-2018 Google LLC. https://angularjs.org

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
15 changes: 9 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# angular-material-tools [![Build Status](https://travis-ci.org/angular/material-tools.svg?branch=master)](https://travis-ci.org/angular/material-tools)

Tool that generates custom [Angular-Material v1.x](http://github.com/angular/material) builds, consisting of:
Tool that generates custom [AngularJS Material](http://github.com/angular/material) builds, consisting of:

* JS files for a set Material components.
* CSS for a set of components.
* Static theme files.
* Layout CSS, separated from the specific component styling.

> Support for Angular Material v2 may be added in the future.
> Support for Angular Material may be added in the future.
## Quick Links
- [Installation](#installation)
Expand All @@ -23,7 +23,8 @@ Tool that generates custom [Angular-Material v1.x](http://github.com/angular/mat

## Usage

`material-tools` can be easily used from the **command-line** or from your own custom **NodeJS** code. The build tools also include a CLI, which can be used by installing the tools globally.
`material-tools` can be easily used from the **command-line** or from your own custom **NodeJS** code.
The build tools also include a CLI, which can be used by installing the tools globally.
- `npm install -g angular-material-tools`

### Options
Expand All @@ -32,7 +33,7 @@ Tool that generates custom [Angular-Material v1.x](http://github.com/angular/mat
| ----------------------- | ----------- | -------------------------------------------------------------------------- |
| `destination` (*) | `string` | Target location for the Material build. |
| `modules` | `string[]` | Modules that should be part of the build.<br/> All modules will be built if nothing is specified. |
| `version` | `string` | Version of Angular Material.<br/> If set to `local`, it will take the local installed Angular Material version from the node modules. <br/> If set to `latest`, the latest version will be downloaded. |
| `version` | `string` | Version of AngularJS Material.<br/> If set to `local`, it will take the local installed AngularJS Material version from the node modules. <br/> If set to `latest`, the latest version will be downloaded. |
| `theme` | `MdTheme` | Material Theme to be used to generate a static theme stylesheet. |
| `themes` | `MdTheme[]` | Multiple Material Themes, which are used to generated a static stylesheet. |
| `cache` | `string` | Directory for caching the downloads |
Expand All @@ -44,7 +45,8 @@ Tool that generates custom [Angular-Material v1.x](http://github.com/angular/mat

### CLI usage

To create a custom Angular Material build with the command-line interface (CLI), you can pass the [options](#options) as CLI arguments.
To create a custom AngularJS Material build with the command-line interface (CLI), you can pass the
[options](#options) as CLI arguments.

All possible options in the CLI can be listed with the command:

Expand All @@ -65,7 +67,8 @@ The CLI includes the following commands:
material-tools --destination ./output --modules list datepicker autocomplete --version 1.0.0
```

When a version is not specified, the CLI will automatically use the installed Angular Material version from your local `node_modules` directory.
When a version is not specified, the CLI will automatically use the installed AngularJS Material version from
your local `node_modules` directory.
```bash
material-tools -d ./output -m list
```
Expand Down
2 changes: 1 addition & 1 deletion lib/builders/JSBuilder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export class JSBuilder {
}

/**
* Builds a javascript snippet, which registers a new Angular Module with
* Builds a javascript snippet, which registers a new AngularJS Module with
* the required dependencies.
*/
private static _buildMainModule(mainModule: { rawName: string, dependencies: string[] }): string {
Expand Down
2 changes: 1 addition & 1 deletion lib/builders/MaterialBuilder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export class MaterialBuilder {
/** Generates the license string */
private _getLicense(modules: string[]): string {
let lines = [
'Angular Material Design',
'AngularJS Material Design',
'https://github.com/angular/material',
'@license MIT',
'v' + this._options.version,
Expand Down
14 changes: 7 additions & 7 deletions lib/builders/ThemeBuilder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export class ThemeBuilder {

/**
* Instantiate the $mdTheming service by calling the provider function with
* the default color palettes of Angular Material.
* the default color palettes of AngularJS Material.
*
* Register the specified theme in the `$mdThemingProvider` by overwriting the default theme.
* Using the default theme allows users to use the static stylesheet without doing anything.
Expand Down Expand Up @@ -107,7 +107,7 @@ export class ThemeBuilder {
}

/**
* Function will be used to intercept Angular's Run Phase.
* Function will be used to intercept AngularJS' Run Phase.
*/
private _onAngularRunFn(runFn) {
if (runFn.name === 'generateAllThemes') {
Expand All @@ -132,7 +132,7 @@ interface MdThemingProvider {
extendPalette: (paletteName: string, palette: MdPalette) => MdPalette;
}

/** Angular Material Theme Builder interface */
/** AngularJS Material Theme Builder interface */
interface MdThemeBuilder {
primaryPalette: (name, hue?: MdThemeHues) => MdThemeBuilder;
accentPalette: (name, hue?: MdThemeHues) => MdThemeBuilder;
Expand All @@ -141,7 +141,7 @@ interface MdThemeBuilder {
dark: () => MdThemeBuilder;
}

/** Angular Material Theme definition */
/** AngularJS Material Theme definition */
export interface MdTheme {
name?: string;
dark?: boolean;
Expand All @@ -160,20 +160,20 @@ export interface MdTheme {
backgroundPaletteHues?: MdThemeHues;
}

/** Angular Material Theme hue registry */
/** AngularJS Material Theme hue registry */
export interface MdThemeHues {
'default'?: string;
'hue-1'?: string;
'hue-2'?: string;
'hue-3'?: string;
}

/** Angular Material Palette registry */
/** AngularJS Material Palette registry */
export interface MdPaletteDefinition {
[paletteName: string]: MdPalette;
}

/** Angular Material Palette map */
/** AngularJS Material Palette map */
export interface MdPalette {
extends: string;
50?: string;
Expand Down
2 changes: 1 addition & 1 deletion lib/cli/options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function registerOptions(yargs: any): any {
}))
.option('version', addDefaults({
alias: 'v',
describe: 'Angular Material version.',
describe: 'AngularJS Material version.',
default: DEFAULT_OPTIONS.version
}));

Expand Down
4 changes: 2 additions & 2 deletions lib/common/VersionDownloader.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@ export class VersionDownloader {
}

/**
* Fetches the specified version from the Angular Material Repository and
* Fetches the specified version from the AngularJS Material Repository and
* stores it in the specified destination.
* @returns {Promise.<String>} Path of the downloaded Angular Material version.
* @returns {Promise.<String>} Path of the downloaded AngularJS Material version.
*/
static getSourceVersion(version: string, destination: string): Promise<string> {
return this._downloadFile(SOURCE_REPO + version + EXTENSION, destination);
Expand Down
2 changes: 1 addition & 1 deletion lib/resolvers/DependencyResolver.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export class DependencyResolver {

/**
* Determines the dependencies and parent dependencies of the specified
* Angular `modules` within a `file`.
* AngularJS `modules` within a `file`.
*/
static resolve(file: string, modules?: string[], mainModule?: string): any {

Expand Down
8 changes: 4 additions & 4 deletions lib/resolvers/PackageResolver.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export class PackageResolver {
return this._isExisting(path.join(path.resolve(cacheRoot), version))
.then(this._resolveDirectories)
.then(directories => {
Logger.info('Using Angular Material version from cache.');
Logger.info('Using AngularJS Material version from cache.');

return {
root: path.join(directories.module, '..'),
Expand Down Expand Up @@ -77,7 +77,7 @@ export class PackageResolver {
}

/**
* Retrieves the local installed Angular Material version form the current PWD.
* Retrieves the local installed AngularJS Material version form the current PWD.
*/
private static _retrieveLocalVersion(): string {
// Create a Node module which runs at the current process working directory.
Expand All @@ -89,7 +89,7 @@ export class PackageResolver {

let packageFile = path.join(resolvedModule, 'package.json');

// Load the version from the local installed Angular Material dependency.
// Load the version from the local installed AngularJS Material dependency.
return require(packageFile)['version'];
}

Expand All @@ -110,7 +110,7 @@ export class PackageResolver {
}

/**
* Retrieves the latest Angular Material version remotely.
* Retrieves the latest AngularJS Material version remotely.
*/
private static _retrieveLatestVersion(): string {
try {
Expand Down
18 changes: 9 additions & 9 deletions lib/resolvers/isolated_angular.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Load Angular from the Node Modules
// Load AngularJS from the Node Modules
require('angular');

/** ngMaterial Component Module prefix */
Expand All @@ -7,20 +7,20 @@ const modulePrefix = 'material.';
/** Dependency Map, which will be exported */
let dependencyMap = {};

/** Injector Map, which holds all injectable values from Angular */
/** Injector Map, which holds all injectable values from AngularJS */
let injectorMap = {};

/** Main ngMaterial */
let mainModule = { rawName: window['$$mainModule'] || 'ngMaterial' };

/** Reference to the loaded Angular global */
/** Reference to the loaded AngularJS global */
let angular = window['angular'];


// Overwrite the jqLite element function of Angular to prevent errors with missing DOM globals.
// Overwrite the jqLite element function of AngularJS to prevent errors with missing DOM globals.
angular.element = function() {};

// Overwrite Angular's module function to be able to intercept
// Overwrite AngularJS' module function to be able to intercept
// the dependency / module registration.
angular.module = (name, dependencies) => {
if (dependencies && name.indexOf(modulePrefix) !== -1) {
Expand All @@ -39,20 +39,20 @@ angular.module = (name, dependencies) => {
mainModule['dependencies'] = dependencies.filter(item => item.indexOf(modulePrefix) === -1);
}

// By default Angular returns itself again after the module call.
// By default AngularJS returns itself again after the module call.
return new AngularModuleMock();
};

/**
* Angular Material module names are always separated with the dot delimiter.
* AngularJS Material module names are always separated with the dot delimiter.
* To retrieve the plain module name, we just return the string after the last dot.
*/
function cleanupModuleName(name) {
return name.substring(name.lastIndexOf('.') + 1);
}

/**
* Creates a mocked object of the Angular Module instance.
* Creates a mocked object of the AngularJS Module instance.
*/
function AngularModuleMock() {
let self = this;
Expand Down Expand Up @@ -91,7 +91,7 @@ function AngularModuleMock() {
}
}

// Load Angular Material file after the Angular functions have been mocked.
// Load AngularJS Material file after the AngularJS functions have been mocked.
require(window['$$moduleName'] || 'angular-material');

// Export the validated data from ngMaterial.
Expand Down

0 comments on commit ab73394

Please sign in to comment.