Skip to content

Instantly share code, notes, and snippets.

@olore
Last active December 18, 2015 16:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save olore/5811655 to your computer and use it in GitHub Desktop.
Save olore/5811655 to your computer and use it in GitHub Desktop.
AngularJS 1.1.x + Cordova
# This is how I got AngularJS 1.1.x and Cordova working together
#
sudo npm install -g grunt cordova
cordova create angular-app
cd angular-app
cordova platform add android # create android files
cordova ripple android # see the hello world phonegap application
npm install yeoman generator-angular
yo angular
Would you like to include Twitter Bootstrap? (Y/n) n
If so, would you like to use Twitter Bootstrap for Compass (as opposed to vanilla CSS)? (Y/n) n
Would you like to include angular-resource.js? (Y/n) n
Would you like to include angular-cookies.js? (Y/n) n
Would you like to include angular-sanitize.js? (Y/n) n
mv app/* www/
rm -rf app # don't care about .buildignore or .htaccess
modify .bowerrc to use www/ instead of app/
{
"directory": "www/components"
}
bower install
add to www/index.html
<script src="cordova.js"></script>
modify Gruntfile.js - change 'app' to 'www'
var yeomanConfig = {
app: 'www', //'app',
dist: 'dist'
};
cordova ripple android # see the hello world angular application (you will get ripple error because deviceready didn't fire)
mv www/js/index.js www/scripts/index.js
Add to www/index.html
<script src="scripts/index.js"></script>
# Cleanup
rmdir www/js/
rm -rf www/css/
rm -rf www/img/
rm -rf www/spec* #we'll do our tests in test/spec/
rm www/404.html
rm www/robots.txt
cordova ripple android # see the hello world angular application working
# Make generator-angular (ie 'yo angular:controller foo') put files into www/ instead of app/
modify component.json, add: # don't rename to bower.json as generator-angular is looking for component.json
appPath: "www",
# Update angular to 1.1.x
modify component.json
replace angular line with
"angular" : "PatternConsulting/bower-angular",
bower uninstall angular-mocks --save-dev # included in alternate angular repo
bower uninstall angular-scenario --save-dev # included in alternate angular repo
bower install
# Replace any references to components/angular-*/angular-*.js with components/angular/angular-*.js
# Note - if you followed steps you won't have any of these in index.html
# But if you are like me & sometimes skip steps, you'll want to fix these up now
Example:
<script src="components/angular-mocks/angular-mocks.js"></script>
becomes
<script src="components/angular/angular-mocks.js"></script>
Modify karma.conf.js
Change references of 'app' to 'www'
Change
'app/components/angular-mocks/angular-mocks.js',
to
'www/components/angular/angular-mocks.js',
At this point 'grunt test' and 'cordova ripple android' should both work.
# Things to git/svn ignore
platform/
node_modules
At the time of this writing, these were the versions that installed
grunt-cli 0.1.9
node 0.10.10
npm 1.2.25
cordova 2.8.17
yeoman 1.0.0-beta.6
generator-angular 0.2.2
angular 1.1.5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment