calvinl / ng-phonegap Goto Github PK
View Code? Open in Web Editor NEWGrunt workflow for building AngularJS applications on PhoneGap.
License: MIT License
Grunt workflow for building AngularJS applications on PhoneGap.
License: MIT License
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 ?
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?
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);
});
};
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.
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?
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 :)
works great on ios
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.
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...
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
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
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,
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.