Skip to content

Commit

Permalink
Merge commit '3516f23ae20205f06f5dd2f3072638d0fbd385c2'
Browse files Browse the repository at this point in the history
* commit '3516f23ae20205f06f5dd2f3072638d0fbd385c2': (22 commits)
  docs(docs): Update Changelog
  0.6.1
  fix(ionic): Run ionic and watch concurrently. Closes diegonetto#114, diegonetto#116, & diegonetto#121
  Update README.md
  Update getting-started.md
  Update README.md
  Update FAQ.md
  Update README.md
  Update README.md
  Update FAQ.md
  Update getting-started.md
  Update README.md
  Update FAQ.md
  Update getting-started.md
  Create android.md
  Update getting-started.md
  Create app-testing.md
  Delete app-testing
  Create app-testing
  Create getting-started.md
  ...
  • Loading branch information
sidneys committed Jan 9, 2015
2 parents 472ec19 + 3516f23 commit f7ba993
Show file tree
Hide file tree
Showing 8 changed files with 471 additions and 17 deletions.
9 changes: 9 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
<a name="0.6.1"></a>
## 0.6.1 (2014-10-24)


#### Bug Fixes

* **ionic:** Run ionic and watch concurrently., #116, & #121 ([1f301bac](http://github.com/diegonetto/generator-ionic/commit/1f301bac24989710b777237763bf9c221ca5b07d), closes [#114](http://github.com/diegonetto/generator-ionic/issues/114))


<a name="0.6.0"></a>
## 0.6.0 (2014-10-06)

Expand Down
203 changes: 203 additions & 0 deletions docs/FAQ.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
#Frequently asked questions

##How do I manage libraries with Bower?
Install a new front-end library using `bower install --save` to update your `bower.json` file.

```
bower install --save lodash
```

This way, when the Grunt [`bower-install`](https://github.com/stephenplusplus/grunt-bower-install#grunt-bower-install) task is run it will automatically inject your front-end dependencies inside the `bower:js` block of your `app/index.html`file.

##Can I manually add libraries?
Of course! If a library you wish to include is not registered with Bower or you wish to manually manage third party libraries, simply include any CSS and JavaScript files you need **inside** your `app/index.html` [usemin](https://github.com/yeoman/grunt-usemin#blocks) `build:js` or `build:css` blocks but **outside** the `bower:js` or `bower:css` blocks (since the Grunt task overwrites the Bower blocks' contents).

##How do I use the Ripple Emulator?
**Be Advised**: [Ripple](http://ripple.incubator.apache.org/) is under active development so expect support for some plugins to be missing or broken.



Add a platform target then run `grunt ripple` to launch the emulator in your browser.

```
grunt platform:add:ios
grunt ripple
```



Now go edit a file and then refresh your browser to see your changes. (Currently experimenting with livereload for Ripple)



**Note**: If you get errors beginning with `Error: static() root path required`, don't fret. Ripple defaults the UI to Android so just switch to an iOS device and you'll be good to go.



![Ripple](http://i.imgur.com/LA4Hip1l.png)

##Why is Cordova included and how do I use it?
To make our lives a bit simpler, the `cordova` library has been packaged as a part of this generator and delegated via Grunt tasks. To invoke Cordova, simply run the command you would normally have, but replace `cordova` with `grunt` and `spaces` with `:` (the way Grunt chains task arguments).



For example, lets say you want to add iOS as a platform target for your Ionic app

```
grunt platform:add:ios
```

and emulate a platform target

```
grunt emulate:ios
```

or add a plugin by specifying either its full repository URL or namespace from the [Plugins Registry](http://plugins.cordova.io)

```
grunt plugin:add:https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
grunt plugin:add:org.apache.cordova.device
grunt plugin:add:org.apache.cordova.network-information
```

##How do I build assets for Cordova?
Once you're ready to test your application in a simulator or device, run `grunt cordova` to copy all of your `app/` assets into `www/` and build updated `platform/` files so they are ready to be emulated / run by Cordova.



To compress and optimize your application, run `grunt build`. It will concatenate, obfuscate, and minify your JavaScript, HTML, and CSS files and copy over the resulting assets into the `www/` directory so the compressed version can be used with Cordova.

##How do I configure my icons and splash screens?
Properly configuring your app icons and splash screens to work with Cordova can be a pain to set up, so we've gone ahead and including an `after_prepare` hook that manages copying these resource files to the correct location within your current platform targets.



To get started, you must first add a platform via `grunt platform:add:ios`. Once you have a platform, the packaged `icons_and_splashscreens.js` hook will copy over all placeholder icons and splash screens generated by Cordova into a newly created top-level `resources/` directory inside of your project. Simply replace these files with your own resources (**but maintain file names and directory structure**) and let the hook's magic automatically manage copying them to the appropriate location for each Cordova platform, all without interrupting your existing workflow.



To learn more about hooks, checkout out the `README.md` file inside of your `hooks/` directory.

##What are the benefits of local browser development?
Running `grunt serve` enhances your workflow by allowing you to rapidly build Ionic apps without having to constantly re-run your platform simulator. Since we spin up a `connect` server with `watch` and `livereload` tasks, you can freely edit your CSS (or SCSS/SASS files if you chose to use Compass), HTML, and JavaScript files and changes will be quickly reflected in your browser.

##How do I add constants?
To set up your environment specific constants, modify the respective targets of the `ngconstant` task located towards the top of your Gruntfile.

```
ngconstant: {
options: {
space: ' ',
wrap: '"use strict";\n\n {%= __ngModule %}',
name: 'config',
dest: '<%= yeoman.app %>/scripts/config.js'
},
development: {
constants: {
ENV: {
name: 'development',
apiEndpoint: 'http://dev.your-site.com:10000/'
}
}
},
production: {
constants: {
ENV: {
name: 'production',
apiEndpoint: 'http://api.your-site.com/'
}
}
}
},
```



Running `grunt serve` will cause the `development` target constants to be used. When you build your application for production using `grunt build` or `grunt serve:dist`, the `production` constants will be used. Other targets, such as staging, can be added, but you will need to customize your Gruntfile accordingly. Note that if you change the `name` property of the task options, you will need to update your `app.js` module dependencies as well.

##How is this used inside Angular?
A `config.js` file is created by `grunt-ng-constant` depending on which task target is executed. This config file exposes a `config` module, that is listed as a dependency inside `app/scripts/app.js`. Out of the box, your constants will be namespaced under `ENV`, but this can be changed by modifying the `ngconstant` targets. It is important to note that whatever namespace value is chosen is what will need to be used for Dependency Injection inside your Angular functions.



The following example shows how to pre-process all outgoing HTTP request URLs with an environment specific API endpoint by creating a simple Angular `$http` interceptor.



```
// Custom Interceptor for replacing outgoing URLs
.factory('httpEnvInterceptor', function (ENV) {
return {
'request': function(config) {
if (!_.contains(config.url, 'html')) {
config.url = ENV.apiEndpoint + config.url;
}
return config;
}
}
})
.config(function($httpProvider) {
// Pre-process outgoing request URLs
$httpProvider.interceptors.push('httpEnvInterceptor');
})
```

##What else does this generator do to help me?
While building your Ionic app, you may find yourself working with multiple environments such as development, staging, and production. This generator uses [grunt-ng-constant] (https://github.com/werk85/grunt-ng-constant) to set up your workflow with development and production environment configurations right out of the box.
13 changes: 12 additions & 1 deletion docs/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
# Ionic Generator documentation

FAQ and Guides coming soon.
* [Getting Started](getting-started.md) - Learn the basics
* [Android Development](android.md) - In-depth Android Walkthrough
* [FAQ](FAQ.md) - Answers to your common questions
* [App Testing](app-testing.md) - Learn how to test the app

## Special Thanks To

* The pioneers behind [Yeoman](http://yeoman.io/) for building an intelligent workflow management solution.

* The [AngularJS Generator](https://github.com/yeoman/generator-angular) and [Ionic Seed Project](https://github.com/driftyco/ionic-angular-cordova-seed) projects for inspiration.

* The visionaries at [Drifty](http://drifty.com) for creating the [Ionic Framework](http://ionicframework.com/).
127 changes: 127 additions & 0 deletions docs/android.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
## Android Walkthrough

Research & Contribution by @ltfschoen (Luke Schoen)



- Install Generator Ionic

```
npm cache clear
npm install -g generator-ionic
mkdir my-ionic-project && cd $_
yo ionic
```

- Execute the following command in Terminal program to run a web server on your localhost. This will automatically open a tab in your default web browser at the following address and load your app http://127.0.0.1:9000/

```
grunt serve
```

- Now we want to emulate your app on an Android Virtual Device (AVD). Start by downloading the latest [Android SDK](https://developer.android.com/sdk/index.html#download)

- On a Mac OS, extract downloaded ZIP file to an installation directory (i.e. /Applications/adt-bundle-mac-x86_64-20140702/). Note that the folder should match the name of the downloaded ZIP file adt-bundle-mac-x86_64-20140702.zip

- Update the Bash Profile document to include PATH environment variables to the Android SDK platform-tools and tools directory so the 'android' command may be executed regardless of your present working directory in the Terminal program. Note: This step may be necessary in order to allow you to use the 'android' command and avoid encountering the following error:

```
[Error: The command android failed. Make sure you have the latest Android SDK installed, and the android command (inside the tools/ folder) added to your path. Output: /bin/sh: android: command not found ]
```

- Execute the following command in the Terminal program to edit your Bash Profile document:

```
touch ~/.bash_profile; open ~/.bash_profile
```

- Copy and Paste the following at the top of the file (without removing existing data within the file). Replace all instances of adt-bundle-mac-x86_64-20140702 that are shown below with the filename of the ZIP file that you downloaded. Save and close the file.

```
export PATH=/user/local/bin:$PATH
export PATH=$PATH:/Applications/adt-bundle-mac-x86_64-20140702/sdk/tools
export PATH=${PATH}:/Applications/adt-bundle-mac-x86_64-20140702/sdk/tools:/Applications/adt-bundle-mac-x86_64-20140702/sdk/tools
```

- Execute the updated Bash Profile with the following command in the Terminal program to update the PATH:

```
source ~/.bash_profile
```

- Execute the following command in Terminal program to install Apache Ant using Homebrew

```
brew install ant
```

- Note: The above step may be necessary to avoid encountering the following error:

```
Error: ERROR : executing command 'ant', make sure you have ant installed and added to your path.
```

- Execute the following command in Terminal program to open the Android Package Manager (APM):

```
android
```

- In the APM, expand Android 4.4.2 (API 19). Click checkboxes to install "SDK Platform" and "ARM EABI v7A System Image". Click "Install Packages..."

- Go to the Android SDK Manager menu in the top left of your screen. Click the "Tools" dropdown menu. Click "Manage AVDs...". This opens the AVD (Android Virtual Device) Manager. Click to select the device listed (i.e. default is AVD_for_Nexus Android 4.4.2). Click the "Repair..." Button on the right panel. Click the "Refresh" Button at the bottom right. Close the window.

- Execute the following command in Terminal program to install the Android Debug Bridge:

```
brew install android-platform-tools
```

- Note: The above steps may be necessary to avoid encountering the following errors:

```
Error: Please install Android target 19 (the Android newest SDK). Make sure you have the latest Android tools installed as well. Run "android" from your command-line to install/update any missing SDKs or tools.
Error executing "adb devices": /bin/sh: adb: command not found
emulator: ERROR: This AVD's configuration is missing a kernel file!!
```

- Add the Android Platform with the following commands in Terminal program. No warnings or errors should be encountered. Note that it may take a while to load your app in the Android emulator.

```
grunt platform:add:android
grunt build
grunt emulate:android
```
Loading

0 comments on commit f7ba993

Please sign in to comment.