Angular Tutorial using REST APIs for Beginners

Cartoon man using computer talking about Angular JS


 

This is an AngularJS tutorial to show how to create a web application using Rest API integration. In this web application tutorial you'll learn how to create an AngularJS app. The full Angular source code is provided at the end of the tutorial.

What is AngularJS?

AngularJS, or more commonly Angular, is an open-source web development framework primarily sponsored by Google (or shall we say Alphabet) and a community of developers. The framework was developed to address the challenges met when developing Single Page Applications and web applications based on Model View Controller architecture. HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Core Concepts

Before going into details, the following section provides a quick introduction to the high-level terminology and concepts we will use.

ng: This is the core module for any AngularJS application and is loaded as soon as the application is started. The module itself contains the essential components for an AngularJS application to function. All of the built-in directives that ship with Angular use the prefix ng. It is recommended to not use the ng prefix on custom directives in order to avoid possible name collisions in future versions of Angular.

ngApp: A directive that designates the root element of the application. It is typically placed near the root element of the page - e.g. on the or tags.

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.

ngController: A directive that attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern.

$scope: an object that refers to the application model. It is an execution context for expressions. It is arranged in a hierarchical structure which mimics the DOM structure of the application and can watch expressions and propagate events.

MVC components in angular:

  • Model - Models are the properties of a scope. Scopes are attached to the DOM where scope properties are accessed through bindings.
  • View - The template (HTML with data bindings) that is rendered into the View.
  • Controller - The ngController directive specifies a Controller class; the class contains business logic behind the application to decorate the scope with functions and values.

Creating a weather App using AngularJS

In this post, we will create a simple AngularJS application to search and consume weather data from Yahoo's Weather REST API.
Let's start by creating a simple html page with a minimal mark-up. As you might have noticed, the mark-up just uses regular HTML5 and a reference to the angularJS library from the Google CDN.


The next step is to define the app itself. Add a new ng-app directive to the body and let's call it MyApp. Within the body, we specified an ng-Controller directive, which will act as binding glue for our HTML markup with the JavaScript. In simpler words, this controller will collect the data and pass it to the view so that it can be rendered.


Before going into further details for the final view, let's take a look at the JavaScript part. If you are a real beginner to angularJS, you might be amused to see how simple it is to call and retrieve data from any web service or REST API and show it on a web page.

The first line you see in the code below is the module. Modules are like containers for different parts of your app like controllers, services, filters, directives, etc. Using modules, you can divide your app into multiple parts that can work independently.

The second step is to define the controller for the "PostsCtrl" which we used in the mark-up earlier. Within the controller, we define a Scope that holds the Model data that we need to pass to the view. It uses AngularJS's two-way data binding mechanism to exchange model data with the view.

Later, we just call the REST API from Yahoo and store the response in the Datas property of the scope. Later, in the view, the weather data will be retrieved from the datas property.


We added some minor change(s) and styling using Bootstrap to make it pretty. You can view the final below. This app will allow you to search for the current weather of any city.

The app below is fully functional, go ahead and give it a try!


 

See the Pen Angular Tutorial using REST APIs for Beginners by ProTech Code Posts (@protech-code-posts) on CodePen.

 

 

References and further reading

 

 

  1. https://en.wikipedia.org/wiki/AngularJS
  2. https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
  3. https://en.wikipedia.org/wiki/Representational_state_transfer
  4. https://developer.yahoo.com/weather/

 

Published January 29, 2016