AngularJS Essentials for Using Onsen UI Part 1

Part 1: Basics

Since the official release of Onsen UI 1.0, we have been receiving more inquiries relating to AngularJS. Onsen UI is a front-end UI framework built on and optimized for AngularJS and Topcoat, which were developed by Google and Adobe respectively. This means that Onsen UI requires basic knowledge of AngularJS. Therefore, we are going to learn today the helpful basics of AngularJS to use Onsen UI.

AngularJS is the JavaScript MVVM framework developed by Google (also referred as MVC or MVW). You can download it from here.

You can start using by loading it with a script tag as below; No additional setup is required.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>

Loading AngularJS into a web page by itself does not bootstrap AngularJS. You will need to insert “ng-app” to bootstrap AngularJS within the tag as shown in the example below:

Please remember that AngularJS will bootstrap within the tag where ng-app is inserted.

<body ng-app="Onsen">

In this case, ng-app=”Onsen” applies the Onsen module that is declared in the script tag to inside the body tag. The declaration is as below:

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

The “Onsen module” is my own module, defined and named by me.

Modules are special objects in AngularJS. AngularJS can create useful components like “Controllers”, “Directives”, and “Services” within these modules.

As a quick introduction to these components, “Controllers” are what’s known as controllers in MVC, used to notify about any changes to the model within the view. “Directives” are used to create custom HTML components. “Services” are used to share variables and functions with Controllers or Directives.

Let’s get back to the example and see what’s inside the body tag of the HTML.

Ng-controller attributes are written within three div tags. Then, within each, there is {{greeting}} which is an AngularJS expression.

<div ng-controller="MorningCtrl"> 
<h2>{{greeting}}</h2>
</div>

The above code applies the “MorningCtrl” controller to the div tag. Also, {{}} is associated with the Controller’s model (data).

Let’s look at the corresponding script tag:

//Define MorningCtrl 
Onsen.controller('MorningCtrl', function($scope){
$scope.greeting = "Good Morning!";
});

The controller() function of the module creates the MorningCtrl controller. Next, the $scope value is passed as the parameter.

This $scope is used to reference what’s known as a model in MVC. By attaching functions or variables to $scope objects, they can be referenced from the above-mentioned “{{}}” AngularJS expression or many other AngularJS syntaxes.

This means that “M” (the model) within the MorningCtrl “C” (the controller) that is:

$scope.greeting = "Good Morning!";

Can be referenced from:

<h2>{{greeting}}</h2>

That is “V” (the view). As a result, the “Good Morning!” text will be displayed in {{greeting}}.

When any data ($scope.greeting in this example) changes within the scopes of a controller (MorningCtrl in this example), AngularJS will immediately detect the change and reflect it within the view ({{greeting}} in this example). This will free developers from the tedious coding needed to reflect data changes within the view. AngularJS can automatically take care of those tasks for you.

In AngularJS, each Controller has a different $scope. The $scope of these three “MorningCtrl”, “DayCtrl” and “NightCtrl” controllers are different objects. In the above example, three different values of “Good Morning”, “Good Day!” and “Good Night!” are passed to the $scope.greeting of each controller, and this is why different values are displayed in {{greeting}} as shown below:

AngularJS has a single “$rootScope” root scope, which can be described as the sole parent of all other “$scope” scopes. Each scope ($scope) is a descendant of this $rootScope.

The next code is a simple example of how C (the controller) will notify and reflect the change to M (the model) within V (the view) in AngularJS.

The text shown below is the result of the above code. You can enter any text here.

<p>Hello {{name}}</p>

Then, you should be able to see the {{name}} after “Hello” is updated to the text you entered.

The ngModel directive specifies the model by writing ng-model=”name” as below: This “name” is data-bound to $scope.name within HelloCtrl.

<input type="text" ng-model="name">

With this data-binding, AngularJS will detect any changes in the $scope.name value, and automatically reflect the updated data to the above-mentioned {{name}}.

In AngularJS, controllers can detect any changes to the model and automatically notify the view.

In the next part, we will learn how to register click events with AngularJS, and how to use AngularJS with jQuery.


Originally published at onsen.io on March 3, 2014.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.