Generic Chrome Mobile Angular Application with Material Design
This is a generic app framework that can run as a standalone webpage, a chrome extension, an android app, or an ios app.
It will use the tools provided by angular's material-design package to provide basic application scaffolding.
This is a very early work in progress.
The material-design repo provided by angular is now an official bower distribution.
In addition to basic application scaffolding, this repo will provide various common mobile application behaviors, as dictated by material design.
How to use this repo
At some point this will be a yeoman template or something, until then you can:
- Clone this repo and delete the .git directory
- Update the application name in www/manifest.mobile.json
- Update the application name in bower.json and package.json
- Follow the steps below to get the boilerplate app working.
First time Setup
Setting up tools
npm install -g yoto install yo, grunt-cli and bower
npm install -g ccato install the chrome mobile utility
export PATH=/usr/local/share/npm/bin:$PATHto ensure command line access to modules.
cca checkenvto ensure your machine is set up for mobile development. If not this will instruct you on how to get Xcode and android development environments initialized for use with cca.
npm install -g ios-deploy
npm install -g ios-sim
Setting up the repo after cloning for the first time
npm installto initialize node modules
bower installto initialize bower dependencies
cca pre-prepareto initialize cordova plugins
cca platform add iosto add ios platform to project
./initializePlugins.shto initialize plugins
Copying settings from chrome extension to android app
Run this the first time, and any time after you make modifications to the
cca prepareto initialize the platforms directory with ios and android applications
./copySplashto copy splash screens from
www/resto the platforms directories - this is currently not handled by cordova
Standalone web app
Running the web application
- grunt serve
The chrome extension is the easiest to modify and debug.
Running the chrome app
- In your chrome browser, enable chrome developer flags at
chrome://flagsand enable "Experimental Extension APIs"
- Go to Tools -> Extensions
- Load Unpacked Extension- navigate to
Debugging the chrome app
The chrome app can be debugged with the standard "Inspect Element" debugger in a chrome web browser.
Running the android app
The android app can be run in an emulator, which can be installed with brew
brew install androidto install the android toolkig
androidto download packages and set up an avd device.
To run the android on an emulator or connected device
- Attach an android device in debug mode, or run the android avd emulator.
- if you are running on a connected device you can verify first with
cca run android
Debugging the android app
Running the ios app
The ios app can be run in an emulator, which can be installed via xcode. It can only be installed on devices with a valid provisioning profile, which requires a paid apple developer account.
To run on a emulator
cca emulate ios
To run on a connected device (requires provisioning)
cca run ios
Debugging the ios app
- Run Xcode
- Click Run
Debugging the ios app in safari
- At the command line run
defaults write com.apple.Safari IncludeDebugMenu 1(you only need to do this once)
- Launch the app in the emulator
- Launch safari
- Connect to the Iphone Simulator in the Develop menu
Extending the application
- Find a module with
bower search <search term>
- Install it and save it to your bower.json file with
adding new plugins
cca plugin add <plugin name
bower.jsonA list of all json dependencies. Do not modify directly. Add new dependencies with
bower install <dependency name> --save
config.xmlA config file for cordova.
www/All of the actual content of the app is contained in this directory
manifest.jsonDefines how the chrome app will be packaged, including identifiers, oauth behaviors, permissions, icons, and version name.
background.jsDefines the behavior of the chrome app, including the landing page, and the window size of the chrome extension (does not affect ios or android).
assets/Contains icons that will be used to represent the app
bower install --save
images/Contains all packaged images used by the application, i.e. logos.
res/Contains resources used by the packaged apps, such as splash screens (TBD).
app.jsContains the definition for the main angular app
controllers/Contains controllers for various parts of the application
styles/Contains custom stylesheets for the application
main.cssCommon css for the application
nav.cssStyling related to the top nav
sidenav.cssStyling related to the side nav
views/Contains different screens for the application
main.htmlThe landing page that the user first sees
Files not kept in version control
platforms/*These files are generated by cca prepare
plugins/*These files should be generated with cca plugin install as they vary by machine
node_modules/*These files are generaetd by npm install
www/bower_components/*These files are generated by bower install