A presentation I gave at a code camp

1. Mobile Web Apps with AngularJS & Ionic

2. angularjsoc.org @angularjsoc

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. Search Trends

5. Developer Interest

6. What is Ionic?
A framework for rapid mobile web development
Community acceptance
Hit the ground running with pre-built UI

7. Freebies
Default stylesheet – iOS 7
Showcase
Constructed with Sass and customizable
● Set variables to your desired values
● Extend pre-built Ionic classes

8. Freebies
Default widgets
● Side menu, slide box, action sheet and
more
Demos

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. ...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. 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. Use cases
● Signing session
● Fully featured SignNow mobile web app
● Packaged App for Windows Phone using
PhoneGap