angularjs-groovy
v0.1.14
Published
A Framework for WebView Applications in Angular
Downloads
11
Maintainers
Readme
#Create a templated application from scratch in two minutes
To address issues or request additional functionality, please use the issues tab associated with this repo. Build includes ngRoute and ngTouch modules for AngularJS. If you choose to scaffold an application that is not for web, you will be prompted to install phonegap.
##To use this framework to create a boilerplate application project, please install via NPM:
npm install [-g] angularjs-groovy
##To use this framework as a runtime JS API, please install the Bower component:
bower install angularjs-groovy --save-dev
##For CLI use:
groovy [app name] [desired location]
Follow the prompts. Your settings can then be found in the js file settings.js. Examples use the boilerplate.
Projects are built in the desired location with both Grunt and Gulp build scripts. To watch:
grunt
gulp
To build:
grunt build
gulp build
##For Runtime Use: ###Include a Groovy Settings Object:
<script type='text/javascript'>
groovy = {
forWeb: false,
useLogin: false,
header: {
title: 'Groovy',
color: 'Emerald Cove'
},
masterDetail: {
iconUrl: 'images/appbar.nyan.svg'
}
};
</script>
More details on each option are included below.
###Include these files in the head of your HTML:
<script type='text/javascript'
src='bower_components/angularjs/angular.js'>
</script>
<script type='text/javascript'
src='bower_components/angularjs-groovy/dist/angularjs-groovy.js'>
</script>
Or wherever your Bower components install.
###Include an element where you wish your application elements to register:
<ng-view></ng-view>
###Create a module with angularjs-groovy as a dependency:
angular.module('groovyApp', [
'angularjs-groovy'
]);
inside of your own JavaScript. Doing the above will create a templated master-detail application.
###Next you may choose to add one or many application views:
<div ng-controller='yourCtrl'
ng-groovy-view
ng-groovy-view-name='settings'
ng-groovy-view-icon-url='iconUrl'
ng-groovy-view-options='{ prependHTML: true }'>
HTML
</div>
####Available View Types:
- ngGroovyView
- ngGroovyListView
- ngGroovySettingsView
- ngGroovyGridView
Check the examples to determine how these views appear. They can also be nested inside other views as directives.
An attribute representing options on the view is also available (similar to ngModelOptions) with the following options:
- prependHTML: Whether view html for non-base view types should be prepended (appends by default)
####Groovy Options: | Key | Type | Definition | Default | | ------------------------- | ------- | ------------------------------------------------------------------------------- | --------- | | appName / n | string | Adds your application name to the title of the page | undefined | | forWeb / fW | boolean | Is this application intended to be used for the web or as a native application? | true | | useLogin / uL | boolean | Instantiates a view for login, controlled by user reference | false | | useStyle | boolean | Use bootstrap/drunken pirate/groovy css | true | | header / h | object | | undefined | | header.title | string | Application header content | undefined | | header.color | string | Options: 'Lagoon, Strawberry, Banana, Bruise, Emerald Cove, Nassau Sunset' | undefined | | header.templateUrl | string | An html file to use en lieu of the default API header template | undefined | | type | string | Options: masterDetail (mD), tabbed (t), pageBased (pB), singleView (sV) | 'sV' | | masterDetail / mD | object | | undefined | | masterDetail.iconUrl | string | An image file to use en lieu of the default API master detail icon | undefined | | masterDetail.templateUrl | string | An html file to use en lieu of the default API master detail template | undefined | | tabbed / t | object | | undefined | | tabbed.templateUrl | string | An html file to use en lieu of the default API page based template | undefined | | pageBased / pB | object | | undefined | | pageBased.templateUrl | string | An html file to use en lieu of the default API page based template | undefined | | color / c | string | Options: 'Lagoon, Strawberry, Banana, Bruise, Emerald Cove, Nassau Sunset' | undefined | | debug | boolean | Enables AngularJS debug statements for Groovy | false |