Basic Components Of Angularjs

Posted on Posted in Angularjs, Technology

What are the basic components / modules of angularjs ?

A module / container act as a container for the different parts of your app – controllers, services, filters, directives, etc.

Before we go into deep, one term $scope we need to aware. $scope joins controller with the views. In controllers, model data is accessed via $scope object. Scope passed as a argument in function, like we have in controller.

To use all these modules you need to start your angular app. Basic syntax of app, can be place in app.js file.

var myApp = angular.module('myApp', [

Why we need all this ?

  • Controllers helps to make your app in sorted way using MV* structure, which is used to builds logic’s. We can make as many controller we want in our app. Then further can be used in template files with ng-controller=”yourController”.
    • Syntax
    • var myApp = angular.module('myApp',[]);
      myApp.controller('helloController', ['$scope', function($scope) {
      $scope.greeting = 'Hello Guest!';
  • Services role is to deals with data, using API’s. Services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.
    • var myApp = angular.module('', []);
      var appCustomerUrl = 'place your url here';
      getCustomerList: function(where){
      var config = {method: 'GET', url: appCustomerUrl , headers: {'Content-Type': 'application/json'}}
      var customerWithList = $http(config);
      return customerWithList;
  • Filters format the value of an expression for display to the user. They can be used in view templates, controllers or services.
    • Angular give us some inbuilt filters like uppercase, lowercase etc.
  • Directives are used to extends HTML attributes. Directives are markers on a DOM element (such as an attribute, element name, CSS class) that tell AngularJS’s HTML compiler to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.
    • Similarly filters, angular provides us in built directives like ng-model, ng-show, ng-hide, ng-app (main one) etc.

Now, Dependency Injection (DI) what this term means in angularjs ?

DI is a software design pattern that deals with how components get hold of their dependencies. It allow you to re-use the function in your app. Components such as services, directives, filters, and animations are defined by an injectable factory method or constructor function. These components can be injected with “service” and “value” components as dependencies.

Controllers are defined by a constructor function, which can be injected with any of the “service” and “value” components as dependencies, but they can also be provided with special dependencies.


.controller('customerCtrl',['customerService', '$scope', '$rootScope', '$http', function(customerService, $scope, $rootScope, $http){


customerService, which is a service used in customerCtrl as a DI.