Home

Welcome to the sencha-touch-angular-adapter wiki!

This is a proposed outline for the wiki. For now, please refer to the README

For brevity, let's refer to sencha-touch-angular-adapter as "stng" from here on out. :)

Sencha Touch is a full featured toolkit for building mobile applications. Angular enhances your browser and allows you to build sophisticated web applications with less code and with testable code. "stng" is an adapter that combines the two technologies allowing you to build web applications declaratively using tags rather than writing JavaScript, resulting in an application that is easier to maintain and test and that has the full power and beauty of Sencha Touch.

Quick Start

• Copy in the boilerplate HTML, include JS and CSS for Angular, Sencha and the adapter.
• Add the autostart meta tag. <meta name="auto-start" content="true">
• Add a carousel using <st:carousel>
• Add panels to the carousel using <st:panel>
• Add sencha widgets, like checkbox, using <st:checkboxfield ng:repeat="todo in todos" name="todo.done" label-width="80%" label="{{todo.name}}"></st:checkboxfield>

Cookbook (view and modify on JSFiddle)

• Wait/loading dialog
• Shared controllers
• Mixing regular HTML with Sencha widgets
• Navigate between panels in a carousel
• Page between items on a panel using $navigate
• Handling events

Common Problems

• When I use HTML it does not work! You can either use sencha widgets or HTML inside a st:custom. If your widgets are not rendering, check to see if you are using HTML rather than a widget like st:checkbox.
• Stores are not working Don't use sencha stores, use angular iterators via ng:repeat.

FAQ

• Can I use CoffeeScript with "stng" Yes, coffeescript works perfectly with "stng" See an example here.
• Can I generate "stng" compatible markup with HAML/Slim? Yes, in fact, using HAML is easier than generating complicated Javascript Sencha components. Just use "%st:carousel" tags like any other tags.