Angular: Go Mobile! How could you develop a mobile app across iOS, Android or windows devices? We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, a “To Do” app using Angular will be explored and then it will be demonstrated step by step on how to turn it into a mobile app, with access to native device capabilities. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.

1. Angular: Go Mobile!
Doris Chen Ph.D.
Senior Developer Evangelist
Microsoft
doris.chen@microsoft.com
http://blogs.msdn.com/dorischen/
@doristchen

2. Doris Chen, Ph.D.
• Developer Evangelist at Microsoft based in Silicon Valley, CA
• Blog: http://blogs.msdn.com/b/dorischen/
• Twitter @doristchen
• Email: doris.chen@microsoft.com
• Over 18 years of experience in the software industry focusing on web
technologies
• Spoke and published widely at O'Reilly OSCON, Fluent, HTML5 Dev Conf,
JavaOne, Google Developer Conference, Silicon Valley Code Camp and
worldwide User Groups meetups
• Doris received her Ph.D. from the University of California at Los Angeles
(UCLA)

3. Agenda
• Angular
• Demo: ToDo App in Angular
• Mobile Apps for JavaScript
• Demo: ToDo App with Apache Cordova
• Summary and Resources

4. Angular

5. Angular
Architecture MV* (Model View Whatever)
Template Support YES. doesn’t require any other separate template engine.(Also
doesn’t support template engine)
File Size 39.5K (no dependencies)
Nested Template Support Yes
Data Binding Yes
Routing Yes
Compatible with other frameworks Yes
Additional Features Dependency Injection, Directives, Watch Expressions and 2-way
Binding, HTML5 validations, Form Validations, and Filtering

6. Angular: templates
• Simply HTML with binding expressions baked-in
• Binding expressions are surrounded by double curly braces
<ul>
<li ="framework in frameworks"
title="{{framework.description}}">
{{framework.name}}
</li>
</ul>

7. Angular: model
• Angular does not use observable properties, no restriction on
implementing model
• No class to extend and no interface to comply
• Free to use whatever you want (including existing Backbone
models)
• In practice, most developers use plain old JavaScript objects
(POJO)

8. 2-way bindings and directives
<div class="templateWrapper" ng-repeat="toDoItem in todos">
<div class="templateContainer">
<input class="templateTitle"
ng-class="{crossedOut: toDoItem.done}" type="text"
ng-text-change="changeToDoText(toDoItem)"
ng-model="toDoItem.text" />
<h3 class="templateAddress">{{toDoItem.address}}</h3>
</div>
</div>

9. Dependency injection
<section id="todoapp" ng-controller="ToDoCtrl">
<button class="templateLeft templateRemove"
ng-click="removeToDo(toDoItem)"></button>
</section>
angular.module("xPlat.controllers")
.controller('ToDoCtrl', ['$scope', 'maps', 'storage',
function ($scope, maps, storage) {
$scope.removeToDo = function (toDoItem) {
storage.del(toDoItem).then(function (todo) {
var index = $scope.todos.indexOf(todo);
$scope.todos.splice(index, 1);
});
}
}]);

10. Angular: more good things
• Building application blocks into: Controllers, Directives,
Factories, Filters, Services and Views (templates).
• Views UI, Controllers logic behind UI, Services communication with
backend and common functionality, Directives reusable components
and extending HTML by defining new elements, attributes and
behaviors
• Promises play a main role in Angular

11. Custom directives
<input class="templateTitle"
ng-class="{crossedOut: toDoItem.done}" type="text"
ng-text-change=" changeToDoText(toDoItem)"
ng-model="toDoItem.text" />
angular.module('xPlat.directives')
.directive('ngTextChange', function () {
return {
restrict: 'A',
replace: 'ngModel',
link: function (scope, element, attr) {
element.on('change', function () {
scope.$apply(function () {
scope.$eval(attr.ngTextChange);
});
…
});

12. Custom directives, continued
$scope.changeToDoText = function (toDoItem) {
//Notice .then Promise pattern is used here
getAddress().then(function (address) {
toDoItem.address = address;
return storage.update(toDoItem);
}, function (errorMessage) {
toDoItem.address = errorMessage;
return storage.update(toDoItem);
});
}

13. Angular: bad things
• Extremely opinionated
• Frustrated: prior experience in creating UI with Javascript is rendered almost useless
• Do everything according to the “Angular way”
• Directives could be super complicated and odd
• Expression language too powerful
• <button ng-click="(oldPassword && checkComplexity(newPassword) &&
oldPassword != newPassword) ? (changePassword(oldPassword, newPassword) &&
(oldPassword=(newPassword=''))) : (errorMessage='Please input a new password
matching the following requirements: ' + passwordRequirements)">Click
me</button>

14. Demo
ToDo MVC in Angular and Backbone

15. When to use Angular?
• Something declarative that uses View to derive behavior
• Custom HTML tags and components that specify your application
intentions
• Easily testable, URL management (routing) and a separation of
concerns through a variation of MVC
• Good at making quick changes
• create easily testable code and test it often
• Not a good fit for Angular
• Games and GUI editors are examples of applications with intensive and tricky
DOM manipulation, different from CRUD apps
• may be better to use a library like jQuery
• Has its own scaffolding tools available (angular-seed)

16. Go mobile
From web app to hybrid app

17. Apps dominate the mobile web

18. Low investment for more capabilities
Capabilities
DeveloperInvestment
Web App
Hybrid App
Native App

19. What is Apache Cordova?
• Open-source framework

20. Native WrapperWhat is Apache Cordova?
• Open-source framework
• Hosted webview
• Single, shared codebase
deployed to all targets
<webview>
Your JavaScript App

21. Native WrapperWhat is Apache Cordova?
• Open-source framework
• Hosted webview
• Single, shared codebase
deployed to all targets
• Plugins provide a common
JavaScript API to access
device capabilities
<webview>
Your JavaScript App
Cordova Plugin JS API

22. Native WrapperWhat is Apache Cordova?
• Open-source framework
• Hosted webview
• Single, shared codebase
deployed to all targets
• Plugins provide a common
JavaScript API to access
device capabilities
• About 6% of apps in stores
(13% in enterprise)
<webview>
Your JavaScript App
Cordova Plugin JS API

23. Why Cordova?
72%
62%
34%
28% 27%
24%
20%
9%
0%
10%
20%
30%
40%
50%
60%
70%
80%
Familiarity of
Languages
(HTML, JS, CSS)
Cross Platform
Support
Performance Availability of
Tools/Libraries
Productivity Based on Open
Standards
Cost of
Development
Community
Source: Kendo UI Developer Survey 2013

24. Speed & cost of development matter

25. :)

26. Demo
Converting ToDo MVC into a hybrid app

27. World Wide Web Cordova
Delivery mechanism Delivered via browser Packaged on my device
Input Touch Touch
Offline Support No Yes
Device Capabilities Web APIs Only Native Device APIs
Monetization Web Commerce App Store & In-App Purchases
Discoverability Bookmarks & Search Engines Always on my home screen
🌐

28. Tips, Tricks & Considerations
• Use Cordova when an idea makes sense as a web app, but you
need…
• Cross-platform support as a packaged application
• Offline support
• Access to native device capabilities (e.g. camera, accelerometer, file system)
• Better reach & discoverability
• Cordova depends on the platform build system
• To build for iOS, you need a Mac
• To build for Windows 8+, you need Windows 8+
• To build for Android, you need the Android SDK
• Touch input means bigger everything. Consider a control framework
like Ionic.

29. Use Cordova if you want to…
• Use your web skills & assets
• Maintain one codebase
• Use the JS libraries you love
You might be better off writing native apps if…
• Performance is of utmost concern
• You want different apps on different devices
• You <3 Java, ObjC, or DirectX (If you love XAML/C#, consider Xamarin)
• Your apps have deep integration with devices, such as the DirectX rendering
pipeline
Should I build a Cordova app or Native apps?

30. Resources
• AngularJS: http://angularjs.org
• ToDo MVC: http://todomvc.com
• Tools for Apache Cordova: http://aka.ms/cordova
• StackOverflow #multi-device-hybrid-apps