Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mobile Web Apps with AngularJS & Ionic
angularjsoc.org @angularjsoc
What is AngularJS?
Structure for complex apps
● DOM states and transitions
● Reusable components
● Business logic organiza...
Search Trends
Developer Interest
What is Ionic?
A framework for rapid mobile web development
Community acceptance
Hit the ground running with pre-built UI
Freebies
Default stylesheet – iOS 7
Showcase
Constructed with Sass and customizable
● Set variables to your desired values...
Freebies
Default widgets
● Side menu, slide box, action sheet and
more
Demos
Freebies
● Anyone on the team can easily use
<ion-slide-box>
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-s...
...but how?
Hard dependency on Angular mojo
● DOM states and transitions
o 2-way data binding
o CSS3 animations
● Reusable...
Directives
The secret sauce in Angular: reusability
<sn-document-canvas id="b68a">
<sn-field type="signature">...
The futu...
Use cases
● Signing session
● Fully featured SignNow mobile web app
● Packaged App for Windows Phone using
PhoneGap
Upcoming SlideShare
Loading in …5
×

Mobile Web Apps with AngularJS and Ionic

893 views

Published on

A presentation I gave at a code camp

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Mobile Web Apps with AngularJS and Ionic

  1. 1. Mobile Web Apps with AngularJS & Ionic
  2. 2. angularjsoc.org @angularjsoc
  3. 3. What is AngularJS? Structure for complex apps ● DOM states and transitions ● Reusable components ● Business logic organization Built for easy unit and E2E testing Increase in productivity
  4. 4. Search Trends
  5. 5. Developer Interest
  6. 6. What is Ionic? A framework for rapid mobile web development Community acceptance Hit the ground running with pre-built UI
  7. 7. Freebies Default stylesheet – iOS 7 Showcase Constructed with Sass and customizable ● Set variables to your desired values ● Extend pre-built Ionic classes
  8. 8. Freebies Default widgets ● Side menu, slide box, action sheet and more Demos
  9. 9. Freebies ● Anyone on the team can easily use <ion-slide-box> <ion-slide> <div class="box blue"><h1>BLUE</h1></div> </ion-slide> <ion-slide> <div class="box yellow">YELLOW</div> </ion-slide> <ion-slide> </ion-slide-box>
  10. 10. ...but how? Hard dependency on Angular mojo ● DOM states and transitions o 2-way data binding o CSS3 animations ● Reusable components o built with Angular’s directive API o huh???
  11. 11. Directives The secret sauce in Angular: reusability <sn-document-canvas id="b68a"> <sn-field type="signature">... The future of the web ● Ember components ● Google Polymer ● Standards: web components, shadow DOM
  12. 12. Use cases ● Signing session ● Fully featured SignNow mobile web app ● Packaged App for Windows Phone using PhoneGap

×