Vortrag: Hybride Apps mit Cordova, AngularJS und Ionic

Navigation mit
Esc, → und ↓

![tools](images/johannes.png) ### [JohannesHoppe.de](http://JohannesHoppe.de)

![Phonegap](images/img_web-view.png)

![Cordova](images/logo_cordova.png)

Distributionen

* [Apache Cordova](http://cordova.apache.org/) * [Adobe PhoneGap](http://phonegap.com/) * [Telerik AppBuilder](http://www.telerik.com/appbuilder) * [Visual Studio Tools for Apache Cordova](http://www.visualstudio.com/en-us/explore/cordova-vs.aspx) * uvm...

[![Logo App Builder](images/logo_app-builder.png)](http://www.telerik.com/appbuilder) [![Screenshot App Builder](images/screen_appbuilder.jpg)](http://www.telerik.com/appbuilder)

![Logo AngularJS](images/logo_angularjs.svg)

MVC, MVVM, Directives, IoC

## Hello World ```html contenteditable data-show-source="examples/HelloWorldAngular.html" fragment loading source... ``` ```js contenteditable data-show-source="examples/HelloWorldAngular.js" fragment loading source... ``` [plnkr.co/Z0YXdw](http://plnkr.co/Z0YXdw) / [Fallback](http://johanneshoppe.github.io/IonicPresentation/Demos/HelloWorldAngular/HelloWorldAngular/index.html)

![Logo Ionic](images/logo_ionic.svg)

![Image Ionic](images/img_ionic_phones.png)

[![Logo Ionic Creator](images/logo_ionic-creator.png)](https://creator.ionic.io/) [![Screenshot Ionic Creator](images/screen_creator-preview.png)](https://creator.ionic.io/)

### Herunterladen / Einrichten
```html contenteditable $ npm install -g cordova ionic $ ionic start [appName] creator:573c5b5d1c22 $ cd [appName] Optional $ npm install gulp -g $ ionic setup sass # auf Sass updaten ```

### Corodova: Ionic Distibution ```html $ cd [appName] $ ionic serve # im Browser entwickeln! :-) $ ionic platform add android # Java SDK, Apache Ant, Android SDK... :-/ $ ionic build android $ ionic emulate android $ ionic platform add ios # OS X? Nope! :-( ```

### Corodova: App Builder CLI ```html $ npm install -g appbuilder $ appbuilder create hybrid [appName2] --template=Blank $ cd [appName2] $ appbuilder simulate ``` [mehr Infos](http://developer.telerik.com/featured/supercharge-app-development-ionic-appbuilder/)

## Downloads ![tools](images/img_github_code.svg) [github.com/JohannesHoppe/IonicPresentation](https://github.com/JohannesHoppe/IonicPresentation)

# Danke!
### [haushoppe-its.de](http://haushoppe-its.de)