mobile web apps with angularjs and ionic

12
Mobile Web Apps with AngularJS & Ionic

Upload: loc-nguyen

Post on 15-Jul-2015

231 views

Category:

Engineering


2 download

TRANSCRIPT

Page 1: Mobile Web Apps with AngularJS and Ionic

Mobile Web Apps with AngularJS & Ionic

Page 2: Mobile Web Apps with AngularJS and Ionic

angularjsoc.org @angularjsoc

Page 3: Mobile Web Apps with AngularJS and Ionic

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

Page 4: Mobile Web Apps with AngularJS and Ionic

Search Trends

Page 5: Mobile Web Apps with AngularJS and Ionic

Developer Interest

Page 6: Mobile Web Apps with AngularJS and Ionic

What is Ionic?

A framework for rapid mobile web development

Community acceptance

Hit the ground running with pre-built UI

Page 7: Mobile Web Apps with AngularJS and Ionic

Freebies

Default stylesheet – iOS 7

Showcase

Constructed with Sass and customizable

● Set variables to your desired values

● Extend pre-built Ionic classes

Page 8: Mobile Web Apps with AngularJS and Ionic

Freebies

Default widgets

● Side menu, slide box, action sheet and

more

Demos

Page 9: Mobile Web Apps with AngularJS and Ionic

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>

Page 10: Mobile Web Apps with AngularJS and Ionic

...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???

Page 11: Mobile Web Apps with AngularJS and Ionic

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

Page 12: Mobile Web Apps with AngularJS and Ionic

Use cases

● Signing session

● Fully featured SignNow mobile web app

● Packaged App for Windows Phone using

PhoneGap