Intro to AngularJS

Developers need to have tools which enable them to concentrate on Functionalities rather than managing low level details of their FrontEnd application. AngularJS is a MVC framework for JS Apps

Intro to AngularJS
Intro to AngularJS


Front end development has taken its pace and now it requires high potential from both side; from developer end to the browser end. And yes, from both sides; things are similarly speeding up.

The web apps and portals are the areas of FrontEnd development where developers need to have a tool or library which enables them to concentrate on the Business data and Business Process rather than managing the low level details of their FrontEnd application.

As we know all this is accomplished by JavaScript. There are some powerful tools and libraries available which works on MVC architecture. Among which AngularJS is one.

Here is a basic intro to AngularJS.

AngularJS is backed by Google. It has internal support to templates(views) and has tight binding to the data-models with views; which enables quick reflection of changes in model to the view.

Getting started with it is very simple. But before that, let's have a look at the jargons related to the framework.

  • AngularJS works with modules; so everything we code will be part of a module.
  • Dependency Injection is the main way of linking the different modules and other features of angular.
  • There will be one module which will behave as App and other modules will be sub modules
  • Expressions are the key elements with which the scope or model data can be accessed in the views.
  • Controllers are the functions attached to the scope for some operations on the scope models.
  • Services are the the dataset providers. These services can be configured to fetch the days from the remote source by Ajax or from the local data store like cookies or local storage or indexedDB etc.
  • Directives are the parts which will be written in HTML and later will be replaced by the AngularJS.

Well there is so much of the jargon associated with the AngularJS but for now this is fair enough to start with.


So let’s come to our first app with AngularJS. Very first directive is ng-app which will tell that following part comes under our AngularJS application. And another is the controller directive ng-controller which will attach a controller function to the certain part of HTML. That part of HTML will be the scope for that directive. Let's take a look at our application.

//angular module named time2hack
//contained by app variable
var app = angular.module('time2hack', []);

Now we have the controller function which will handle the scope binding. In this scope we will create some variables which will be directly reflected in the view. For their reflection we will use the Expressions.

//code for the controller function
app.controller('MainController', ['$scope', function($scope){
    $scope.title = 'Time to Hack';
    $scope.subTitle = 'Place to find best Hacks and Tweaks...';
}])

Expressions are the the statements written inside the double curly braces {{ expression }}. Here we can also use the filter to but we will discuss about it in next article of AngularJS.

<!--HTML for the views using expressions-->
<body ng-controller="MainController">
<header>
    <h1>{{title}}</h1>
    <p>{{subTitle}}</p>
</header>
<nav>
    <!-- Navigation Goes Here -->
</nav>
<section>
    <!-- Other Parts of Page -->
</section>
<footer>
    <p style="text-align:center">&copy;{{title}}</p>
</footer>
</body>

But wait; what if have to execute any function on the scope? So we can define the function in the controller in following way

//code for the scope function
$scope.showAlert = function(str){
    alert(str);
}

And this function can be bound to any event directive inside the view. Here’s how we have bind the function with click event. To bind with click we will use here ng-click directive. Below is the code for that:

<!-- Section having ng-click on button -->
<section>
    <center>
        <button type="button" ng-click="showAlert('Hello World!\n-Time to Hack...')">Show Alert</button>
    </center>
</section>

Similarly there are lot of directives to easily accomplish the things. The whole list can be obtained at AngularJS API Reference https://docs.angularjs.org/api.

Demo Β Download


Credits