Separate skinned/unskinned components.

.gitignore

@@ -11,3 +11,4 @@ npm-debug.log
 phantomjsdriver.log
 reports
 logs
+.cache

advanced-skin/README.md

@@ -31,8 +31,7 @@ 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 a companion frontend [bower][] package,
-[bedrock-angular][].
+[npm][] module, [bedrock-views][], and [bedrock-angular][].
 
 The [bedrock-views][] module, via a dependency [bedrock-requirejs][], expects
 all frontend code to behave like a [bower][] package. This means that any

advanced-skin/components/register-service.js

@@ -0,0 +1,16 @@
+/*!
+ * Example Register service.
+ *
+ * Copyright (c) 2015-2017 Digital Bazaar, Inc. All rights reserved.
+ */
+function factory() {
+  const service = {};
+
+  service.register = function(email, password) {
+    alert('Thank you for registering!');
+  };
+
+  return service;
+}
+
+export default factory;

advanced-skin/components/unskinned-component.js

@@ -0,0 +1,19 @@
+/*!
+ * Example unskinned component.
+ *
+ * Copyright (c) 2015-2017 Digital Bazaar, Inc. All rights reserved.
+ */
+export default {
+  controller: Ctrl,
+  templateUrl: 'advanced-skinning/unskinned.html'
+};
+
+function Ctrl(brRegisterService) {
+  const self = this;
+  self.email = '';
+  self.password = '';
+
+  self.submit = function() {
+    brRegisterService.register(self.email, self.password);
+  };
+}

advanced-skin/components/unskinned.html

@@ -0,0 +1,84 @@
+<div class="row">
+  <div class="col-md-12">
+    <h1 class="headline">Register</h1>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-offset-2 col-md-8">
+
+    <form name="regForm" class="form-horizontal" ng-submit="$ctrl.submit()">
+      <fieldset>
+        <legend>Your Email and Password</legend>
+
+        <div class="form-group">
+          <p class="help-block col-md-10">
+            By entering a valid email address and password you will be able to
+            log into the service.
+          </p>
+        </div>
+
+        <br-input br-model="$ctrl.email"
+          br-options="{
+            name: 'email', label: 'Email',
+            autocomplete: 'off',
+            showValidation: true,
+            columns: {
+              label: 'col-md-3',
+              input: 'col-md-7',
+              help: 'col-md-offset-3 col-md-7'
+            }
+          }" required>
+          <div name="br-input-help">
+            A valid email address is required so that we can reset
+            your password if you get locked out.
+          </div>
+          <div name="br-input-validation-errors">
+            <p ng-show="regForm.email.$error.required">
+              Email is required.
+            </p>
+          </div>
+        </br-input>
+        <br-input br-model="$ctrl.password"
+          br-options="{
+            name: 'password', type: 'password',
+            label: 'Password',
+            showValidation: true,
+            columns: {
+              label: 'col-md-3',
+              input: 'col-md-7',
+              help: 'col-md-offset-3 col-md-7'
+            }
+          }" ng-minlength="6" ng-maxlength="32" required>
+          <div name="br-input-help">
+            Please enter a secure password that is between 6 and 32
+            characters long.
+          </div>
+          <div name="br-input-validation-errors">
+            <p ng-show="regForm.password.$error.required">
+              Password is required.
+            </p>
+            <p ng-show="regForm.password.$error.minlength">
+              Password must be longer than 6 characters.
+            </p>
+            <p ng-show="regForm.password.$error.maxlength">
+              Password must be shorter than 32 characters.
+            </p>
+          </div>
+        </br-input>
+
+      </fieldset>
+
+      <br/>
+
+      <div class="form-group">
+        <div class="col-md-offset-3">
+          <button type="submit"
+            ng-disabled="regForm.$invalid"
+            class="btn btn-primary btn-lg">Register</button>
+        </div>
+      </div>
+    </form>
+
+  </div>
+</div>

advanced-skin/components/unskinned.js

@@ -0,0 +1,26 @@
+/*!
+ * Example unskinned component module.
+ *
+ * Copyright (c) 2015-2017 Digital Bazaar, Inc. All rights reserved.
+ *
+ */
+import angular from 'angular';
+import * as bedrock from 'bedrock-angular';
+import UnskinnedComponent from './unskinned-component.js';
+import RegisterService from './register-service.js';
+
+const module = angular.module('app.unskinned', ['bedrock.form']);
+
+bedrock.setRootModule(module);
+
+module.component('brUnskinned',UnskinnedComponent);
+module.service('brRegisterService',RegisterService);
+
+/* @ngInject */
+module.config(function($routeProvider) {
+  $routeProvider
+   .when('/', {
+     title: 'Example Home',
+     template: '<br-unskinned></br-unskinned>'
+   });
+});