The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

angularjs-ionic-framework

AngularJS is turning out to be one of the best frameworks for building mobile apps across all major platforms.

One reason that Angular fits so well into the mobile developer toolbox is its features for interacting with backend web services and external data sources. Since most apps today are data-driven, it makes sense to use a tool built from the ground up to solve this problem.

Beyond that, AngularJS comes with some of the most modern and advanced software development practices ready-made and easy to use. You’ll find that building mobile apps with Angular is highly efficient and results in solid code that will scale up as you pile on the features.

Three-way data binding

Data binding is a popular concept in developer circles. The idea is when our data model updates, the UI also updates. This is great, but Angular takes it a step further: when our UI updates, we update the model to match.

This is called two-way data binding and it’s incredibly easy to do in Angular:

Firebase coined the term “Three-way Data Binding” which is the idea that we can not only keep our UI and in-memory data in sync (two-way data binding), but we can also sync the data with our backend services.

This means taking input from a user, processing it, saving it on the server, and keeping the UI in sync is incredibly easy to do with Angular. Coming from a jQuery or native iOS/Android background, you’ll find Angular’s data binding to be a huge timesaver for mobile development.

Reusable logic

Angular helps keep our view (UI), data model, and application logic separate. This means Angular lets us reuse our web application logic on multiple devices on multiple platforms, while still enabling us to customize the UI for each platform.

Previously, to target users across desktop, tablet, and mobile, our only option was to build a separate website for the Desktop, then build an iOS app with Objective-C, then an Android app with Java. We weren’t able to share any code, making application development expensive, time consuming, and risky.

With AngularJS, we can keep the funcionality for our application (in controllers) separate from the way our application looks. This works regardless of whether we take a Responsive Web Design approach, or custom UIs for desktop and mobile.

Testability

AngularJS uses the concept of Dependency Injection (DI) to make it easy to pull in pieces of your code from anywhere. One benefit of this is how easy it is to mock part of your code for testing, which is the process of substituting a real component for one that fakes the functionality for testing purposes.

On mobile, this is especially important due to the slower develop-deploy-test cycle. We can’t afford to waste time setting up and debugging a full physical enviornment each time we want to make a change in our app.

Imagine building an app that interacts with a Bluetooth device. If you use Angular and provide the Bluetooth functionality in a self-contained service, you can quickly mock this service and add fake Bluetooth data instead of having to painstakingly connect and reconnect with a physical Bluetooth device. Your mobile app won’t even know the difference!

Among Friends

AngularJS is being adopted by developers at an incredible rate (check out our last post on that). Google Trends for the last several years clearly shows the explosive growth of AngularJS:

This means by picking Angular we can take advantage of a growing number of high quality libraries and addons being created by the community. Need charts and graphs, analytics, or i18n support? It’s all there. See the growing ngmodules.org database for a good selection of these components.

Mobile UI with Ionic

One thing that is often missing when building a mobile app with web technologies is the lack of a native-style UI kit. Luckily, with Ionic, you get that in one free and open source package, complete with amazing AngularJS features. Check out our huge collection of mobile-focused components and utilities for building great apps with AngularJS and web technologies you already know and love.

Ionic is focused on using Web Standards, which means an Ionic app will fit right into your frontend stack, from desktop to tablet to mobile, and will take advantage of any existing web development experience on your team.

Ionic is part of a quickly growing community of AngularJS powered libraries that make building mobile apps with Angular incredibly fast and easy.

Go forth and build

AngularJS is a great choice not only for desktop apps, but increasingly for mobile apps as well. The combination of tight data binding across all parts of the application make developing data-driven apps with Angular fast and easy.

Being able to share application logic across desktop, tablet, and mobile apps is a huge plus which will save an incredible amount of time and money, and make it easier to add features for all your apps.

Angular’s focus on testability makes it easy to mock physical devices and situations (bluetooth, GPS, and accelerometer, to name a few), which can dramatically speed up the development process and make your code more battle hardened and testable.

It’s also a pleasure to develop in, and developers are increasingly learning and choosing to develop with Angular. It’s a safe bet for finding great developers to build your apps.

What are your thoughts? Have you found AngularJS great for mobile app development? Share your thoughts below

  • anm

    Hi,
    Ionic looks promising and I want to use it for an ecommerce portal. Few questions that are bothering me:

    Q1. I want to reuse the ionic app code for my “mobile web” site as well. How difficult is that going to be?

    Q1. Another question I need help with is – handling SEO. Can I reuse URLs same as the desktop for mobile web site as well, and can my mweb and android/ iOS app built with ionic handle the URLs correctly? For example http://mysite.comx/location/category/product – how to ensure how to open the right product if my app is installed on a device, and a person clicks on this link in google’s search results.

    Thanks

  • Kasper Bach

    Hi there, – I have a device that is sending a variabel to my phone via BluetoothLE. How to I get my ionic app to scan for this device and to get the variabel?

    Thanks

  • arun

    Hi, – How to get the web service call in local to other domain ????
    i have this error
    XMLHttpRequest cannot load link . No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access.