├── .gitattributes ├── www ├── robots.txt ├── .bowerrc ├── favicon.ico ├── images │ └── css3-645x250.jpg ├── manifest.mobile.json ├── views │ ├── main.html │ ├── about.html │ ├── offline.html │ ├── dialog.html │ ├── settings.html │ ├── profile.html │ ├── nav.html │ ├── sidenav.html │ └── content.html ├── scripts │ ├── app.js │ └── controllers │ │ ├── main_test.js │ │ └── main.js ├── bower.json ├── background.js ├── manifest.json ├── styles │ └── main.css ├── index.html └── 404.html ├── .bowerrc ├── platforms └── .gitignore ├── plugins └── .gitignore ├── .gitignore ├── docs └── images │ └── ChromeExtensionScreenshot.png ├── .travis.yml ├── hooks ├── before_prepare │ └── cca-pre-prepare.js └── README.md ├── bower.json ├── .editorconfig ├── initializePlugins.sh ├── config.xml ├── package.json ├── karma-e2e.conf.js ├── karma.conf.js ├── README.md └── Gruntfile.js /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /www/robots.txt: -------------------------------------------------------------------------------- 1 | # robotstxt.org 2 | 3 | User-agent: * 4 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "www/bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /www/.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /www/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/infomofo/chrome-angular-md-template/HEAD/www/favicon.ico -------------------------------------------------------------------------------- /platforms/.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore everything in this directory 2 | * 3 | # Except this file 4 | !.gitignore 5 | -------------------------------------------------------------------------------- /plugins/.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore everything in this directory 2 | * 3 | # Except this file 4 | !.gitignore 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | dist 4 | .tmp 5 | www/bower_components 6 | platforms/* 7 | plugins/* 8 | -------------------------------------------------------------------------------- /www/images/css3-645x250.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/infomofo/chrome-angular-md-template/HEAD/www/images/css3-645x250.jpg -------------------------------------------------------------------------------- /www/manifest.mobile.json: -------------------------------------------------------------------------------- 1 | { 2 | "packageId": "com.your.company.HelloWorld2", 3 | "versionCode": 1, 4 | "CFBundleVersion": '1.1.1', 5 | } 6 | -------------------------------------------------------------------------------- /docs/images/ChromeExtensionScreenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/infomofo/chrome-angular-md-template/HEAD/docs/images/ChromeExtensionScreenshot.png -------------------------------------------------------------------------------- /www/views/main.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | -------------------------------------------------------------------------------- /www/scripts/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('genericChromeMdApp',['ngMaterial']). 4 | run(function() { 5 | FastClick.attach(document.body); 6 | }); 7 | -------------------------------------------------------------------------------- /www/views/about.html: -------------------------------------------------------------------------------- 1 |
2 |
Generic Mobile Application
3 |
4 | Version 0.0.1 5 |
6 |
-------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | before_script: 2 | - npm install -g bower 3 | - echo -e "Host github.com\n\tStrictHostKeyChecking no\n" >> ~/.ssh/config 4 | - bower install -f 5 | 6 | language: node_js 7 | node_js: 0.10 8 | -------------------------------------------------------------------------------- /www/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "generic-chrome-md-app", 3 | "version": "0.0.0", 4 | "dependencies": { 5 | "angular": "^1.3.x", 6 | "angular-animate": "^1.3.x", 7 | "angular-route": "^1.3.x" 8 | }, 9 | "devDependencies": {}, 10 | "resolutions": { 11 | "angular": "^1.3.x", 12 | "angular-route": "^1.3.x" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /www/views/offline.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | You are offline. Some services, such as authentication, checkin, and notifications will be unavailable until you have an internet connection. 7 |
-------------------------------------------------------------------------------- /www/background.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Listens for the app launching then creates the window. 3 | * Ignores the provided window size. 4 | * 5 | * @see http://developer.chrome.com/trunk/apps/app.window.html 6 | */ 7 | chrome.app.runtime.onLaunched.addListener(function() { 8 | chrome.app.window.create('index.html', { 9 | width: 320, 10 | height: 550 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /www/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Generic Angular Chrome Material Design App", 3 | "description": "A Generic Chrome Angular App Demonstrating Material Design", 4 | "manifest_version": 2, 5 | "version": "0.0.1", 6 | "offline_enabled": true, 7 | "app": { 8 | "background": { 9 | "scripts": ["background.js"] 10 | } 11 | }, 12 | "permissions": [ 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /www/views/dialog.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 | 6 |
7 |
8 |
9 | Okay 10 |
11 | 12 | -------------------------------------------------------------------------------- /www/views/settings.html: -------------------------------------------------------------------------------- 1 |
2 |
Settings
3 |
4 |
ONOFF
5 |
6 |
7 | -------------------------------------------------------------------------------- /hooks/before_prepare/cca-pre-prepare.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | var child_process = require("child_process"); 3 | var fs = require("fs"); 4 | var isWin = process.platform.slice(0, 3) === "win"; 5 | var cmd = isWin ? "cca.cmd" : "cca"; 6 | if (!isWin && fs.existsSync(cmd)) { cmd = "./" + cmd } 7 | var p = child_process.spawn(cmd, ["pre-prepare"], { stdio:"inherit" }); 8 | p.on("close", function(code) { process.exit(code); }); -------------------------------------------------------------------------------- /www/views/profile.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | 6 |
7 |

User Profile

8 |
9 |
10 |
11 | 12 |

13 | 14 |

-------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "generic-chrome-md-app", 3 | "version": "0.0.0", 4 | "dependencies": { 5 | "angular": "^1.3.x", 6 | "angular-animate": "^1.3.x", 7 | "angular-route": "^1.3.x", 8 | "bootstrap": "~3.2.0", 9 | "font-awesome": "~4.1.0", 10 | "fastclick": "~1.0.2", 11 | "angular-material": "~0.0.2" 12 | }, 13 | "devDependencies": { 14 | "angular-mocks": "~1.2.24" 15 | }, 16 | "resolutions": { 17 | "angular": "1.3.0-rc.1" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # Change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # We recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | -------------------------------------------------------------------------------- /www/views/nav.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | My App's Title 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /www/views/sidenav.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Sidenav Left

5 | 6 | 7 | 8 | Close Sidenav Left 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /initializePlugins.sh: -------------------------------------------------------------------------------- 1 | cca plugin add org.apache.cordova.file 2 | cca plugin add org.apache.cordova.inappbrowser 3 | cca plugin add org.apache.cordova.keyboard 4 | cca plugin add org.apache.cordova.network-information 5 | cca plugin add org.apache.cordova.statusbar 6 | cca plugin add org.chromium.bootstrap 7 | cca plugin add org.chromium.common 8 | cca plugin add org.chromium.i18n 9 | cca plugin add org.chromium.navigation 10 | cca plugin add org.chromium.polyfill.CustomEvent 11 | cca plugin add org.chromium.polyfill.blob_constructor 12 | cca plugin add org.chromium.polyfill.xhr_features 13 | cca plugin add org.chromium.runtime 14 | cca plugin add org.chromium.storage 15 | -------------------------------------------------------------------------------- /www/styles/main.css: -------------------------------------------------------------------------------- 1 | /* Space out content a bit */ 2 | .body { 3 | margin-top:60px; 4 | } 5 | 6 | .menu-item { 7 | padding: 15px; 8 | width: 100%; 9 | border-bottom: 1px solid #eee; 10 | text-overflow: ellipsis; 11 | } 12 | 13 | 14 | section { 15 | background: #f7f7f7; 16 | border-radius: 3px; 17 | text-align: center; 18 | margin: 1em; 19 | position: relative !important; 20 | padding-bottom: 10px; 21 | } 22 | material-content { 23 | margin-right: 7px; 24 | } 25 | section material-button, 26 | section .material-button { 27 | display: block; 28 | width: 10em; 29 | margin: 1em; 30 | line-height: 25px; 31 | } 32 | .label { 33 | position: absolute; 34 | bottom: 5px; 35 | left: 7px; 36 | color: #ccc; 37 | font-size: 14px; 38 | } -------------------------------------------------------------------------------- /www/scripts/controllers/main_test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | describe('MainCtrl', function(){ 4 | var scope;//we'll use these in our tests 5 | 6 | //mock Application to allow us to inject our own dependencies 7 | beforeEach(angular.mock.module('genericChromeMdApp')); 8 | //mock the controller for the same reason and include $rootScope and $controller 9 | beforeEach(angular.mock.inject(function($rootScope, $controller){ 10 | //create an empty scope 11 | scope = $rootScope.$new(); 12 | //declare the controller and inject our empty scope 13 | $controller('MainCtrl', {$scope: scope}); 14 | })); 15 | 16 | // tests start here 17 | it('should have data.cb1 be truthy', function(){ 18 | expect(scope.data.cb1).toBe(true); 19 | }); 20 | }); -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Generic Angular Chrome Material Design App 4 | A Generic Chrome Angular App Demonstrating Material Design 5 | Author name and email 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chrome-angular-md-template", 3 | "version": "0.0.0", 4 | "dependencies": {}, 5 | "devDependencies": { 6 | "ini": "1.2.0", 7 | "karma": "0.12.23", 8 | "karma-cli": "0.0.4", 9 | "karma-jasmine": "0.1.5", 10 | "karma-phantomjs-launcher": "0.1.4", 11 | "mkdirp": "0.5.0" 12 | }, 13 | "scripts": { 14 | "test": "karma start --single-run" 15 | }, 16 | "description": "Generic Chrome Mobile Angular Application with Material Design", 17 | "repository": { 18 | "type": "git", 19 | "url": "https://github.com/infomofo/chrome-angular-md-template.git" 20 | }, 21 | "keywords": [ 22 | "chrome", 23 | "angular", 24 | "material", 25 | "design", 26 | "cordova" 27 | ], 28 | "author": "will@infomofo.com", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/infomofo/chrome-angular-md-template/issues" 32 | }, 33 | "homepage": "https://github.com/infomofo/chrome-angular-md-template" 34 | } 35 | -------------------------------------------------------------------------------- /karma-e2e.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // http://karma-runner.github.io/0.10/config/configuration-file.html 3 | 4 | module.exports = function(config) { 5 | config.set({ 6 | // base path, that will be used to resolve files and exclude 7 | basePath: '', 8 | 9 | // testing framework to use (jasmine/mocha/qunit/...) 10 | frameworks: ['ng-scenario'], 11 | 12 | // list of files / patterns to load in the browser 13 | files: [ 14 | 'test/e2e/**/*.js' 15 | ], 16 | 17 | // list of files / patterns to exclude 18 | exclude: [], 19 | 20 | // web server port 21 | port: 8080, 22 | 23 | // level of logging 24 | // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG 25 | logLevel: config.LOG_INFO, 26 | 27 | 28 | // enable / disable watching file and executing tests whenever any file changes 29 | autoWatch: false, 30 | 31 | 32 | // Start these browsers, currently available: 33 | // - Chrome 34 | // - ChromeCanary 35 | // - Firefox 36 | // - Opera 37 | // - Safari (only Mac) 38 | // - PhantomJS 39 | // - IE (only Windows) 40 | browsers: ['Chrome'], 41 | 42 | 43 | // Continuous Integration mode 44 | // if true, it capture browsers, run tests and exit 45 | singleRun: false 46 | 47 | // Uncomment the following lines if you are using grunt's server to run the tests 48 | // proxies: { 49 | // '/': 'http://localhost:9000/' 50 | // }, 51 | // URL root prevent conflicts with the site root 52 | // urlRoot: '_karma_' 53 | }); 54 | }; 55 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // http://karma-runner.github.io/0.10/config/configuration-file.html 3 | 4 | module.exports = function(config) { 5 | config.set({ 6 | // base path, that will be used to resolve files and exclude 7 | basePath: '', 8 | 9 | // testing framework to use (jasmine/mocha/qunit/...) 10 | frameworks: ['jasmine'], 11 | 12 | // list of files / patterns to load in the browser 13 | files: [ 14 | 'www/bower_components/angular/angular.js', 15 | 'www/bower_components/angular-mocks/angular-mocks.js', 16 | 'www/bower_components/angular-material/angular-material.min.js', 17 | 'www/bower_components/angular-animate/angular-animate.min.js', 18 | 'www/bower_components/fastclick/lib/fastclick.js', 19 | 'www/scripts/*.js', 20 | 'www/scripts/**/*.js', 21 | 'test/mock/**/*.js', 22 | 'test/spec/**/*.js' 23 | ], 24 | 25 | // list of files / patterns to exclude 26 | exclude: [], 27 | 28 | // web server port 29 | port: 8080, 30 | 31 | // level of logging 32 | // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG 33 | logLevel: config.LOG_INFO, 34 | 35 | 36 | // enable / disable watching file and executing tests whenever any file changes 37 | autoWatch: false, 38 | 39 | 40 | // Start these browsers, currently available: 41 | // - Chrome 42 | // - ChromeCanary 43 | // - Firefox 44 | // - Opera 45 | // - Safari (only Mac) 46 | // - PhantomJS 47 | // - IE (only Windows) 48 | browsers: ['PhantomJS'], 49 | 50 | 51 | // Continuous Integration mode 52 | // if true, it capture browsers, run tests and exit 53 | singleRun: false 54 | }); 55 | }; 56 | -------------------------------------------------------------------------------- /www/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 31 | 32 | 33 |
34 | 35 | 36 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /www/scripts/controllers/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('genericChromeMdApp') 4 | .controller('MainCtrl', function ($scope, $timeout, $materialSidenav, 5 | $materialToast, $animate, $materialDialog) { 6 | $scope.toggleMenu = function() { 7 | $timeout(function() { 8 | $materialSidenav('left').toggle(); 9 | }); 10 | }; 11 | 12 | $scope.toastIt = function() { 13 | $materialToast({ 14 | template: 'Hello!', 15 | duration: 3000 16 | }); 17 | }; 18 | 19 | $scope.dialog = function(e) { 20 | $materialDialog({ 21 | templateUrl: 'views/dialog.html', 22 | targetEvent: e, 23 | controller: ['$scope', '$hideDialog', function($scope, $hideDialog) { 24 | $scope.close = function() { 25 | $hideDialog(); 26 | }; 27 | }] 28 | }); 29 | }; 30 | 31 | $scope.todos = [ 32 | { 33 | face : '/img/list/60.jpeg', 34 | what: 'Brunch this weekend?', 35 | who: 'Min Li Chan', 36 | when: '3:08PM', 37 | notes: " I'll be in your neighborhood doing errands" 38 | }, 39 | { 40 | face : '/img/list/60.jpeg', 41 | what: 'Brunch this weekend?', 42 | who: 'Min Li Chan', 43 | when: '3:08PM', 44 | notes: " I'll be in your neighborhood doing errands" 45 | }, 46 | { 47 | face : '/img/list/60.jpeg', 48 | what: 'Brunch this weekend?', 49 | who: 'Min Li Chan', 50 | when: '3:08PM', 51 | notes: " I'll be in your neighborhood doing errands" 52 | }, 53 | { 54 | face : '/img/list/60.jpeg', 55 | what: 'Brunch this weekend?', 56 | who: 'Min Li Chan', 57 | when: '3:08PM', 58 | notes: " I'll be in your neighborhood doing errands" 59 | }, 60 | { 61 | face : '/img/list/60.jpeg', 62 | what: 'Brunch this weekend?', 63 | who: 'Min Li Chan', 64 | when: '3:08PM', 65 | notes: " I'll be in your neighborhood doing errands" 66 | }, 67 | ]; 68 | 69 | $scope.data = { 70 | group1 : '2', 71 | group2 : '6' 72 | }; 73 | 74 | $scope.data.cb1 = true; 75 | $scope.data.cb2 = false; 76 | 77 | $scope.selectedIndex = 0; 78 | }) 79 | .controller('LeftCtrl', function($scope, $timeout, $materialSidenav) { 80 | var nav; 81 | $timeout(function() { 82 | nav = $materialSidenav('left'); 83 | }); 84 | $scope.close = function() { 85 | nav.close(); 86 | }; 87 | }) 88 | .controller('ToastCtrl', function($scope, $hideToast) { 89 | $scope.closeToast = function() { 90 | $hideToast(); 91 | }; 92 | }) 93 | .directive('ig', function() { 94 | return { 95 | restrict: 'E', 96 | replace: true, 97 | scope: { 98 | fid: '@' 99 | }, 100 | template: 101 | '' + 102 | '' + 103 | '' + 104 | '' 105 | }; 106 | }); -------------------------------------------------------------------------------- /hooks/README.md: -------------------------------------------------------------------------------- 1 | 21 | # Cordova Hooks 22 | 23 | This directory may contains scripts used to customize cordova commands. This 24 | directory used to exist at `.cordova/hooks`, but has now been moved to the 25 | project root. Any scripts you add to these directories will be executed before 26 | and after the commands corresponding to the directory name. Useful for 27 | integrating your own build systems or integrating with version control systems. 28 | 29 | __Remember__: Make your scripts executable. 30 | 31 | ## Hook Directories 32 | The following subdirectories will be used for hooks: 33 | 34 | after_build/ 35 | after_compile/ 36 | after_docs/ 37 | after_emulate/ 38 | after_platform_add/ 39 | after_platform_rm/ 40 | after_platform_ls/ 41 | after_plugin_add/ 42 | after_plugin_ls/ 43 | after_plugin_rm/ 44 | after_plugin_search/ 45 | after_prepare/ 46 | after_run/ 47 | after_serve/ 48 | before_build/ 49 | before_compile/ 50 | before_docs/ 51 | before_emulate/ 52 | before_platform_add/ 53 | before_platform_rm/ 54 | before_platform_ls/ 55 | before_plugin_add/ 56 | before_plugin_ls/ 57 | before_plugin_rm/ 58 | before_plugin_search/ 59 | before_prepare/ 60 | before_run/ 61 | before_serve/ 62 | pre_package/ <-- Windows 8 and Windows Phone only. 63 | 64 | ## Script Interface 65 | 66 | All scripts are run from the project's root directory and have the root directory passes as the first argument. All other options are passed to the script using environment variables: 67 | 68 | * CORDOVA_VERSION - The version of the Cordova-CLI. 69 | * CORDOVA_PLATFORMS - Comma separated list of platforms that the command applies to (e.g.: android, ios). 70 | * CORDOVA_PLUGINS - Comma separated list of plugin IDs that the command applies to (e.g.: org.apache.cordova.file, org.apache.cordova.file-transfer) 71 | * CORDOVA_HOOK - Path to the hook that is being executed. 72 | * CORDOVA_CMDLINE - The exact command-line arguments passed to cordova (e.g.: cordova run ios --emulate) 73 | 74 | If a script returns a non-zero exit code, then the parent cordova command will be aborted. 75 | 76 | 77 | ## Writing hooks 78 | 79 | We highly recommend writting your hooks using Node.js so that they are 80 | cross-platform. Some good examples are shown here: 81 | 82 | [http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/](http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/) 83 | 84 | -------------------------------------------------------------------------------- /www/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Not Found :( 6 | 141 | 142 | 143 |
144 |

Not found :(

145 |

Sorry, but the page you were trying to view does not exist.

146 |

It looks like this was the result of either:

147 | 151 | 154 | 155 |
156 | 157 | 158 | -------------------------------------------------------------------------------- /www/views/content.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Toast 4 | 5 |
6 | Button 7 |
8 | 9 | 10 |
11 | 12 | Open a Dialog 13 | 14 |
15 | 16 | 17 | 18 |
19 | 20 | 21 |
22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
45 | {{item.who}} 46 |
47 |
48 |

{{item.what}}

49 |

{{item.who}}

50 |

51 | {{item.notes}} 52 |

53 |
54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | Checkbox 1: {{ data.cb1 }} 64 | 65 | 66 | 67 | Checkbox 2: {{ data.cb2 }} 68 | 69 | 70 | 71 | 72 | 73 | 74 | Label 1 75 | 76 | 77 | 78 | Label 2 79 | 80 | 81 | 82 | Label 3 83 | 84 | 85 | 86 | 87 | 88 | 89 |

90 | 91 | Qui utamur tacimates quaestio ad, quod graece omnium ius ut. Pri ut vero debitis interpretaris, qui cu mentitum adipiscing disputationi. Voluptatum mediocritatem quo ut. Fabulas dolorem ei has, quem molestie persequeris et sit. 92 |

93 |

94 | Fastidii efficiendi no vis, autem aeterno malorum an quo. Per et meis necessitatibus, ex eam option bonorum dissentiet. Usu ei nobis partem constituto, sensibus mediocrem in est. Eu illum efficiantur his. Ex tota erant aperiri vis, altera nominati an sea, sed et totao nostro. 95 |

96 |

97 | 98 | Id utinam nullam voluptaria cum, meis novum doming no eum, mei ex nusquam eligendi offendit. Eu sit movet praesent persequeris, dolores lobortis ullamcorper eu vel, ea vis possit feugiat. Quo ut dictas suscipit contentiones, an quis quodsi sanctus qui. Duis iudicabit an est, te quot nonumy putant mei. Quo insolens interpretaris et, per ex illud albucius mentitum. 99 |

100 |

101 | 102 | Eu labores invidunt eloquentiam vis. Usu vitae fastidii expetendis id. Modus soleat prompta eos ad, ea mea dolore ubique definitiones, pri no lorem audire. Vivendo lucilius pro ut, at sumo quidam legimus cum. Mentitum incorrupte ex vis. 103 |

104 |

105 | 106 | Eu labores invidunt eloquentiam vis. Usu vitae fastidii expetendis id. Modus soleat prompta eos ad, ea mea dolore ubique definitiones, pri no lorem audire. Vivendo lucilius pro ut, at sumo quidam legimus cum. Mentitum incorrupte ex vis. 107 |

108 |

109 | 110 | Eu labores invidunt eloquentiam vis. Usu vitae fastidii expetendis id. Modus soleat prompta eos ad, ea mea dolore ubique definitiones, pri no lorem audire. Vivendo lucilius pro ut, at sumo quidam legimus cum. Mentitum incorrupte ex vis. 111 |

112 | 113 | 114 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Generic Chrome Mobile Angular Application with Material Design 2 | ============================================================== 3 | 4 | This is a generic app framework that can run as a standalone webpage, a chrome 5 | extension, an android app, or an ios app. 6 | 7 | It will use the tools provided by angular's 8 | [material-design](material.angularjs.org) package to provide 9 | basic application scaffolding. 10 | 11 | ![A Generic Chrome App running as a Chrome 12 | Extension](docs/images/ChromeExtensionScreenshot.png) 13 | 14 | This is a very early work in progress. 15 | 16 | The material-design repo provided by angular is now an official bower distribution. 17 | 18 | Build Status 19 | ------------ 20 | 21 | [![Build Status](https://travis-ci.org/infomofo/chrome-angular-md-template.svg?branch=master)](https://travis-ci.org/infomofo/chrome-angular-md-template) 22 | 23 | Features 24 | -------- 25 | 26 | In addition to basic application scaffolding, this repo will provide various 27 | common mobile application behaviors, as dictated by 28 | [material design](http://www.google.com/design/spec/material-design/introduction.html). 29 | 30 | How to use this repo 31 | -------------------- 32 | 33 | At some point this will be a yeoman template or something, until then you can: 34 | 35 | 1. Clone this repo and delete the .git directory 36 | 2. Update the application name in www/manifest.mobile.json 37 | 3. Update the application name in bower.json and package.json 38 | 4. Follow the steps below to get the boilerplate app working. 39 | 40 | First time Setup 41 | ---------------- 42 | 43 | ### Setting up tools 44 | 45 | 1. run ``npm install -g yo`` to install yo, grunt-cli and bower 46 | 2. run ``npm install -g cca`` to install the chrome mobile utility 47 | 3. run ``export PATH=/usr/local/share/npm/bin:$PATH`` to ensure command line access to modules. 48 | 4. run ``cca checkenv`` to 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. 49 | 5. run ``npm install -g ios-deploy`` 50 | 6. run ``npm install -g ios-sim`` 51 | 52 | ### Setting up the repo after cloning for the first time 53 | 54 | 1. run ``npm install`` to initialize node modules 55 | 2. run ``bower install`` to initialize bower dependencies 56 | 3. run ``cca pre-prepare`` to initialize cordova plugins 57 | 4. run ``cca platform add ios`` to add ios platform to project 58 | 5. run ``./initializePlugins.sh`` to initialize plugins 59 | 60 | 61 | ### Copying settings from chrome extension to android app 62 | 63 | Run this the first time, and any time after you make modifications to the ``www`` directory. 64 | 65 | 1. run ``cca prepare`` to initialize the platforms directory with ios and android applications 66 | 2. run ``./copySplash`` to copy splash screens from ``www/res`` to the platforms directories - this is currently not handled by cordova 67 | 68 | Standalone web app 69 | ------------------ 70 | 71 | ### Running the web application 72 | 73 | 1. grunt serve 74 | 75 | Chrome extension 76 | ---------------- 77 | 78 | The chrome extension is the easiest to modify and debug. 79 | 80 | ### Running the chrome app 81 | 82 | 1. In your chrome browser, enable chrome developer flags at ``chrome://flags`` and enable "Experimental Extension APIs" 83 | 2. Go to Tools -> Extensions 84 | 3. Load Unpacked Extension- navigate to ``./www`` 85 | 86 | ### Debugging the chrome app 87 | 88 | The chrome app can be debugged with the standard "Inspect Element" debugger in a chrome web browser. 89 | 90 | Android 91 | ------- 92 | 93 | ### Running the android app 94 | 95 | The android app can be run in an emulator, which can be installed with brew 96 | 97 | 1. run ``brew install android`` to install the android toolkig 98 | 2. run ``android`` to download packages and set up an avd device. 99 | 100 | To run the android on an emulator or connected device 101 | 102 | 1. Attach an android device in debug mode, or run the android avd emulator. 103 | 2. if you are running on a connected device you can verify first with ``adb devices`` 104 | 2. run ``cca run android`` 105 | 106 | ### Debugging the android app 107 | 108 | TODO 109 | 110 | IOS 111 | --- 112 | 113 | ### Running the ios app 114 | 115 | 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. 116 | 117 | To run on a emulator 118 | 119 | 1. run ``cca emulate ios`` 120 | 121 | To run on a connected device (requires provisioning) 122 | 123 | 1. run ``cca run ios`` 124 | 125 | ### Debugging the ios app 126 | 127 | 1. Run Xcode 128 | 2. Open ``./platforms/ios/*.xcodeproj`` 129 | 3. Click Run 130 | 131 | ### Debugging the ios app in safari 132 | 133 | 1. At the command line run ``defaults write com.apple.Safari IncludeDebugMenu 1`` (you only need to do this once) 134 | 2. Launch the app in the emulator 135 | 3. Launch safari 136 | 4. Connect to the Iphone Simulator in the Develop menu 137 | 138 | Extending the application 139 | ------------------------- 140 | 141 | ### adding new javascript dependencies 142 | 143 | 1. Find a module with ``bower search `` 144 | 2. Install it and save it to your bower.json file with ``bower install --save`` 145 | 146 | ### adding new plugins 147 | 148 | 1. ``cca plugin add --save`` 157 | * **``config.xml``** A config file for cordova. 158 | * **``www/``** All of the actual content of the app is contained in this directory 159 | 160 | * **``index.html``** The skeleton of one-page application mostly just contains javascript and css imports. Very little modifications should be made to this, other than new bower dependencies or css. 161 | * **``manifest.json``** Defines how the chrome app will be packaged, including identifiers, oauth behaviors, permissions, icons, and version name. 162 | * **``background.js``** Defines the behavior of the chrome app, including the landing page, and the window size of the chrome extension (does not affect ios or android). 163 | * **``assets/``** Contains icons that will be used to represent the app 164 | * **``bower_components/``** Contains external javascript and css dependencies brought in by bower.json. Should not be version controlled or modified directly- make all modifications to ``../bower.json`` using ``bower install --save`` 165 | * **``images/``** Contains all packaged images used by the application, i.e. logos. 166 | * **``res/``** Contains resources used by the packaged apps, such as splash screens (TBD). 167 | * **``scripts/``** Contains all angular scripts and javascript objects used by the application 168 | 169 | * **``app.js``** Contains the definition for the main angular app 170 | * **``controllers/``** Contains controllers for various parts of the application 171 | 172 | * **``styles/``** Contains custom stylesheets for the application 173 | * **``main.css``** Common css for the application 174 | * **``nav.css``** Styling related to the top nav 175 | * **``sidenav.css``** Styling related to the side nav 176 | * **``views/``** Contains different screens for the application 177 | 178 | * **``main.html``** The landing page that the user first sees 179 | 180 | ### Files not kept in version control 181 | 182 | * ``platforms/*`` These files are generated by cca prepare 183 | * ``plugins/*`` These files should be generated with cca plugin install as they vary by machine 184 | * ``node_modules/*`` These files are generaetd by npm install 185 | * ``www/bower_components/*`` These files are generated by bower install 186 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | // Generated on 2014-02-14 using generator-angular 0.7.1 2 | 'use strict'; 3 | 4 | // # Globbing 5 | // for performance reasons we're only matching one level down: 6 | // 'test/spec/{,*/}*.js' 7 | // use this if you want to recursively match all subfolders: 8 | // 'test/spec/**/*.js' 9 | 10 | module.exports = function (grunt) { 11 | 12 | // Load grunt tasks automatically 13 | require('load-grunt-tasks')(grunt); 14 | 15 | // Time how long tasks take. Can help when optimizing build times 16 | require('time-grunt')(grunt); 17 | 18 | // Define the configuration for all the tasks 19 | grunt.initConfig({ 20 | 21 | // Project settings 22 | yeoman: { 23 | // configurable paths 24 | app: require('./bower.json').appPath || 'www', 25 | dist: 'dist' 26 | }, 27 | 28 | // Watches files for changes and runs tasks based on the changed files 29 | watch: { 30 | js: { 31 | files: ['<%= yeoman.app %>/scripts/{,*/}*.js'], 32 | tasks: ['newer:jshint:all'], 33 | options: { 34 | livereload: true 35 | } 36 | }, 37 | jsTest: { 38 | files: ['test/spec/{,*/}*.js'], 39 | tasks: ['newer:jshint:test', 'karma'] 40 | }, 41 | styles: { 42 | files: ['<%= yeoman.app %>/styles/{,*/}*.css'], 43 | tasks: ['newer:copy:styles', 'autoprefixer'] 44 | }, 45 | gruntfile: { 46 | files: ['Gruntfile.js'] 47 | }, 48 | livereload: { 49 | options: { 50 | livereload: '<%= connect.options.livereload %>' 51 | }, 52 | files: [ 53 | '<%= yeoman.app %>/{,*/}*.html', 54 | '.tmp/styles/{,*/}*.css', 55 | '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 56 | ] 57 | } 58 | }, 59 | 60 | // The actual grunt server settings 61 | connect: { 62 | options: { 63 | port: 9000, 64 | // Change this to '0.0.0.0' to access the server from outside. 65 | hostname: 'localhost', 66 | livereload: 35729 67 | }, 68 | livereload: { 69 | options: { 70 | open: true, 71 | base: [ 72 | '.tmp', 73 | '<%= yeoman.app %>' 74 | ] 75 | } 76 | }, 77 | test: { 78 | options: { 79 | port: 9001, 80 | base: [ 81 | '.tmp', 82 | 'test', 83 | '<%= yeoman.app %>' 84 | ] 85 | } 86 | }, 87 | dist: { 88 | options: { 89 | base: '<%= yeoman.dist %>' 90 | } 91 | } 92 | }, 93 | 94 | // Make sure code styles are up to par and there are no obvious mistakes 95 | jshint: { 96 | options: { 97 | jshintrc: '.jshintrc', 98 | reporter: require('jshint-stylish') 99 | }, 100 | all: [ 101 | 'Gruntfile.js', 102 | '<%= yeoman.app %>/scripts/{,*/}*.js' 103 | ], 104 | test: { 105 | options: { 106 | jshintrc: 'test/.jshintrc' 107 | }, 108 | src: ['test/spec/{,*/}*.js'] 109 | } 110 | }, 111 | 112 | // Empties folders to start fresh 113 | clean: { 114 | dist: { 115 | files: [{ 116 | dot: true, 117 | src: [ 118 | '.tmp', 119 | '<%= yeoman.dist %>/*', 120 | '!<%= yeoman.dist %>/.git*' 121 | ] 122 | }] 123 | }, 124 | server: '.tmp' 125 | }, 126 | 127 | // Add vendor prefixed styles 128 | autoprefixer: { 129 | options: { 130 | browsers: ['last 1 version'] 131 | }, 132 | dist: { 133 | files: [{ 134 | expand: true, 135 | cwd: '.tmp/styles/', 136 | src: '{,*/}*.css', 137 | dest: '.tmp/styles/' 138 | }] 139 | } 140 | }, 141 | 142 | // Automatically inject Bower components into the app 143 | 'bower-install': { 144 | app: { 145 | html: '<%= yeoman.app %>/index.html', 146 | ignorePath: '<%= yeoman.app %>/' 147 | } 148 | }, 149 | 150 | 151 | 152 | 153 | 154 | // Renames files for browser caching purposes 155 | rev: { 156 | dist: { 157 | files: { 158 | src: [ 159 | '<%= yeoman.dist %>/scripts/{,*/}*.js', 160 | '<%= yeoman.dist %>/styles/{,*/}*.css', 161 | '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', 162 | '<%= yeoman.dist %>/styles/fonts/*' 163 | ] 164 | } 165 | } 166 | }, 167 | 168 | // Reads HTML for usemin blocks to enable smart builds that automatically 169 | // concat, minify and revision files. Creates configurations in memory so 170 | // additional tasks can operate on them 171 | useminPrepare: { 172 | html: '<%= yeoman.app %>/index.html', 173 | options: { 174 | dest: '<%= yeoman.dist %>' 175 | } 176 | }, 177 | 178 | // Performs rewrites based on rev and the useminPrepare configuration 179 | usemin: { 180 | html: ['<%= yeoman.dist %>/{,*/}*.html'], 181 | css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 182 | options: { 183 | assetsDirs: ['<%= yeoman.dist %>'] 184 | } 185 | }, 186 | 187 | // The following *-min tasks produce minified files in the dist folder 188 | imagemin: { 189 | dist: { 190 | files: [{ 191 | expand: true, 192 | cwd: '<%= yeoman.app %>/images', 193 | src: '{,*/}*.{png,jpg,jpeg,gif}', 194 | dest: '<%= yeoman.dist %>/images' 195 | }] 196 | } 197 | }, 198 | svgmin: { 199 | dist: { 200 | files: [{ 201 | expand: true, 202 | cwd: '<%= yeoman.app %>/images', 203 | src: '{,*/}*.svg', 204 | dest: '<%= yeoman.dist %>/images' 205 | }] 206 | } 207 | }, 208 | htmlmin: { 209 | dist: { 210 | options: { 211 | collapseWhitespace: true, 212 | collapseBooleanAttributes: true, 213 | removeCommentsFromCDATA: true, 214 | removeOptionalTags: true 215 | }, 216 | files: [{ 217 | expand: true, 218 | cwd: '<%= yeoman.dist %>', 219 | src: ['*.html', 'views/{,*/}*.html'], 220 | dest: '<%= yeoman.dist %>' 221 | }] 222 | } 223 | }, 224 | 225 | // Allow the use of non-minsafe AngularJS files. Automatically makes it 226 | // minsafe compatible so Uglify does not destroy the ng references 227 | ngmin: { 228 | dist: { 229 | files: [{ 230 | expand: true, 231 | cwd: '.tmp/concat/scripts', 232 | src: '*.js', 233 | dest: '.tmp/concat/scripts' 234 | }] 235 | } 236 | }, 237 | 238 | // Replace Google CDN references 239 | cdnify: { 240 | dist: { 241 | html: ['<%= yeoman.dist %>/*.html'] 242 | } 243 | }, 244 | 245 | // Copies remaining files to places other tasks can use 246 | copy: { 247 | dist: { 248 | files: [{ 249 | expand: true, 250 | dot: true, 251 | cwd: '<%= yeoman.app %>', 252 | dest: '<%= yeoman.dist %>', 253 | src: [ 254 | '*.{ico,png,txt}', 255 | '.htaccess', 256 | '*.html', 257 | 'views/{,*/}*.html', 258 | 'bower_components/**/*', 259 | 'images/{,*/}*.{webp}', 260 | 'fonts/*' 261 | ] 262 | }, { 263 | expand: true, 264 | cwd: '.tmp/images', 265 | dest: '<%= yeoman.dist %>/images', 266 | src: ['generated/*'] 267 | }] 268 | }, 269 | styles: { 270 | expand: true, 271 | cwd: '<%= yeoman.app %>/styles', 272 | dest: '.tmp/styles/', 273 | src: '{,*/}*.css' 274 | } 275 | }, 276 | 277 | // Run some tasks in parallel to speed up the build process 278 | concurrent: { 279 | server: [ 280 | 'copy:styles' 281 | ], 282 | test: [ 283 | 'copy:styles' 284 | ], 285 | dist: [ 286 | 'copy:styles', 287 | 'imagemin', 288 | 'svgmin' 289 | ] 290 | }, 291 | 292 | // By default, your `index.html`'s will take care of 293 | // minification. These next options are pre-configured if you do not wish 294 | // to use the Usemin blocks. 295 | // cssmin: { 296 | // dist: { 297 | // files: { 298 | // '<%= yeoman.dist %>/styles/main.css': [ 299 | // '.tmp/styles/{,*/}*.css', 300 | // '<%= yeoman.app %>/styles/{,*/}*.css' 301 | // ] 302 | // } 303 | // } 304 | // }, 305 | // uglify: { 306 | // dist: { 307 | // files: { 308 | // '<%= yeoman.dist %>/scripts/scripts.js': [ 309 | // '<%= yeoman.dist %>/scripts/scripts.js' 310 | // ] 311 | // } 312 | // } 313 | // }, 314 | // concat: { 315 | // dist: {} 316 | // }, 317 | 318 | // Test settings 319 | karma: { 320 | unit: { 321 | configFile: 'karma.conf.js', 322 | singleRun: true 323 | } 324 | } 325 | }); 326 | 327 | 328 | grunt.registerTask('serve', function (target) { 329 | if (target === 'dist') { 330 | return grunt.task.run(['build', 'connect:dist:keepalive']); 331 | } 332 | 333 | grunt.task.run([ 334 | 'clean:server', 335 | 'concurrent:server', 336 | 'autoprefixer', 337 | 'connect:livereload', 338 | 'watch' 339 | ]); 340 | }); 341 | 342 | grunt.registerTask('server', function () { 343 | grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); 344 | grunt.task.run(['serve']); 345 | }); 346 | 347 | grunt.registerTask('test', [ 348 | 'clean:server', 349 | 'concurrent:test', 350 | 'autoprefixer', 351 | 'connect:test', 352 | 'karma' 353 | ]); 354 | 355 | grunt.registerTask('build', [ 356 | 'clean:dist', 357 | 'useminPrepare', 358 | 'concurrent:dist', 359 | 'autoprefixer', 360 | 'concat', 361 | 'ngmin', 362 | 'copy:dist', 363 | 'cdnify', 364 | 'cssmin', 365 | 'uglify', 366 | 'rev', 367 | 'usemin', 368 | 'htmlmin' 369 | ]); 370 | 371 | grunt.registerTask('default', [ 372 | 'newer:jshint', 373 | 'test', 374 | 'build' 375 | ]); 376 | }; 377 | --------------------------------------------------------------------------------