Upload
loc-nguyen
View
231
Download
2
Embed Size (px)
Citation preview
Mobile Web Apps with AngularJS & Ionic
angularjsoc.org @angularjsoc
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
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
● Extend pre-built Ionic classes
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-slide>
<ion-slide>
<div class="box yellow">YELLOW</div>
</ion-slide>
<ion-slide>
</ion-slide-box>
...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???
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
Use cases
● Signing session
● Fully featured SignNow mobile web app
● Packaged App for Windows Phone using
PhoneGap