calvinl / ng-phonegap Goto Github PK

View Code? Open in Web Editor NEW

138.0 138.0 28.0 540 KB

Grunt workflow for building AngularJS applications on PhoneGap.

License: MIT License

Ruby 1.93% JavaScript 95.63% CSS 0.90% Shell 1.55%

ng-phonegap's People

Contributors

Stargazers

Watchers

ng-phonegap's Issues

Documentation missing steps

When going through the readme, it goes from setting up a blank cordova app to running npm install and bower install. It is not clear how package.json and bower.json should make it into the app.

Could you please elaborate?

Thanks for putting this together and making it available :)

.bowerrc and .gitignore files not cloned with git clone

I cloned the repo with git clone https://github.com/calvinl/ng-phonegap.git, but the .bowerrc and .gitignore files were not cloned. This gave me the JS error:

ReferenceError: angular is not defined [http://localhost:8000/www/js/app.js:10]

when starting the server and navigating to http://localhost:8000/www/index.html in the browser. I manually added the files and this fixed the issue.

.bowerrc tells bower where to install bower components.

So I couldn't figure out why grunt dev would work correctly in the browser but failed to copy all the resources to www in order to build correctly when emulating devices. I eventually tracked the error to this line in grunt.js

appDir: 'app/www',

which I am pretty sure should just be:

appDir: 'www',

When I changed it to www however, I started to get the following errors in the browser and on the devices:

GET http://0.0.0.0:9001/vendor.css 404 (Not Found) 0.0.0.0/:10
GET http://0.0.0.0:9001/app.css 404 (Not Found) 0.0.0.0/:11
GET http://0.0.0.0:9001/cordova.js 404 (Not Found) 0.0.0.0/:14
GET http://0.0.0.0:9001/endor.js 404 (Not Found) 0.0.0.0/:15
GET http://0.0.0.0:9001/g.js 404 (Not Found) 0.0.0.0/:16
GET http://0.0.0.0:9001/pp.js 404 (Not Found) 0.0.0.0/:17
GET http://0.0.0.0:9001/onfig.js 404 (Not Found) 0.0.0.0/:18
GET http://0.0.0.0:9001/odules.js 404 (Not Found) 0.0.0.0/:19
GET http://0.0.0.0:9001/irectives.js 404 (Not Found) 0.0.0.0/:20
GET http://0.0.0.0:9001/ilters.js 404 (Not Found) 0.0.0.0/:21
GET http://0.0.0.0:9001/ervices.js 404 (Not Found) 0.0.0.0/:22
GET http://0.0.0.0:9001/ontrollers.js 404 (Not Found) 0.0.0.0/:23
Uncaught ReferenceError: pg is not defined

You'll notice the url's are cut off. I was able to track this down to the application.tmpl to find this:

<% if (env == 'development') {
     css.forEach(function(asset) {
       print('  <link rel="stylesheet" href="' + asset.substring(8) + '"/>\n');
     });
   } else if (env == 'production') {
     print('  <link rel="stylesheet" href="css/app.css" />');
   } %>

I had to fix the asset.substring(8) to be asset.substring(4) in src/html/layouts/application.tmpl in order to work. Maybe there's a better way to do this?

SASS compile problem to tmp dir

First off, love this workflow Calvin. Working great for setting up my phonegap app. I've updated my gruntfile to use SASS instead of LESS, and the CSS file doesn't seem to be compiled anywhere. The watch task picks up on the .scss file changing, and I get no errors, but the css file is not in the tmp directory. All I see is the vendor.css file. Any ideas? Below is my grunt file:

module.exports = function(grunt) {

  var _APP_NAME_ = "change";

  // initial grunt configuration
  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),
    appDir: 'www',
    tmpDir: 'tmp',
    srcDir: 'src',
    bowerDir: 'vendor',
    vendorDir: 'src/js/vendor',
    releaseDir: '<%= appDir %>',
    connect: {
      server: {
        options: {
          port: 9001,
          base: '<%= appDir %>'
        }
      }
    },
    assets: {
      css: {
        vendor: [

          // Add additional Bower components here

        ],
        // shouldn't need to touch this
        src: [
          '<%= appDir %>/css/vendor.css',
          '<%= appDir %>/css/app.css'
        ]
      },
      js: {
        vendor: [
          // add any Bower components here.
          '<%= bowerDir %>/angular/angular.js',
          '<%= bowerDir %>/angular-route/angular-route.js',
          '<%= bowerDir %>/angular-touch/angular-touch.js'
        ],
        // shouldn't need to touch this.
        src: [
          '<%= appDir %>/js/vendor.js',
          '<%= appDir %>/js/pg.js',
          '<%= appDir %>/js/app.js',
          '<%= appDir %>/js/config.js',
          '<%= appDir %>/js/modules.js',
          '<%= appDir %>/js/directives.js',
          '<%= appDir %>/js/filters.js',
          '<%= appDir %>/js/services.js',
          '<%= appDir %>/js/controllers.js'
        ]
      }
    },

    // concatenate files for angularjs
    concat: {
      vendor: {
        files: {
          '<%= tmpDir %>/css/vendor.css': '<%= assets.css.vendor %>',
          '<%= tmpDir %>/js/vendor.js'  : '<%= assets.js.vendor %>'
        }
      },
      angular: {
        files: {
          '<%= tmpDir %>/js/config.js'      : ['<%= srcDir %>/js/config/*.js'],
          '<%= tmpDir %>/js/modules.js'     : ['<%= srcDir %>/js/modules/*.js', '<%= srcDir %>/js/modules/**/*.js'],
          '<%= tmpDir %>/js/controllers.js' : ['<%= srcDir %>/js/controllers/*.js', '<%= srcDir %>/js/controllers/**/*.js'],
          '<%= tmpDir %>/js/directives.js'  : ['<%= srcDir %>/js/directives/*.js', '<%= srcDir %>/js/directives/**/*.js'],
          '<%= tmpDir %>/js/filters.js'     : ['<%= srcDir %>/js/filters/*.js', '<%= srcDir %>/js/filters/**/*.js'],
          '<%= tmpDir %>/js/modules.js'     : ['<%= srcDir %>/js/modules/*.js', '<%= srcDir %>/js/modules/**/*.js'],
          '<%= tmpDir %>/js/services.js'    : ['<%= srcDir %>/js/services/*.js', '<%= srcDir %>/js/services/**/*.js']
        }
      },
      production: {
        files: {
          '<%= appDir %>/js/application.js': [
            '<%= tmpDir %>/js/production.js',
            '<%= tmpDir %>/js/vendor.js',
            '<%= tmpDir %>/js/pg.js',
            '<%= tmpDir %>/js/app.js',
            '<%= tmpDir %>/js/config.js',
            '<%= tmpDir %>/js/modules.js',
            '<%= tmpDir %>/js/directives.js',
            '<%= tmpDir %>/js/filters.js',
            '<%= tmpDir %>/js/services.js',
            '<%= tmpDir %>/js/controllers.js'
          ]
        }
      }
    },

    // for cleaning builds before re-building
    clean: {
      options: {
        force: true
      },
      tmp: {
        src: ['<%= tmpDir %>'],
      },
      development: {
        src: ['<%= tmpDir %>', '<%= appDir %>']
      },
      production: {
        src: ['<%= tmpDir %>', '<%= releaseDir %>']
      },
      css: {
        src: ['<%= appDir %>/css']
      },
      js: {
        src: ['<%= appDir %>/js']
      },
      img: {
        src: ['<%= appDir %>/img']
      },
      img: {
        src: ['<%= appDir %>/font']
      },
      partials: {
        src: ['<%= appDir %>/html/partials']
      }
    },

    copy: {
      config: {
        files: [
          { src: '<%= srcDir %>/js/config/application.js', dest: '<%= tmpDir %>/js/config/application.js' },
          { src: '<%= srcDir %>/js/app.js', dest: '<%= tmpDir %>/js/app.js' },
          { src: '<%= srcDir %>/js/pg.js', dest: '<%= tmpDir %>/js/pg.js' },
          { src: '<%= srcDir %>/config.xml', dest: '<%= appDir %>/config.xml' }
        ]
      },
      vendor: {
        files: [
          { src: '<%= tmpDir %>/css/vendor.css', dest: '<%= appDir %>/css/vendor.css' },
          { src: '<%= tmpDir %>/js/vendor.js', dest: '<%= appDir %>/js/vendor.js' }
        ]
      },
      img: {
        files: [
          { expand: true, cwd: '<%= srcDir %>/img/', src: ['**'], dest: '<%= appDir %>/img/' }
        ]
      },
      partials: {
        files: [
          { expand: true, cwd: '<%= srcDir %>/html/partials/', src: ['**'], dest: '<%= appDir %>/html/partials/' }
        ]
      },
      fonts: {
        files: [
          { expand: true, cwd: '<%= bowerDir %>/font-awesome/font/', src: ['**'], dest: '<%= appDir %>/font/' }
        ]
      },
      tmp_to_build: {
        files: [
          { expand: true, cwd: '<%= tmpDir %>/js/', src: ['*'], dest: '<%= appDir %>/js/' }
        ]
      },
      development: {
        files: [
          { src: '<%= srcDir %>/js/config/environments/development.js', dest: '<%= appDir %>/js/config/development.js' }
        ]
      },
      production: {
        files: [
          { src: '<%= srcDir %>/js/config/environments/production.js', dest: '<%= tmpDir %>/js/production.js' }
        ]
      }
    },

    // compile SASS files into CSS and store them in temp directories
    sass: {
      production: {
        files: [
          {
            src: ['<%= srcDir %>/**/*.scss', '<%= srcDir %>/!**/_*.scss'],
            cwd: 'scss',
            dest: '<%= tmpDir %>/css/app.css',
            ext: '.css',
            expand: true
          }
        ],
        options: {
          style: 'expanded',
          compass: true
        }
      },
      development: {
        files: [
          {
            src: ['<%= srcDir %>/**/*.scss', '<%= srcDir %>/!**/_*.scss'],
            cwd: 'scss',
            dest: '<%= tmpDir %>/css/app.css',
            ext: '.css',
            expand: true
          }
        ],
        options: {
          style: 'expanded',
          compass: true
        }
      }
    },

    // ngmin for pre-minifying AngularJS apps
    ngmin: {
      routers: {
        src: '<%= tmpDir %>/js/config/router.js',
        dest: '<%= tmpDir %>/js/config/router.js'
      },
      controllers: {
        src: '<%= tmpDir %>/js/controllers.js',
        dest: '<%= tmpDir %>/js/controllers.js'
      },
      directives: {
        src: '<%= tmpDir %>/js/directives.js',
        dest: '<%= tmpDir %>/js/directives.js'
      },
      modules: {
        src: '<%= tmpDir %>/js/modules.js',
        dest: '<%= tmpDir %>/js/modules.js'
      },
      filters: {
        src: '<%= tmpDir %>/js/filters.js',
        dest: '<%= tmpDir %>/js/filters.js'
      },
      services: {
        src: '<%= tmpDir %>/js/services.js',
        dest: '<%= tmpDir %>/js/services.js'
      },
      vendor: {
        src: '<%= tmpDir %>/js/vendor.js',
        dest: '<%= tmpDir %>/js/vendor.js'
      }
    },

    // uglify js for production
    uglify: {
      production: {
        files: {
          '<%= appDir %>/js/application.js': [
            '<%= appDir %>/js/application.js'
          ]
        }
      },
    },

    // minify css for production
    cssmin: {
      production: {
        files: {
          '<%= appDir %>/css/app.css': [
            '<%= tmpDir %>/css/vendor.css',
            '<%= tmpDir %>/css/app.css'
          ],
        }
      }
    },

    // watch files, build on the fly for development
    watch: {
      root: {
        files: ['<%= srcDir %>/*'],
        tasks: ['copy:config']
      },
      scripts: {
        files: ['<%= srcDir %>/js/**','<%= srcDir %>/js/*'],
        tasks: [
          'clean:js', 'concat:angular', 'concat:vendor',
          'copy:development', 'copy:config', 'copy:vendor',
          'copy:tmp_to_build'
        ]
      },
      sass: {
        files: ['<%= srcDir %>/scss/**/*.scss'],
        tasks: ['clean:css', 'concat:vendor', 'copy:vendor', 'sass:development']
      },
      img: {
        files: ['<%= srcDir %>/img/**'],
        tasks: ['clean:img', 'copy:img']
      },
      fonts: {
        files: ['<%= srcDir %>/font/**'],
        tasks: ['clean:fonts', 'copy:fonts']
      },
      partials: {
        files: ['<%= srcDir %>/html/partials/**'],
        tasks: ['clean:partials', 'copy:partials']
      },
      layouts: {
        files: ['<%= srcDir %>/html/layouts/**'],
        tasks: ['layouts:development']
      }
    },

    layouts: {
      options: {
        layout: '<%= srcDir %>/html/layouts/application.tmpl',
      },
      development: {
        options: {
          dest: '<%= appDir %>/index.html'
        },
        files: {
          css: '<%= assets.css.src %>',
          js: '<%= assets.js.src %>'
        }
      },
      production: {
        options: {
          dest: '<%= releaseDir %>/index.html'
        },
        files: {
          css: '<%= assets.css.src %>',
          js: '<%= assets.js.src %>'
        }
      }
    },


    config: {
      options: {
        template: '<%= srcDir %>/config.xml.tmpl',
        dest: '<%= appDir %>/config.xml'
      },
      enterprise: {},
      production: {},
      development: {}
    },


    // main build task (custom) with options
    // this task also builds out the main index.html
    // file based on templates, which are environment-aware
    build: {
      development: {},
      production: {},
      enterprise: {}
    }

  });

  // load grunt npm modules
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-ngmin');

  grunt.registerTask('dev', ['build:development', 'connect', 'watch']);

  // build HTML files based on target
  grunt.registerMultiTask('layouts', 'Builds an HTML file for angular.', function() {

    var opts = this.options()
      , target = this.target
      , css = this.files[0].src
      , js = this.files[1].src
      , layout = grunt.template.process(grunt.file.read(opts.layout), {
          data: { env: target, js: js, css: css, appName: _APP_NAME_ }
        });

    // generate main index.html file
    grunt.file.write(opts.dest, layout);
    grunt.log.write('Generating ' + opts.dest + '...').ok();

  });


  grunt.registerMultiTask('config', 'Builds the Cordova configuration file from template.', function() {

    var opts = this.options()
      , target = this.target
      , version = this.args[0] || '';

    var template = grunt.template.process(grunt.file.read(opts.template), {
          data: { target: target, appName: _APP_NAME_ }
        });

    // generate main index.html file
    grunt.file.write(opts.dest, template);
    grunt.log.write('Generating ' + opts.dest + '...').ok();

  });


  // task for building main index page based on environment
  grunt.registerMultiTask('build', 'Build the app based on environment.', function() {

    var opts = this.options()
      , target = this.target
      , env = target
      , args = this.args
      , version = args[0];

    if (target == 'enterprise') {
      env = 'production';
    }

    // clean up directories
    grunt.task.run('clean:' + env);

    // build all SASS files based on environment
    grunt.task.run('sass:' + env);

    // concat angular files
    grunt.task.run('concat:angular');

    // use ngmin to pre-minify angular files
    grunt.task.run('ngmin');

    // concat vendor libs
    grunt.task.run('concat:vendor');

    // copy all files
    grunt.task.run('copy:' + env);
    grunt.task.run('copy:config');
    grunt.task.run('copy:partials');
    grunt.task.run('copy:img');
    grunt.task.run('copy:fonts');

    // copy tmp files to development
    if (target == 'development') {
      grunt.task.run('copy:vendor');
      grunt.task.run('copy:tmp_to_build');
    }

    if (target == 'production' || target == 'enterprise') {
      // concat all angular files into a single file
      grunt.task.run('concat:production');
      grunt.task.run('uglify:production');
      grunt.task.run('cssmin:production');
    }

    // build cordova config.xml file, uses target so we
    // can switch from production to enterprise for bundle ID
    grunt.task.run('config:' + target);

    // build main index.html file last
    grunt.task.run('layouts:' + env);

  });

};

navigate question

Hello,
great code base you have here thanks! Just a question. For some reason I can not get navigation working. I have tried many options such as
ng-click=$navigate.go('/pg1')
ng-tap=$navigate.go('/pg1')

I can't seem to figure out what's going wrong as I have it working in another set of code I use. Is it not possible for it to work in chrome browser? (or with ripple extention installed)
example:
test
Doesn't go any anwhere.

Any advice would be greatly appreciated. I'm sure it's something very trivial. Is there another way you need to do it in your app base?

thanks,

Grunt Not copying src

When I run

grunt dev

it doesn't copy the src folder over to www. I probably have a set up issue, but I followed the readme word for word with other than after running the

cordova platform add ios

command I copied the ng-phonegap files (all of them) into app/. I didn't get any errors along the way, what did I miss? I am also getting errors on the page:

Failed to load resource: the server responded with a status of 404 (Not Found) http://0.0.0.0:9001/cordova.js
Uncaught ReferenceError: angular is not defined 0.0.0.0:9001/js/app.js:10
Uncaught ReferenceError: angular is not defined 0.0.0.0:9001/js/config.js:7
Uncaught ReferenceError: angular is not defined 0.0.0.0:9001/js/controllers.js:1
Uncaught ReferenceError: angular is not defined 0.0.0.0:9001/js/pg.js:32

Here is the output from the grunt command:

Running "build:development" (build) task

Running "clean:development" (clean) task
Cleaning tmp...OK
Cleaning app/www...OK

Running "less:development" (less) task
File app/www/css/app.css created: 0 B → 221 B

Running "concat:angular" (concat) task
File tmp/js/config.js created.
File tmp/js/modules.js created.
File tmp/js/controllers.js created.
File tmp/js/directives.js created.
File tmp/js/filters.js created.
File tmp/js/services.js created.

Running "ngmin:routers" (ngmin) task
ngminifying 

Running "ngmin:controllers" (ngmin) task
ngminifying tmp/js/controllers.js

Running "ngmin:directives" (ngmin) task
ngminifying tmp/js/directives.js

Running "ngmin:modules" (ngmin) task
ngminifying tmp/js/modules.js

Running "ngmin:filters" (ngmin) task
ngminifying tmp/js/filters.js

Running "ngmin:services" (ngmin) task
ngminifying tmp/js/services.js

Running "ngmin:vendor" (ngmin) task
ngminifying 

Running "concat:vendor" (concat) task
File tmp/css/vendor.css created.
File tmp/js/vendor.js created.

Running "copy:development" (copy) task
Copied 1 files

Running "copy:config" (copy) task
Copied 2 files

Running "copy:partials" (copy) task
Created 2 directories, copied 1 files

Running "copy:img" (copy) task
Created 1 directories

Running "copy:fonts" (copy) task


Running "copy:vendor" (copy) task
Copied 2 files

Running "copy:tmp_to_build" (copy) task
Created 1 directories, copied 9 files

Running "config:development" (config) task
Generating app/www/config.xml...OK

Running "layouts:development" (layouts) task
Generating app/www/index.html...OK

Running "connect:server" (connect) task
Started connect web server on http://0.0.0.0:9001

Running "watch" task
Waiting...

phonegap.js is missing

I'm getting the following error. How can I fix it?

Failed to load resource: the server responded with a status of 404 (Not Found) 
phonegap.js

ngTouch problem

When I use "ng-click" it doesn't work on the device (works on the web).
Only when I remove 'ngTouch' from the app's modules it works.
Am I missing anything ?

missing command in the README file

missing command in the section below...

Installing Dev Dependencies

After you've created a PhoneGap project, navigate to the folder and run the following command:

(missing command here)

grunt dev boots to port 9001

I know I can change that, or just visit port 9001, but /www/index.html is not mapped correctly either, and cordova.js is not found.

Thoughts?

phonegap run ios show different result than server

This is definitely an issue with configuration on my end, but while I can see the "Hello World" through my server, when I run phonegap build ios and phonegap run ios I just get a blank screen in the IOS simulator.

Is there an additional configuration step that I need to do to get the phone build to reflect the server?

Thanks!

edit: I'd add a Question label if possible. Sorry about the terrible title as well.

Is there a reason why html2js is not used?

I came across this looking at ng-boilerplate https://github.com/ngbp/ng-boilerplate, where it is used very nicely. Also the approach of handling all module files in one folder makes a lot of sense to me.

Right now I'm trying to adopt this into ng-phonegap and test in different phonegap scenarios, could make a pull request, if it works and you like it.

cheers

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.