Coming Soon: Angular Support in Titanium

We are excited to announce that you will soon have a new way to write Titanium apps. Get ready to harness the cross-platform power of Titanium with Angular!

Titanium as a New Platform for Angular

Thanks to Angular’s modular architecture and the possibility to introduce platforms other than just the browser, we chose Angular to give you an additional development kit for creating Titanium apps. You will be able to take full advantage of Angular features and concepts like modules, components, dependency injection and routing – all topped with easy access to Titanium in templates, and of course in TypeScript.

Example Component

Let’s take a quick look at an example from our KitchenSink application we are currently porting from Alloy to Angular. The template for a list view looks like this with Angular:

<Tab title="Controls" ios:icon="images/icons/controls.png">
   <Window title="Controls" barColor="#1976d2" [titleAttributes]="{ color: '#FFF' }">
       <ListView (itemclick)="openItem($event)">
           <ListSection>
               <ListItem title="Views" itemId="views"></ListItem>
               <ListItem title="Label" itemId="label"></ListItem>
               <ListItem title="Tabbed Bar" itemId="tabbed-bar" *platform="'ios'"></ListItem>
               <ListItem title="Toolbar" itemId="toolbar" *platform="'android,ios'"></ListItem>
               <ListItem title="Command Bar" itemId="command-bar" *platform="'windows'"></ListItem>
               <ListItem title="Switch" itemId="switch-control"></ListItem>
               <ListItem title="Stepper" itemId="stepper" *platform="'ios'"></ListItem>
               <ListItem title="Slider" itemId="slider"></ListItem>
               <ListItem title="Activity Indicator" itemId="activity-indicator"></ListItem>
               <ListItem title="Picker" itemId="picker"></ListItem>
               <ListItem title="Alert Dialog" itemId="alert-dialog"></ListItem>
               <ListItem title="Option Dialog" itemId="option-dialog"></ListItem>
               <ListItem title="Text Field" itemId="text-field"></ListItem>
               <ListItem title="Text Area" itemId="text-area"></ListItem>
           </ListSection>
       </ListView>
   </Window>
</Tab>

All Titanium views are exposed as elements that can simply be used in any template. Note the special *platform directive, which allows you to only render elements on certain platforms (as many of you already know from Alloy). Assigning properties/attributes or binding event handlers is done just the way you are used to from Angular.

The corresponding component for the above template is also pretty straightforward:

@Component({
   selector: 'ControlsTab',
   templateUrl: 'controls.component.html'
})
export class ControlsComponent implements AfterViewInit {

   @ViewChild(ListSectionDirective) section: ListSectionDirective;

   constructor(private router: TitaniumRouter) { }

   ngAfterViewInit() {
       const listSectionProxy = this.section.listSection;
       const items = listSectionProxy.items
       for (let i = 0; i < items.length; i++) {
           const item = listSectionProxy.getItemAt(i);
           item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE;
           listSectionProxy.updateItemAt(i, item);
       }
   }

   openItem(event) {
       this.router.navigate(['controls', event.itemId]).catch(e => Ti.API.error(e.message));
   }
}

We access some of the component view’s children and make use of Angular’s constructor injection to get the instance of our special Titanium router.

If you already know Angular, this should all look pretty familiar to you. And if not, consider using the time before our first public preview release to dive into Angular using their awesome docs & tutorials. Then, jump right back into the action and combine your Titanium knowledge with Angular with our upcoming technical preview.

Technical Preview and Roadmap

We think this is an awesome new feature and want to hear your feedback as soon as possible. So, we are planning to release the first technical preview by the end of February. This first preview includes the latest state of our Titanium platform for Angular with support for most major Angular features as follows:

• Use all Titanium elements in Angular component templates.
• Handle navigation throughout your app with the Angular router.
• Services with updated APIs for some commonly used workflows like alert dialogs (including confirm and prompt dialogs), modal views, accessing device environment and global enums and constants to better fit Angular’s architecture.
• New project template available with appc new –ng
• Fully integrated into the existing CLI build pipeline.

Two important features that are not directly tied to Angular will be missing from the first technical preview: support for incremental builds using live sync / hot module reloading and the use of CSS to style your components. We aim to include these in a later release.

Although we are quite confident with the progress made so far, remember that this will be an early stage preview and is under ongoing development. With your feedback on our technical previews, we aim to target the first stable release by the end of 2018.

Stay tuned!