Angular-Cordova Seed

Olive seed for Angular-Cordova - offers you quickly scaffold a AngularJS-Cordova project with pragmatic defaults and best practices.

Usage

Prepare

Install gulp, bower and olive if you haven't already:

npm install -g olive gulp bower

Create your project from this Angular seed using Olive CLI (Skip this if not creating a new project):

mkdir myapp && cd myapp
olive new angular-cordova

Install npm and bower dependencies:

npm install && bower install

Develop

Start developing locally:

npm start

Run test once and generate code coverage reports in coverage directory.

npm test

Build

First, specify a set of target platforms (if not already listed in config.xml). This will also download and install the plugins specified in config.xml.

cordova platform add ios android

Then, build the web files:

npm run build

And, build for specific platforms:

cordova build ios

Or, run in a simulator:

cordova run ios

You can also deploy on an actual device:

cordova run ios --device

Features

Test Driven Development

While developing your app, keep an eye on all unit-test specs.

Test coverage

See how much of your code is covered by well-written test scripts.

Directory Structure

├─src/
│ ├─app/
│ │ ├─config/
│ │ │ ├─constants.js
│ │ │ ├─modules.js
│ │ │ ├─routes.js
│ │ │ └─run.js
│ │ ├─directives/
│ │ │ ├─repoinfo/
│ │ │ │ ├─repoinfo.directive.js
│ │ │ │ ├─repoinfo.html
│ │ │ │ └─repoinfo.scss
│ │ │ └─toolbar/
│ │ │   ├─toolbar.directive.js
│ │ │   └─toolbar.scss
│ │ ├─pods/
│ │ │ └─home/
│ │ │   ├─home.controller.js
│ │ │   ├─home.controller.spec.js
│ │ │   ├─home.html
│ │ │   └─home.scss
│ │ ├─services/
│ │ │ └─github
│ │ │   └─github.service.js
│ │ ├─styles/
│ │ │ ├─_base.scss
│ │ │ ├─_overrides.scss
│ │ │ ├─_type.scss
│ │ │ └─app.scss
│ │ └─app.js
│ ├─assets/
│ │ ├─img/
│ │ ├─fonts/
│ │ └─favicon.ico
│ └─index.html
├─res/
├─www/
├─.tmp/
├─bower_components/
├─node_modules/
├─.bowerrc
├─.editorconfig
├─.gitattributes
├─.gitignore
├─.jscsrc
├─.jshintrc
├─.oliverc
├─bower.json
├─config.xml
├─gulpfile.js
├─karma.conf.js
├─package.json
└─README.md

File/Directory	Purpose
src/	Contains your Angular application code.
res/	Contains app icons and splash images
www/	Contains the distributable (that is, optimized and self-contained) output of your application. Deploy this to your server!
.tmp/	Various temporary output of build steps, as well as the debug output of your application.
bower_components/	Bower dependencies.
node_modules	Node modules required for development purpose.
.bowerrc	Bower configuration.
.editorconfig	EditorConfig file.
.oliverc	Olive configuration.
.gitattributes	Definition for Git attributes.
.gitignore	Git configuration for ignored files.
.jscsrc	JavaScript code style configuration.
.jshintrc	JSHint configuration.
.oliverc	Olive configuration.
bower.json	Bower configuration and dependency list.
config.xml	Cordova configuration file
gulpfile.js	Contains build specification for Gulp.
karma.conf.js	Karma configuration.
package.json	NPM configuration. Mainly used to list the dependencies needed for asset compilation.
README.md	This documentation.

.oliverc

Default options:

{
  "paths": {
    "src": "src",
    "tmp": ".tmp",
    "dist": "dist"
  }
}

These default options can be overridden. You can also include additional options from the following:

Ports

For example:

{
  "ports": {
    "app": 3000,
    "bs": 3001,
    "karma": 3002
  }
}

• app: The app will be served via this port (i.e. http://localhost:3000)
• bs: BrowserSync UI control panel can be accessed via this port (i.e. http://localhost:3001)
• karma: Karma tests report page is served via this port (i.e. http://localhost:3002/debug.html)

Content Security Policy

For example:

{
  "content-security-policy": {
    "development": {
      "default-src": "'unsafe-inline' 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'",
      "style-src": "'self' 'unsafe-inline'",
      "media-src": "*",
      ...
      "other-directive": "other-source"
    },
    "production": {
      "default-src": "'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'",
      "style-src": "'self' 'unsafe-inline'",
      "media-src": "*"
    },
    "other-env": {
      ...
    }
  }  
}