AngularJS - Framework for Apps

Slides from talk given at DevCon Yangon 2014

Transcript

1. AngularJS Framework for Apps @geeksean
2. Building Web Apps
3. Building modern Web Apps
4. Framework for building Single-Page Applications YouTube App for PlayStations
5. Why Angular?
6. For building high quality apps with standards
7. • Routing • Two-way data binding • Reusable, Clean, Modular • Template • Localization • Directives • Mobile Ready
8. AngularJS is very fast and lightweight. latest minified version is at 124kb
9. Two-way binding <!doctype html> <html ng-app> <head> <script src="angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html>
10. Directives • Easy and simple way to add ‘widgets’ to your apps. • Reusable • data-specific-logic • web components (coming in Angular 2.0) angular.module('docsSimpleDirective', []) .controller('Controller', ['$scope', function($scope) { $scope.customer = { name: 'Naomi', address: '1600 Amphitheatre' }; }]) .directive('myCustomer', function() { return { template: 'Name: {{customer.name}} Address: {{customer.address}}' }; }); <div ng-controller="Controller"> <div my-customer></div> </div>
11. Mobile Ready • ngTouch • offline storage (WebSQL, IndexedDB or localStorage) • ngSwipe • angular-gestures • Ionic Framework
12. ngTouch, ngSwipe and gestures • Detect and handle touch events • Register multidirectional swipe events • Handle tap, double tap, swipe, drag, pinch and rotate events with angular-gestures
13. Native App with Ionic Framework
14. • Performance focused with minimal DOM and zero jQuery • Hardware accelerated transitions • CLI to create, build, test and deploy apps • Build native apps for iOS and Android with Cordova
15. Looking Ahead • Material Design for Angular • Angular Dart • Angular UI (including Angular Bootstrap) • ZURB’s Foundation for Apps (coming in December) • Support for various languages, frameworks and tools • Build Chrome Apps and Extensions • Car Dashboard System based on AngularJS (General Motors)
16. AngularJS Myanmar on FB: https://www.facebook.com/groups/angularjsmyanmar/ Thanks!