How AngularJS communicates with web services

Few posts ago I have created a simple open source AngularJS project named Angular Starter. The structure and overview of Angular Starter is covered in one of HTMLCenter blog posts.

This time, I’m going to introduce the example of http communication to Angular Starter application in order for the web app to communicate with cloud-based services. APIs and web services are usually the main sources of data for Angular.js applications and a good example always helps.

Angular Starter Update

Recent Angular Starter source update has introduced example communication with web service in order to retrieve users IP address before proceeding with login. web service is great for testing various API requests. It can mock many example API responses, including but not limited to xml, json, html and it even supports streaming response examples. Angular Starter project uses this service for receiving IP address of the client application.

How to Customize Bootstrap – The Resources You Are Looking For

As we all know, Bootstrap can be used for multiple purposes and is capable of running any type of site. However, when it comes to the appearance of its individual elements – things like content blocks, forms, buttons – it’s very easy to spot the typical Bootstrap footprint, so to speak.

As a result, many Bootstrap sites seem to look very much alike.

Note. This is part three in our Bootstrap series. Previously, we talked about whether or not you should be using Bootstrap in the first place, and we also listed the ultimate set of Bootstrap resources for developers who want to get started with the framework.

This time, the topic is about customizing sites built with Bootstrap framework.

Or in other words, what we’re going to be focusing on today is how to make your Bootstrap site stand out from everyone else’s.

How Framework7 and PhoneGap fit together

This is the final part of HTMLCenter tutorial about Framework7 mobile HTML5 framework. In previous part one we have created a skeleton mobile web application with several views. In part two we added login functionality and communication to cloud-based service APIs (Parse BaaS). This final part is about wrapping up the existing Framework7 application into PhoneGap (Cordova) wrapper and creating native mobile app as a result.

PhoneGap is a popular choice among mobile web app developers to package their HTML5 applications for distribution as native mobile apps. PhoneGap framework is based on Apache Cordova open source project which provides this exact functionality. It also supports custom plugin system which lets developers hook into native mobile OS API’s.

We are going to start new PhoneGap project and add our existing Framework7 application in.

Ultimate Collection of Resources for Developers Starting With Bootstrap

A couple of weeks ago, we published a general overview of Bootstrap and its pros and cons. Basically, the goal was to help you decide whether or not Bootstrap is a platform worth using for your next web development project.

Feel free to check that post right now if you haven’t already (link).

Some of you have expressed really strong opinions in the comments section under that post, which only proves that Bootstrap framework remains to be one of the hot topics in the web development world today. So as a follow-up, this time we’re taking a look at some of the most useful Bootstrap developer resources from around the web.

This list goes through various types of information, tutorials, and tools related to Bootstrap framework. I’ve divided it into a handful of categories just to make everything a bit easier to grasp and allow you to skip things you’re not interested in.

Building Angular.js Starter application

We have recently created example Angular.js web app with the minimal generic functionality. Small enough to be called framework but with built-in test cases, controllers and several views with user forms. The goal is to have a reusable foundation for Angular projects. This blog post is about how we designed Angular Starter structure. Part two of this posts is about consuming APIs with AngularJS.

Why Angular Starter

There are many tutorials on how to start application development with Angular.js. As well as a good few projects on GitHub with the Angular app skeletons. Like the angular-seed project created by Angular.js development team itself.

What we needed was a minimal project, with pre-built basic functionality and structure of communication with web services and APIs. And of course automated test cases.

We wanted test cases to get some special attention as we are big fans of TDD (test-driven development). Having the majority of test cases created even before any app functionality is coded is a good help to keep those bugs away.

I haven’t found the open source project which completely match my requirements and Angular Starter was born. It’s an open source project, hosted on GitHub and I welcome all suggestions and comments.

What exactly is its structure and how it can help to start your Angular apps?

Framework7 and Parse for User login

This is the second tutorial about building Framework7 HTML5 mobile web application. In the first tutorial part we have prepared the base by creating 3 mobile application views. One of them was the app user login view. In this tutorial part, we will make user registration and login functionality live by enabling login view communication with Parse -cloud-based backend service. The final third part is about wrapping Framework7 application into PgoneGap.

Creating Parse User Database

Nowadays you have many options once it comes to cloud-based storage options for mobile web apps. We did a good summary on HTMLCenter a few posts ago.

For todays tutorial, we are using Parse service. Parse at the time or writing supports 3 main functions – Core for data storage and user management, Push for push notifications and Analytics for logging different app events. They have free tier available for starting apps – it allows for up to 30 requests per second throughput and has 2TB data transfer limit per month. I’m sure we will not need this capacity in our tutorial!

Go ahead and create a free account on Parse. After you signup / login you can create new applications. I created one called framework7test dedicated for this tutorial. You can see it below.


Developer Resources