####configuration
##The design supports:##
-
keeping track of the browser’s history stack;
-
tab routing;
-
drilling down cleanly from tabbed pages;
-
crawling back up the history stack;
-
popping up a dialog box;
-
incorporating Material Icons;
-
deploying a configurable gauge component; and
-
local, component-specific styles.
####Change your node version, clone the repo, install and run the tests:####
nvm use v4.2.4
git clone [email protected]:wpannell/angularjs-1.x-reference-app.git app
cd app
npm install
npm run lint
npm test
####Start the dev server and follow instructions:####
npm run dev
####There is now a clear look of the app’s architecture:####
####The gauge component is configurable from the component’s controller that uses it:####
####This is what it looks like:####
####The popup is invoked from the blue “eject” button (see the prior image):####
####The popup is an ordinary component that can be tested as such:####
####The 2 bottom-right buttons on the popup return the passed-in text when they are clicked:####
####The popup.controller implements a standard cancel action and the click events, which pass the answer back to the $mdDialog.hide() function:####
####The popup dialog is used by the cards component. The controller imports what it needs from the popup component, and passes in the cards’ $element and the $mdDialog service into its constructor:####
####The controller’s configurePopup() function prepares, invokes, and returns from the popup dialog:####
####The click $event is passed in from the DOM:####
####Slider navigation happens via the fast-forward and –reverse buttons:####
####Navigation is controlled programmatically:####
####The DOM is configured to call the onPrevious() and onNext() functions, and to set the isNextDisabled and isPreviousDisabled states:####
####Finally, note how easy it is to use the Material Icons as the images – fast_rewind and fast_forward – on the buttons.####