angle-grinder can be opinionated at times. It is a collection of libraries with mods and wrappers around them to facilite building an application faster with anglularJS and Bootstrap 2. Here are the key things we try to do here:
- a simple generic framework to do CRUD from a grid using a dialog
- utilities for integrating with a Grails app
- wrapper around JQGrid for angularJs as well as mods to look an feel for bootstrap
- various improvements and tweaks on form components for drop downs & selects
- less modifications for look and feel on Bootstrap
Website Documentation and Examples: http://9ci.github.io/angle-grinder
nodejs from either http://nodejs.org/ or using your favorite package manager https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
sudo npm install n -g
sudo n latest
node -v
should be at v0.11 or higher
In order to get started, you'll want to install some tools globally. You may need to prefix these with sudo (for OSX, *nix, BSD etc) or run your command shell as Administrator (for Windows) to do this. the "-g" will put the commands in your system path, allowing them to be run from any directory.
sudo npm install -g coffee-script
sudo npm install -g grunt-cli
sudo npm install -g bower
This will do the standard bower and npm installs to make sure you have the internet cloned on your computer.
bower install
npm install
grunt
If a test is failing add --force
script/run-frontend-server
script/run-ag-demo
- app - contains CoffeeScript sources, styles, images, fonts and other assets
- app/scripts - CoffeeScript sources
- app/styles - stylesheets
- app/views - html views used by AngularJS
- test - contains tests for the application
- tests/integration - protractor integration specs
- tests/unit - unit tests for AngularJS components
Third-party libraries
- components/bower - components downloaded by
bower install
command - third-party - you could put custom components here
- node_modules - command downloaded by
npm install
command
Generated stuff
- dev - compiled development release
- dist - created by
grunt build
command, contains the production minified release of the app
By default all tests are executed in PhantomJS browser
grunt test:unit
orgrunt test
- run unit testsgrunt test:unit:watch
orgrunt test:watch
- run unit tests in watch modegrunt test --browsers=Chrome,Firefox
- run tests inside Chrome and Firefox
Run test against specific browsers
grunt test:unit --browsers=Chrome,Firefox,Opera,PhantomJS
Put debugger
in the failing spec:
describe "Failing spec", ->
it "should run smoothly", ->
debugger # this is like setting a breakpoint
failMiserably()
Run karma in Chrome browser:
grunt test:watch --browsers=Chrome
- Go to the newly opened Chrome Browser
- Open Chrome's DevTools and refresh the page
- Now in the source tab you should see the execution stopped at the debugger
Start Xvfb and export DISPLAY variable:
script/xvfb start
export DISPLAY=:99
Perform single run:
grunt test --browsers=Firefox,Chrome,Opera,PhantomJS
or
grunt test:watch --browsers=Chrome
Install standalone Selenium node_modules/protractor/bin/webdriver-manager update
Start the app in the test
env grunt build:dev
configureProxies connect:integration watch
Manually run the specs scripts/run-protractor
Or it with scripts/test-integration
grunt build
(cd dist/ ; python -m SimpleHTTPServer 8000)
dist
├── scripts
│ ├── angleGrinder.gridz.min.js
│ ├── bootstrap.min.js
│ ├── gridz.min.js
│ ├── scripts.min.js
│ ├── jquery.min.js
│ └── angularjs-all.min.js
└── styles
├── bootstrap.min.css
├── gridz.min.css
└── style.min.css
scripts/angularjs-all.min.js
- AngularJS stuffstyles/bootstrap.min.css
- twitter bootstrap stylesscripts/bootstrap.min.js
- twitter bootstrap js + angular-bootstrapstyles/gridz.min.css
- styles for gridz pluginscripts/gridz.min.js
- sources of gridz pluginscripts/angleGrinder.gridz.min.js
- AgularJS directive for gridz
And then navigate to http://localhost:8000
to see the production release.
Run node_modules/blueimp-file-upload-node/server.js
and navigate to http://localhost:9000/#/examples/fileUpload
Clone the gh-pages
branch:
git clone -b gh-pages https://github.com/9ci/angle-grinder angle-grinder-gh-pages
You must have angle-grinder
and angle-grinder-gh-pages
in the same directory.
Go to angle-grinder-gh-pages
directory, build the app and push changes to gh-pages
branch:
cd angle-grinder-gh-pages
script/update-ag-plugin
git commit -am 'chore: release the documentation'
We'd love for you to contribute to our source code and to make Angle Grinder even better than it is today!
Please read the contribution guidelines to learn about how to submit code as well as other useful info like how to build and test Angle Grinder code.