AngularJS – Introduction

Hello Readers,

I would like to write something I learnt recently about AngularJS. AngularJS is a javascript framework developed by a google employee. AngularJS is an easy to use framework. We have to just include some attributes inside the html tag. We can easily make our html page dynamic with very less amount of code and less complexity.

<!DOCTYPE html>
<div ng-app="" ng-init="month='August';">
<p ng-bind="month"></p>
<script src="//"></script>

If you see through the highlighted lines, I have included a script tag, which gets source from Google. Then inside div tag, ng-app=””, which defines the angular js app name. Then ng-init is used, in order to define variables, which can be used all over the app. ng-bind is used to display the value of variables, that we defined earlier.

The output of this code is “August”.

I would like to show you a demo of Calculator developed using AngularJS


   <div class="calcu" ng-app="" ng-controller="calcaController">
      <div class="row val">
         <input class="result" type="text" ng-model="result">
      <div class="button-set">
         <div class='row' ng-repeat='row in keyboard'>
            <div class="button" 
               ng-repeat='key in row'
// here I use an IIFE to make sure I don't polute
// the global scope
(function() {
   // Injecting $scope and $parse 
   function calcaController($scope,$parse) {
      // make a array that holds the 
      // rows as arrays of keys
      $scope.keyboard = [
      // a small helper function to handle every 'key'
      $scope.handleKey = function (key) {
         if (key === 'C') { 
            $scope.result = '';
         if (key === '=') {
            $scope.result = $parse($scope.result)($scope);
         $scope.result += key;
      $scope.result = '';
   angular.module('calc', []) //
      .controller('calcaController', ['$scope','$parse', calcaController]);


I have used both jquery.js and angular.js library. jQuery library is to focus on the textbox when page loads and when user clicks on Clear button. AngularJS is included in order to use the ng-app,ng-bind attributes.



Thanks for reading.

Feedback are welcome. Please feel free to ask questions.

Don’t forget to subscribe to Geeks.Gallery, to get free emails to your inbox.

Subscribe to Geeks.Gallery

Follow me


Web Developer at Energy Alternatives India
I'm interested in developing Web applications andkeen on learning new technologies.

View Nagarajan's Profile
Follow me

Latest posts by Nagarajan (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *