This example demonstrates how to substitute templates (or "skin") in an AngularJS web application built on top of bedrock.
npm install
npm run unskinned
npm run skinned
Bedrock is a foundation onwhich to build web applications. It uses a modular design to help keep code well-organized and to allow a healthy ecosystem to grow without hindrance.
Bedrock web applications are typically built by installing a backend npm module, bedrock-views, and bedrock-angular.
The bedrock-angular package will create a core, generic AngularJS application for you.
In this example, a bedrock application consists of an AngularJS component, "unskinned", that defines a route and a template and controller for that route. It also defines a component, "skinned", that overrides the "unskinned" template, changing its look and feel.
When the "unskinned" version of the application is run, the application's main route ("/") will display a list of increasing numbers, starting with one at the top and ending with four at the bottom.
When the "skinned" version of the application is run, the main route will display a list of decreasing numbers, starting with four at the top and ending with one at the bottom.
When the "unskinned" version starts, it only loads the "unskinned" component via bedrock's configuration system. When the "skinned" version starts, it loads both the "unskinned" component and the "skinned" component, demonstrating that the "skinned" component's look and feel overrides the "unskinned" component's.
Now that we know how to serve components, we need to tell bedrock to
override a particular AngularJS template with a different one. To do
this is another configuration change. If you look in configs/skinned.js,
you can see an entry that is added to a template "overrides" map. The
overrides map is referred to in the configuration system using this key:
bedrock.config.views.vars.angular.templates.overrides
Both its keys and values are URLs that are relative to package names.
Therefore, an entry with a key of example-unskinned/unskinned.html and a
value of example-skinned/skinned.html will cause the AngularJS application
to use example-skinned/skinned.html instead of
example-unskinned/unskinned.html whenever it is requested. This configuration
entry is also used by bedrock when optimizing (minification, consolidation,
etc) a web application, ensuring that templates that have been overridden are
not unnecessarily served to the browser.
Starting bedrock involves requiring bedrock, setting configuration
values, and calling bedrock.start. Since this example demonstrates two
different applications, there are two different scripts that can be used
to start bedrock.
To run a bedrock application with an "unskinned" component, run:
npm run unskinned
The script above will use a configuration file that will cause bedrock to only load the "unskinned" component. To see how the unskinned application looks, visit the URL that is logged to the console.
To run a bedrock application with a "skinned" component, run:
npm run skinned
This script will use an additional configuration file that will cause bedrock to also load the "skinned" component and to override the template in the "unskinned" component. To see how the skinned application looks, visit the URL that is logged to the console.