- Yeoman Generator for Ionic
- Yeoman Generator for Ionic
- TODO:
- Books
- Setup (Walk-through of what's happening behind the scenes!)
# create new folder for app and open it
mkdir my-ionic-project && cd $_
# clear npm cache. more info @ NPM config
rm -rf ~/.npm
npm clear cache
# install generator-ionic globally
npm install -g generator-ionic
# installs:
- Lo-Dash.js (Utility Library. Superset of Underscore.js)
- Chalk (Package for Terminal string styling)
- MOUT { Modular JS Utility Collection. Use whole package or individual Modules (Helper Methods) }, includes Dependencies:
- Commander.js (Node.js Full Command-Line Interface Utility)
- Handlebars (Semantic templates)
- Istanbul (JS code coverage)
- Jasmine-Node (Node.js integration of Jasmine Spec Framework)
- JSHint (JS error detection)
- MDOC (Markdown based documentation generator)
- Nodefy { convert AMD JS modules (RequireJS define(..) into Node.js format (module.exports...) }
- Regenerate (JS RegEx generator
- RequireJS { Node.js Adapter for RequireJS (loading AMD Modules) incl. Optimiser (Minifies Scripts, CSS Inlined w/out Comments) }
- RimRaf { Node.js deep Deletion Module (rm -rf) }
- Rocambole { Recursive walk and manipulate EcmaScript Abstract Syntax Tree (AST) to Compile code (i.e. Rocambole Visualiser) }
- Yeoman-Generator { Rails-inspired Generator System to Scaffold apps }, adds Additional Dependencies:
-
Dargs { Spawn CLTs by Converting Options Object into Command-Line (CL) Args }
- Debug { Node.js Debugging Utility }
- Mime { Mime-type Mapping API includes Node.js and Apache Project extensions }
- Text-table { Text Tables borderless and aligned to print to STDOUT }
- Async (Node.js Utility Module with Functions for Asynchronous JS)
- Mkdirp (Node.js Recursively create Nested Directories)
- Isbinaryfile (Node.js check if file is binary)
- Shelljs (Node.js portable Unix Shell commands)
- Iconv-lite (Convert character encoding/decoding in JS)
- Glob (Pattern Matching search walking either Sync/Async)
- Findup-sync (Pattern Matching first File found in current or nearest Ancestor Directory)
- File-utils { User CLT Sync File and Directory Utils (do not use on Node.js server as is equivalent to Grunt.file) }
- Cheerio (Lean Server implementation of core jQuery)
- Request {Node.js HTTP and HTTPS Request Client (Forwarding, File Streaming, Piping, Proxies, Unix Sockets, Form Data URL Encoding, HTTP Auth, OAuth Signing, Custom HTTP Headers) }
- Inquirer { Node.js Collection of Common Interactive CLIs (lightweight form of Commander.js }
- Cordova { Platform to build Native Mobile apps using HTML, CSS, JS }, adds Additional Dependencies:
-
Q { Tool for creating Promises in JS. then method resolves handling eventual return value (fulfillment) or thrown exception (rejection) asynchronously and mitigates the Pyramid of Doom } UncommonJS Promises Manager
- Semver (NPMs semantic parser of package versions in package.json file)
- Underscore (Helper Library for JS is Underscore.js)
- Plist-with-patches (Node.js parsing of Property List files (.Plist) or string into native JS object with Pull requests applied)
- Optimist (lightweight Option Parsing with Argv Hash)
- Xcode (Node.js parser of xcodeproj/project.pbxproj files)
- Tar (compression)
- Elementtree { Module for XML serialization (creation) and parsing }
- Plugman (Install/Uninstall Cordova plugins)
yo ionic
# installs:
- Plugins from Apache Cordova Project:
- Cordova Globalization Plugin (User Locale, Language, and Timezone info and operations)
- Cordova Device Plugin { Device object in global scope after deviceready event (Hardware and Software) }
- Cordova Console Plugin { Additional functionality for console.log() on devices }
- Cordova Network Information Plugin { Information about Devices Cell, Wifi, and Internet connection }
- Cordova Splashscreen Plugin { Display/Hide Device Splashscreen at Launch }
- Battery Status
- Status Bar
- Device Motion (Access device Accelerometer)
- Device Orientation (Access device Compass)
- Geolocation
- Media Capture (Access device Audio, Video, and Image Capture)
- Media (Record and Playback Audio files)
- File (Read/Write devices files with API)
- File Transfer (Upload/Download files)
- Dialogs (Access native Dialog UI events)
- Vibration (Vibrate device)
- Contacts (Access devices Contacts database)
- InAppBrowser (Web browser view activated by window.open() or <a target="_blank">)
# ionic starter blank creates:
- app/scripts/app.js (angular.module global registration and retrieval. Runs the ionic platform)
- .editorconfig (pre-configured consistent code editing style across IDEs)
- .jshintrc (see example with comments)
- test/.jshintrc
- app/index.html (<body ng-app="AngularIonic"> matches name of AngularJS module in app.js)
- app/styles/main.scss
- bower.json (Manifest file of package definitions including dependencies in development and production (Ionic Framework version)and version ranges)
- .bowerrc
- package.json (notify NPM of project metadata and dependencies)
- Grunt-autoprefixer (Parse CSS and add vendor-prefixed CSS properties extracted from the Can I Use database) Explanation here
- Grunt-wiredep (Finds project dependencies and injects into placeholders within our source code by running grunt-wiredep) Explanation here
- Grunt-concurrent (Runs Grunt tasks concurrently to reduce build time) Explanation here
- Grunt-contrib-clean (Clean files and folders)
- Grunt-contrib-compass (Compile Compass Sass to CSS)
- Grunt-contrib-concat (Concatenate files)
- Grunt-contrib-connect (Static Web Server)
- Grunt-contrib-copy (Copy files and folders)
- Grunt-contrib-cssmin (Compress/Minify release folder to .min.css)
- Grunt-contrib-htmlmin (Minify HTML)
- Grunt-contrib-jshint (Validates files with JSHint)
- Grunt-contrib-uglify (Compress and mangle input to preserve IP. Beautify to output for testing)
- Grunt-contrib-watch (Run Tasks when Watched files Change. Use LiveReload)
- Grunt-newer (Configure Grunt Tasks to Run only with Newer files)
- Grunt-usemin (Replaces non-optimised with optimised scripts in HTML files)
- Grunt-ng-annotate (Add, remove, and rebuild AngularJS dependency injections with ngAnnotate)
- Grunt-ng-constant (Dynamic generation of AngularJS Constant Modules)
- Grunt-karma (Plugin for Karma Test Runner)
- Karma-mocha (Adapter for Mocha Testing Framework)
- Karma-chai (Assertion suites for testing)
- Karma-chrome-launcher (Launcher for Chrome)
- Karma-phantomjs-launcher (Plugin Launcher for PhantomJS)
- Karma-coverage (Generate code Coverage using Istanbul)
- JShint-stylish (Stylish reporter for JSHint)
- Load-grunt-tasks (Load multiple Grunt Tasks using Globbing Pattern Matching)
- Time-grunt (Display elapsed Execution Time of Grunt Tasks)
- Mkdirp
- Ncp (Async and recursive file and directory copying)
- Orchestrator (Module to sequence and execute tasks and dependencies in max concurrency)
- Ripple-emulator (HTML5 browser-based app development and testing tool)
- Gruntfile.js
- .gitignore
- hooks/after_prepare/icons_and_splashscreens.js (Scripts executed before and after directory-related commands) Example Hooks
- test/spec/controllers.js
# bower_components folder (similar to the /vendor folder in Rails) updated with:
- Collide (JS animation engine built by Ionic Framework team allowing developers to hook into every frame)
- Angular-ui-router (AngularJS flexible routing with nested views to organise parts of interface into a state machine)
- Angular-mocks (testing)
- Angular-sanitize (Parse HTML using tokens to avoid unsafe input with ngSanitize)
- Angular-animate (Animation hooks for common Directives using ngAnimate)
- Angular-scenario
- TODO:
- Jekyll { Static Site Generator allowing focus on Content }
- TODO - Test Driven Development (TDD)
- Karma { Cross-browser HTML Test Server & Runner } uses Plugins / Adapters
- Jasmine { AngularJS Testing Framework
- Protractor { AngularJS Testing Framework End-to-end using Jasmine as Test Interface and Selenium Server to control browsers}
- Mocha { JS Testing Framework. Integrates with GitHub }
- Chai { Assertion Library }
- PhantomJS { Testing code on Headless Instance }
- Istanbul { Automatic Coverage Report Generation }
- RequireJS { Modular Script and Source File Loader. Optimises and Minifies JS for Deployment }
- QUnit { EmberJS Testing Framework }
- Continuous Integration & Deployment Pipeline
- Adobe PhoneGap Build { Free for Open Source. JS. GitHub Integration. }
- Codeship { Free for Open Source. Multiple Languages / Endpoints / Tools / Databases. GitHub Integration. }
- Jenkins CI { AngularJS Automated Tests. GitHub Integration }
- Travis CI { Automated Tests. GitHub Integration. Integrated using a YAML file. Results in Pull Requests }
- Semaphore CI { GitHub Integration. Platform includes NodeJS, PhantomJS, and Headless Firefox }
- CircleCI $19/mth+ { Multiple Languages. GitHub Integration. Fast }
- Beta Testing
- TestFlight
- HockeyApp (Mobile App Beta Testing)
- Sass
- Sass / SCSS vs LESS
- Sass vs SCSS (thanks Diego Netto)
- Sass { Extension of CSS3 }
- Compass { Sass Framework. Open-Source. Compass Watch listens for Sass file changes and recompiles CSS }
- Encryption
- Database Encryption
- UI Libraries & Tools
- Zurb Foundation { Responsive Front-End Framework built on Sass / SCSS }
- Ionic Icon Library
- Cordova Plugins
- Adobe PhoneGap Plugins
- Scaffolding Tool (modular code shell generator similar to the role of Rails)
- Yo (Yeoman)
- Package.json { informs Node.js of specific packages and version the specific project needs installed (instead of all installed globally) }
- Bower.json { informs Bower of JS and CSS components to install in /app/bower_components }
- Gruntfile.js { set of task instructions on specific project for Grunt }
- Angular Generator of Boilerplate
- Generates Modules { controllers, directives, filters, routes (controller + view), services (providers, factories, values, constants), decorators (with config and delegate), views }
- Modules (resources)
- Bootstrap
- Build & Utility Tools (modular Configuration & Tasks)
- Grunt { i.e. optimisation tasks including JS and CSS concatenation and/or minification (__.main.css, __.plugins.js, __.scripts.js), running local server, JS error checking and unit tests, Grunt server (uses Node.js) for live reload of changes with re-compiled Sass and CoffeeScript. Similar to Ant for Java }
- Gulp
- Packaging
- PhoneGap
- Cordova
- Trigger.io
- Package Manager (Dependency Managers. use npm install (or update) [-g] and bower install to install tools in Package.json into /app/node_packages and Bower.json into /app/bower_components)
- npm (Node Package Manager) { Installation Utility }
- Bower { Web component dependency installer (i.e. bower install --save __ to add to list of dependencies in Bower.json). Similar to Maven and Ivy in Java }
- Wiredep { Bower dependency Injection from Grunt into HTML. Manage JS and CSS includes. }
- APIs
- Google Maps
- PubNub (Websockets)
- Alias Ionic Unix Commands
- Setup an alias function in your .bash_profile
gii() { gulp sass ; ionic build ios ; ionic emulate ios ; }
Sublime Text 2
"tab_size": 2,
"translate_tabs_to_spaces": true,
"detect_indentation": false
}
Contributions
Links
- Custom Tab Spaces
- Open a document in Sublime Text 2 with the File Extension that you want to apply custom tab spacing to (i.e. two tab spaces preceding the code instead of the default of four spaces when you press the 'tab' key on your keyboard)
- Go to the Menu and select: Sublime Text 2 > Preferences > Settings - More > Syntax Specific - User
- Paste the following in the file that has opened automatically and then save it
"tab_size": 2,
"translate_tabs_to_spaces": true,
"detect_indentation": false
}
Contributions
- Issue Reported (Generator Ionic Issues)
- Pull Request made (Android Walkthrough using Generator Ionic)
- Question asked (Protractor Setup Manually Walkthrough but issues automating with Grunt)
- Pull Request to AngularJS
Links
- TODO: Polymer Component Kitchen Holy Grail
- TODO: Stamplay.com Holy Grail
- TODO: Leadpages.net (thanks for the referral Jon Hawley!!)
- Vim Commands Cheat Sheet
- TODO: Advanced Bash Scripting Guide
- Review of Ionic by GrGur Grisogono
- TODO: The Jackal of JavaScript Guides (and Protractor Guide)
- Polymer Project
- TODO: JavaScript Tutorial
- JavaScript Module Patterns
- Protractor API (similar to Capybara for Rails but for Node.js with Selenium Server)
- Protractor Tutorial
- Asyncronicity
- Law of Demeter (Loose Coupling)
- Service Locator (Design Pattern)
- Traditional Continuous-Passing Style (CPS)
- JSON Lint (Validates correctness of a JSON file)
- Protractor Slides (with Config Settings) by Ramon Victor
- HTML5 Canvas Tutorial
- TODO: An Introduction to AngularJS End to End Testing with Protractor
- DONE Angular PhoneCat Tutorial
- DONE Expressions (including Examples)
- TODO: Modules (including Examples)
- TODO: Compiler (including DnD Examples)
- Services (uses Angular's Dependency Injection subsystem)
- TODO: Resource (ngResource instead of $http)
- DONE AngularJS Animations Guide
- TODO: jQuery Animate (with Examples)
- Understanding Dependency Injection Jackpot!! Bye bye verbosity
- Scopes (Inheritance, Watchers and Events)
- $compile
- Directives and Bindings
- Q (Promise Object)
- TODO: HTTP Service (including Example)
- Bootstrapping App
- Manual Bootstrapping
- AngularJS Google Group
- TODO: AngularJS JSFiddle Examples Jackpot!!
- TODO: AngularJS Plunker Template (for collaboration purposes) Jackpot!!
- TODO: AngularJS Cheat Sheet Jackpot!!
