{"id":113,"date":"2014-04-10T15:00:00","date_gmt":"2014-04-10T15:00:00","guid":{"rendered":"http:\/\/localhost\/?p=113"},"modified":"2017-01-10T17:20:07","modified_gmt":"2017-01-10T17:20:07","slug":"angular-mobile-dev","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/angular-mobile-dev","title":{"rendered":"Building Mobile Apps with AngularJS and Ionic"},"content":{"rendered":"

AngularJS<\/a> is turning out to be one of the best frameworks for building mobile apps across all major platforms.<\/p>\n

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.<\/p>\n

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.<\/p>\n

<\/p>\n

Three-way data binding<\/h3>\n

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.<\/p>\n

This is called two-way data binding and it’s incredibly easy to do in Angular:<\/p>\n

Firebase<\/a> coined the term “Three-way Data Binding”<\/a> 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.<\/p>\n

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<\/em> timesaver for mobile development.<\/p>\n

Reusable logic<\/h3>\n

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.<\/p>\n

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<\/em>.<\/p>\n

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.<\/p>\n

Testability<\/h3>\n

AngularJS uses the concept of Dependency Injection<\/a> (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<\/em> part of your code for testing, which is the process of substituting a real component for one that fakes the functionality for testing purposes.<\/p>\n

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.<\/p>\n

Imagine building an app that interacts with a Bluetooth device. If you use Angular and provide the Bluetooth functionality in a self-contained service<\/em>, 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!<\/p>\n

Among Friends<\/h3>\n

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