This implementation of Shrine uses ngMaterial with Angular 1.5.x and the new .component( ) API. Building Shrine with components dramatically simplified the project/code structures and allows developers to easily understand how the UI designs are implemented as Angular Components.
Implementing your Angular 1.5.x application with Components also means your migration to Angular 2 will be significantly easier...
The Component API is a shorthand for registering a special type of directive, which represents a self-contained UI component in your application. Such components are always isolated (i.e. scope: {}) and are always restricted to elements (i.e. restrict: 'E').
Component definitions are very simple and do not require as much configuration as defining general directives. Component definitions usually consist only of a template and a controller backing it.
In order to make the definition easier, components enforce best practices like use of controllerAs, bindToController. They always have isolate scope and are restricted to elements.
Similar to the original version of Shrine, this implementation of Shrine also uses ES6, JSPM, Angular Material, and demonstrates Angular Best Practices.
These best practices are also discussed in John Papa's Angular 1 Style Guide and Pluralsight Course: Clean Code
The Shrine application has coding styles, packaging, and architecture patterns implemented as guides for developers implementing their own Angular 1.x SPA(s). This application also serves to demonstrate Adaptive user experiences achieved using specialized view configurations and a mediaQuery Observer pattern.
Below are some illustrations that map portions of those Shrine UI views to actual Angular components. Shrine has two (2) primary views:
HTML markup for the Dashboard page:
<dashboard>
<nav-bar isMobile="$ctrl.isMobile" on-open-sidenav="$ctrl.openSidenav()"></nav-bar>
<md-tabs >
<md-tab ng-repeat="it in $ctrl.categories" >
<featured-item item="it"></featured-item>
</md-tab>
</md-tabs>
<product-grid grid-name="homeView" show-details="true" items="$ctrl.items" ></product-grid>
<md-sidenav >
<side-bar categories="$ctrl.categories" selected="$ctrl.category"></side-bar>
</md-sidenav>
</dashboard>Definition of the Dashboard module:
/**
* Configure the shrine 'Dashboard' module
* Register the dashboard component and its child components
*/
import Dashboard from './Dashboard';
import NavBar from './NavBar';
import SideBar from './SideBar';
import FeaturedItem from './FeaturedItem';
export default angular.module('shrine.dashboard', [ ] )
.component( Dashboard.name , Dashboard.config )
.component( FeaturedItem.name , FeaturedItem.config )
.component( NavBar.name , NavBar.config )
.component( SideBar.name , SideBar.config );
HTML markup for the ProductViewer page:
<product-viewer>
<product-header is-mobile="viewer.isMobile" item="viewer.selectedItem" ></product-header>
<div class="details-container">
<product-details item="viewer.selectedItem" ></product-details>
<product-grid grid-name="detailView" items="viewer.items" show-details="false" ></product-grid>
</div>
</product-viewer>Definition of the Product module:
/**
* Configure the shrine 'Products' module
*/
import ProductViewer from './ProductViewer';
import ProductGrid from './ProductGrid';
import ProductHeader from './ProductHeader';
import ProductCard from './ProductCard';
import ProductDetails from './ProductDetails';
export default angular.module('shrine.products', [ ] )
.component( ProductViewer.name , ProductViewer.config )
.component( ProductHeader.name , ProductHeader.config )
.component( ProductDetails.name , ProductDetails.config )
.component( ProductGrid.name , ProductGrid.config )
.component( ProductCard.name , ProductCard.config );---
In addition to using the powerful Angular Material UI Components and Layout features, Shrine also implements an architecture to support custom view configurations and mediaQueries. These features enable Shrine to both resize the UI components and change the UI components positions and configurations... as needed to adapt to different viewport display sizes:
This branch does not use the new Angular 2 Router:
ngComponentRouter. Instead,<ng-view>and the Angular 1 ngRouter are currently used.
Clone the repo and run the following commands:
npm install jspm -g
npm install
cd ./app; jspm install
Start the dev server like so.
npm install http-server
http-server app/
