AngularJs : Implement a view with tabs

Tab is a mostly used feature in webpages nowadays. It helps to keep the separation of content and user to view the different content without refreshing page.

This tutorial explains how to make a webpage with tabs using AngularJs as following example

Angular material, an UI Component framework for AngularJs is used in above example. So before go in to that lets make a web page with AngularJs fundamentals and after that we can use the Angular Material for a good look.
Here is the example of tabs using AngularJs fundamentals with the code.

Lets see what we have done

In JavaScript code we have two methods with an array(tabs) and string variable (currentTab), attached to the scope of TabsCtrl controller.

    angular.module('TabsApp', [])
    .controller('TabsCtrl', ['$scope', function ($scope) {
    $scope.currentTab="One";
    
    $scope.tabs = [{
            title: 'One'          
        }, {
            title: 'Two'           
        }, {
            title: 'Three'
        }
     ];

    //$scope.currentTab = $scope.tabs[0].title ;

    $scope.onClickTab = function (tab) {
        $scope.currentTab = tab.title;
    }
    
    $scope.isActiveTab = function(tabTitle) {
        return tabTitle == $scope.currentTab;
    }   
}]);

1. onClickTab method takes object as input and set title attribute of that object as the currentTab
2. isActiveTab method takes and string as input. Then return true if it equals to currentTab and return false otherwise

<ul>
            <li ng-repeat="tab in tabs" 
                ng-class="{active:isActiveTab(tab.title)}" 
                ng-click="onClickTab(tab)">{{tab.title}}</li>
        </ul>

Angular directives are used in the HTML code and lets see what do they do.

1. ng-repeat will go through all the elements in tabs array and repeat <li>elements
2. ng-class will apply class active if the isActiveTab method returns true
3. ng-click will execute onClickTab method when clicked on <li>element

<div ng-show="isActiveTab('One')">
</div>

ng-show will display div elements only if isActiveTab method will return true.
 Here is the link for more tab implementations using Angular materials.

Use routing in AngularJs

In a Single Page Application (SPA) routing is a important part. AngularJs also provide functions to make easy routing in our SPA. It helps us to,

• Change the page without refreshing
• Display different data on different pages

Lets see how to use AngularJs routing in our application to give a better user experience

Our simple app has a menu bar and when different tabs are clicked it should display different pages without refreshing the whole page. It should display list of employees only in home page.

Markup for Main page

<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="myApp">
<head>  
  <!-- CDN for bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- CDN for Angulat min and angular-route-->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
 

AngularJs : Brief overview of Angular Services

What are Services in AngularJs

According to AngularJs Documentation Services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.

It lists two important properties of AngularJs services

• Lazily instantiated – Angular only instantiates a service when an application component depends on it.
• Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.

There are some useful built in services such as $http and $animateoffered by angular but services can be implemented according to needs in application.

AngularJs : Adding user Inputs to a HTML table

Some times it would be great if you can update your html view real time with user inputs without sending data to servers. It would increase efficiency of your web application (It could be insecure if used in inappropriate cases).

Here is a simple project for update a html table with user inputs
You need to have a basic understanding about Angular directives, controllers, modules, and scopes to understand this example.

<!DOCTYPE html>
<html  ng-app="app" >
   <head>
      <title>Ajax With Angular</title>
      
      <style>
         table, th , td {
            border: 1px solid grey;            
            border-collapse: collapse;
            padding: 5px;
         }         
          th{
               background: lightgray;
          }
      </style>
      
   </head>

AngularJs : AJAX calls with Angular js

AJAX is a necessary part of today web applications. So how to make an AJAX call with AngularJs.

Think we need to make an ajax call to server to get details of a set of student and display when a button clicked.

Here is the complete code for that scenario and I will explain later what happens there.

<!DOCTYPE html>
<html>
   <head>
      <title>Ajax With Angular</title>
      
      <style>
         table, th , td {
            border: 1px solid grey;            
            border-collapse: collapse;
            padding: 5px;
         }         
          th{
               background: lightgray;
          }
      </style>

Angular Js : Root Scope of an Application

When we are dealing with scopes in an angular Js app it is important to know which scope you are dealing with, at any time. If you have only one scope in your application it is not necessary to be careful about what scope you are using, but for larger application it is not the case, there can be sections in the HTML DOM which can only access certain scopes.

 However all applications have a root scope that is available in the entire application. Here is an simple example on how to access root scope in an Angular Js application.

 Module and Controller for the app

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

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["DOG", "BIRD", "COW"];
    $rootScope.lastname = "ANIMALS";
});

Repeating HTML elements in AgularJs

When we want to use a set of HTML elements repeatedly in our AngularJs application there is a basic directive called "ng-repeat"

Here is a set of examples for using "ng-repeat" directive

Example 1

<!DOCTYPE html>
<html>
<script src="scripts/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng-init="names=['employee1','employee2','employee3']">
  <p>Looping with ng-repeat:</p>
  <ul>
    <li data-ng-repeat="employee in names">
      {{ employee }}
    </li>
  </ul>
</div>
</body>
</html>

directives in angularJs

Names of AngularJs directives starts with "ng-" prefix. Directives are nothing but HTML attributes extended with "ng-" prefix.

There are three main basic directives that every Angular developer must know

• ng-app 
  Initialize an AngularJs application
  
• ng-init 
  Initialize application data
  
• ng-model 
  Binds the value of HTML controls such as input, select, textarea to application data.
  

Here is a simple example of usage of These three directives

How to add an our own directive in angular application.

AngularJs has a useful set of built in directives.They offer a useful set of functionalities for our angular application. What if we want to add a different directive

A new directive can be add using directive() method as same as adding a controller

• Following code displays how to add a directive and use it our application.

<!DOCTYPE html>
<html>
 <script src="scripts/angular.min.js"></script>
 <body>

  <div ng-app="myApp" my-directive></div>

  <script>
   var app = angular.module("myApp", []);
   app.directive("myDirective", function() {
    return {
        template : "This is a my own directive"
    };
   });
  </script>

 </body>
</html>

Adding model and controller AngularJs application.

Module

A module in angularJs is a collection of services, directives, controllers, filters and configuration information. In simple words it is a container for different parts of an application.

A module can be created in Angular as follows.

var app = angular.module("myApp", []);

angular.module() method takes two parameters.

• First one is name of the module which is "myApp" in this example.
• Second one is dependencies for the module.( it will be discussed in future tutorials)

First Step For Angular Js

AngularJs is developed and maintained by Google to allow developers to develop well architectured and easily maintainable web-applications. It is nothing different to plain HTML but simply an extension to HTML with new attributes.

AngularJS is a framework for dynamic web applications and it is client-sided so all these things are happening in browsers and you get the elegance of standalone application. AngularJS makes use of declarative programming for building UI.