Menu

Apps with AngularJS

By Ali Cormack

Updated - 13/2/2014 10:05

Mobile development is converging. Websites are beginning to feel like applications in their own right, with hardware powered graphics, smooth interfaces, and multiple versions for multiple devices. That begs the question, can web technologies power a full blown app?

PhoneGap - The Interface

Phonegap Build Bot

In order to make an application feel as responsive as its native counterparts we'll need to take advantage of several new technologies. Having an interface to access the functionality of the phone such as accelerometer, camera and gps is crucial. PhoneGap allows us to do this, interfacing with the device to allow access to these hardware features through javascript. For example, this simple javascript snippet allows access to the camera:

navigator.camera.getPicture(cameraSuccess,cameraError,[cameraOptions]);

You can then do anything you are able to do natively, apply filters, effects, save the photo, publish it to facebook, and so on. The PhoneGap API Docs explains dozens of these in depth, with everything from Geolocation to Notifications available should you need them. There are also tonnes of 3rd party plugins if you can't find what you need in the official documentation.

To get started you'll need to install any SDKs you want to work with (ie Xcode, Android SDK), grab Node.js and run the following commands in terminal:

$ sudo npm install -g phonegap
$ phonegap create hello com.example.hello "HelloWorld"
$ cd hello
$ phonegap platform add ios
$ phongeap prepare

This installs PhoneGap, creates a HelloWorld project, and adds ios as a platform. You could replace 'ios' with 'android', 'blackberry' and so on. Congratulations! You now have a fully working template project to get started with. It's that simple. In the root you'll find a 'www' folder, where the majority of your development will take place. In it you can create a website just as you would normally, with the advantage of the operating system bridges PhoneGap provides. The following links should help you become a PhoneGap pro:

You could create a standard website here and continue on your way, publishing to every platform that comes to mind. However after a while it should become obvious that old fashioned web development isn't the most efficient, pleasent or effective way to go about things. This is where AngularJS comes in.

Angular JS - The Structure

AngularJS Logo

Designed by Google for creating web applications, AngularJS is a powerful javascript framework ideal for creating Single Page Applications (SPAs), the same kind of applications that you use everyday on your phone. SPAs are applications with a central view that dynamically loads content when the user needs it, and unloads it when it's no longer relevant. This is perfect for mobile devices, where every scrap of memory counts.

It also more importantly reintroduces the paradigms of mobile development into html and javascript. Through the use of constructs known as modules, behaviours, and directives, applications can be split in to Model, View and View-Model (or View Controllers to any iOS developers). This is a key seperation of an applications back-end, and what it shows to the user, which becomes hugely important as apps are updated, redesigned and morphed into ever larger beasts.

The base construct in AngularJS is a module. A module defines core functionality of a section of your app, to which you can add controllers, services and so on. If you have two chunks of code that don't communicate or serve any similar purpose, these are placed in different modules. A module (commonly called apps in Angular) is created like so, with the last parameter used to load dependencies, such as other services, directives and so on:

var app = angular.module('helloworldapp', []);

Directives are a core part of AngularJS, and function as templates which can take relevant data from modules and present it on the page dynamically. This could be used for displaying a list of products with their images, prices etc, in only a few lines of code. As an example of a directive:

angular.module('docsSimpleDirective', [])
  .controller('Ctrl', function($scope) {
    $scope.customer = {
      name: 'Naomi',
      address: '1600 Amphitheatre'
    };
  })
  .directive('myCustomer', function() {
    return {
      template: 'Name: {{customer.name}} Address: {{customer.address}}'
    };
  });

<html ng-app="docsSimpleDirective">
<head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
     <script type="text/javascript" src="script.js"></script>
</head>
<body>
     <div ng-controller="Ctrl">
          <div my-customer></div>
          <div my-customer></div>
          <div my-customer></div>
     </div>
</body>
</html>

This simply creates variables name and address in the controller, which the directive 'myCustomer' references each time it is called via HTML. These can obviously be much more complicated, referencing large datasets and showing them to the user. As you may imagine this is all hugely useful for mobile development. The combination of MVC and templates (in the form of behaviours and directives) means development is hugely modular, and code can be easily reused throughout the app. It is actually even simpler than native design in some cases. For example, table views in iOS require delegate methods to define what i displayed and so on. In Angular you simply define an array on the scope and look through it in the HTML using ng-repeat:

<list>
<item ng-repeat="item in tableViewData" ng-click="cellClicked(item)">
     <a class="itemstyling">
          <img ng-src="img/{{item.Image}}@2x.png"/>
     </a>
</item>
</list>

I'm not going to go into much more depth on AngularJS here as there are countless more detailed tutorials from more experienced veterans of the framework. Some great resources to get started are:

  • Egghead.io - Over 100 short and consise video tutorials. You can learn Angular JS top to bottom by following these.
  • ng-conf - Videos from the official AngularJS conference held by Google.
  • AngularJS Sticky Notes - Goes through making an AngularJS app from scratch. Explains controllers, services, and so on.
  • Directives - Fully explains what exactly directives are, and why you should use them.

What we need now is to make the app feel native. This means navigation bars, tabs, buttons, and so on.

Ionic

Ionic Framework Logo

Ionic is yet another layer on top of PhoneGap and AngularJS, that will make apps look and feel native. It is a front end framework that you can take advantage of to cut out hours of work tweaking css and designing directives for Angular, instead you use the classes provided by Ionic and get on with the real content of your app. This covers everything you would get with a native app (and more), such as table views, navigationbars, buttons, grid views, etc.

iPhone ionic layout

Utilising this is incredibly simple. You simply create an instance of the class you are interested in, plugin the content, and Ionic handles the rest. Combining this with AngularJS is a real game changer, as you can simply handle your data with javascript, pass it to the correct controller, and create the view purely in HTML. This can also then all be customised using CSS or SASS, for custom color schemes, tweaks, and so on.

As well as these components, Ionic comes with a set of Controllers. These should be immediately familiar to iOS developers, as different sections of the interface are treated as child views/view controller, creating a navigation tree which the user can go back and forth through. These are used in exactly the same way as AngularJS, by assigning modules and view controllers to sections of code, the scope can be accessed and data bassed into the markup.

For example, an iOS7 style navigation bar is setup as follows:

<body ng-app="starter">

  <!-- The nav bar that will be updated as we navigate -->
  <nav-bar animation="nav-title-slide-ios7" 
           type="bar-positive" 
           back-button-type="button-icon" 
           back-button-icon="ion-arrow-left-c"></nav-bar>

  <!-- where the initial view template will be rendered -->
  <nav-view animation="slide-left-right"></nav-view>

</body>

There are also exciting controllers such as slide boxes, side menus, modal views, all the good stuff you would get natively.

Sliding animation

Ionic is a hugely popular framework, with a good community and numerous tutorials to get you going. Some good places to start are:

  • Ionic Documentation - A complete overview of nearly all ionic components and controllers. All with code samples.
  • Mobile Apps with Ionic - Shows you how to encorporate Ionic with PhoneGap to get your apps on devices.
  • Ionicons - References for the hundreds of icons Ionic provides for use in-app.

Overview

Hopefully this brief overview of Phonegap, AngularJS and Ionic has shown you mobile web-driven apps are now a viable alternative to building natively. The adaptability they provide is second to none, and the overhead of having to develop in entirely different languages for different operating systems is completley removed. We'll be bringing you some exciting web based apps from Eden very soon, so keep an eye out!

Categories

Tutorials
comments powered by Disqus

We’re a top UK digital agency - wahoo!

By Sophie Hardbattle

We're Eden Agency - one of the UK's top digital agencies.

Read more

An Introduction to Building a SpriteKit-UIKit Hybrid App

By Alan Chung

A guide to help you get started on making an iOS app that seamlessly combines the visual punch of SpriteKit with the practicality of UIKit.

Read more

How to build a material design prototype using Sketch and Pixate - Part Three

By Mike Scamell

Part three of a three-part tutorial on building a material design prototype. This section focuses on adding more detail to the prototype in Pixate.

Read more

We're Hiring - Web Developer Role

By Craig Gilchrist

We are currently seeking a full time full-stack web developer to join the team at our Knaresborough office.

Read more

How to build a material design prototype using Sketch and Pixate - Part Two

By Mike Scamell

Part two of a three-part tutorial on building a material design prototype. This section focuses on creating a interactive login screen in Pixate.

Read more