Skip to content

wpannell/angularjs-1.x-reference-app

Repository files navigation

IBM Bluemix Garage Bootcamp

####configuration

Deploy to Bluemix

angular.js-1.x-reference-app

Getting Started##

####Change your node version, clone the repo, install and run the tests:####

nvm use v4.2.4
git clone git@github.com: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

##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.

Architecture##

####There is now a clear look of the app’s architecture:####

component-based architecture


####The gauge component is configurable from the component’s controller that uses it:####

component-based architecture


####This is what it looks like:####

component-based architecture  


####The popup is invoked from the blue “eject” button (see the prior image):####

component-based architecture


####The popup is an ordinary component that can be tested as such:####

component-based architecture


####The 2 bottom-right buttons on the popup return the passed-in text when they are clicked:####

component-based architecture


####The popup.controller implements a standard cancel action and the click events, which pass the answer back to the $mdDialog.hide() function:####

component-based architecture


####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:####

component-based architecture


####The controller’s configurePopup() function prepares, invokes, and returns from the popup dialog:####

component-based architecture


####The click $event is passed in from the DOM:####

component-based architecture


####Slider navigation happens via the fast-forward and –reverse buttons:####

component-based architecture


component-based architecture


component-based architecture


####Navigation is controlled programmatically:####

component-based architecture


####The DOM is configured to call the onPrevious() and onNext() functions, and to set the isNextDisabled and isPreviousDisabled states:####

component-based architecture


####Finally, note how easy it is to use the Material Icons as the images – fast_rewind and fast_forward – on the buttons.####

About

reference application for a modular component-based angularjs-1.x app

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published