Mobile HTML5 websites and hybrid Apps with AngularJS - Bonamico
5 likes1,501 views
This document discusses using AngularJS to build mobile HTML5 websites and hybrid mobile apps. It provides an overview of how AngularJS allows developers to use modern web standards today and build modular, robust and testable apps. It then demonstrates a sample AngularJS mobile app for presenting slides and discusses various techniques for optimizing performance, handling touch/gesture interactions, storing data and packaging apps for distribution.
![ngSlides.service('slidesMarkdownService', function ($http) {
var converter = new Showdown.converter();
return {
getFromMarkdown: function (path) {
var slides = [];
$http({method: 'GET', url: path}).
success(function (data, status, headers, config) {
var slidesToLoad = data.split(separator); //two dashe
s
for (i = 0; i < slidesToLoad.length; i++) {
var slide = {
content: slidesToLoad[i],
//.. init other slide fields
};
slide.html = converter.makeHtml(slide.content);
slides.push(slide);
}
});
return slides;
} } })
A service to load slides from markdown
11](https://image.slidesharecdn.com/codemotion-carlo-bonamico-angularjs-mobile-140418021529-phpapp01-140515074945-phpapp02/85/Mobile-HTML5-websites-and-hybrid-Apps-with-AngularJS-Bonamico-12-320.jpg)
![binding the model to the html
<body ng-app="ngSlides" ng-class="slides[currentSlide].background"
ng-controller="presentationCtrl">
<div id="slidesContainer" class="slidesContainer" >
<div class="slide" ng-repeat="slide in slides"
ng-show="slide.number == currentSlide" >
<div ng-bind-html="slide.html"></div>
<h4 class="number">{{slide.number}}</h4>
</div>
</div>
</body>
and a very simple css for positioning elements in the page
A simple declarative view
12](https://image.slidesharecdn.com/codemotion-carlo-bonamico-angularjs-mobile-140418021529-phpapp01-140515074945-phpapp02/85/Mobile-HTML5-websites-and-hybrid-Apps-with-AngularJS-Bonamico-13-320.jpg)
![Two-way Databinding
split the view from the logic {{slide.number}}
Dependency Injection
gives decoupling, testability & enriching of code and tags
function SlidesCtrl($scope, SlidesService) {
SlidesService.loadFromMarkdown('slides.md');
}
The power of composition - of
modules
module('slides',['slides.markdown'])
directives
<h1 ng-show='enableTitle' ng-class='titleClass'>..</h1>
filters
slide in slides | filter:q | orderBy:title | limit:3
...
AngularJS magic is made of
15](https://image.slidesharecdn.com/codemotion-carlo-bonamico-angularjs-mobile-140418021529-phpapp01-140515074945-phpapp02/85/Mobile-HTML5-websites-and-hybrid-Apps-with-AngularJS-Bonamico-16-320.jpg)
