Download - Angular mobile angular_u
![Page 1: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/1.jpg)
Angular: Go Mobile!
Doris Chen Ph.D.
Senior Developer Evangelist
Microsoft
http://blogs.msdn.com/dorischen/
@doristchen
![Page 2: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/2.jpg)
Doris Chen, Ph.D.
• Developer Evangelist at Microsoft based in Silicon Valley, CA
• Blog: http://blogs.msdn.com/b/dorischen/
• Twitter @doristchen
• Email: [email protected]
• 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)
![Page 3: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/3.jpg)
Agenda
• Angular
• Demo: ToDo App in Angular
• Mobile Apps for JavaScript
• Demo: ToDo App with Apache Cordova
• Summary and Resources
![Page 4: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/4.jpg)
Angular
![Page 5: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/5.jpg)
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
![Page 6: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/6.jpg)
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>
![Page 7: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/7.jpg)
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)
![Page 8: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/8.jpg)
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>
![Page 9: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/9.jpg)
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);
});}
}]);
![Page 10: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/10.jpg)
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
![Page 11: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/11.jpg)
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);});
…});
![Page 12: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/12.jpg)
Custom directives, continued
$scope.changeToDoText = function (toDoItem) {//Notice .then Promise pattern is used heregetAddress().then(function (address) {
toDoItem.address = address;return storage.update(toDoItem);
}, function (errorMessage) {toDoItem.address = errorMessage;return storage.update(toDoItem);
});}
![Page 13: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/13.jpg)
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>
![Page 14: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/14.jpg)
DemoToDo MVC in Angular and Backbone
![Page 15: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/15.jpg)
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)
![Page 16: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/16.jpg)
Go mobileFrom web app to hybrid app
![Page 17: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/17.jpg)
Apps dominate the mobile web
![Page 18: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/18.jpg)
Low investment for more capabilities
Capabilities
Deve
lop
er
Inve
stm
ent
Web App
Hybrid App
Native App
![Page 19: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/19.jpg)
What is Apache Cordova?
• Open-source framework
![Page 20: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/20.jpg)
Native WrapperWhat is Apache Cordova?
• Open-source framework
• Hosted webview
• Single, shared codebase deployed to all targets
<webview>
Your JavaScript App
![Page 21: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/21.jpg)
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
![Page 22: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/22.jpg)
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
![Page 23: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/23.jpg)
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
![Page 24: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/24.jpg)
Speed & cost of development matter
![Page 25: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/25.jpg)
:)
![Page 26: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/26.jpg)
DemoConverting ToDo MVC into a hybrid app
![Page 27: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/27.jpg)
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
🌐
![Page 28: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/28.jpg)
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.
![Page 29: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/29.jpg)
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?
![Page 30: Angular mobile angular_u](https://reader034.vdocuments.site/reader034/viewer/2022052413/55bec1b5bb61eb267b8b473e/html5/thumbnails/30.jpg)
Resources
• AngularJS: http://angularjs.org
• ToDo MVC: http://todomvc.com
• Tools for Apache Cordova: http://aka.ms/cordova
• StackOverflow #multi-device-hybrid-apps