AngularJS- Javascript MVC Framework

AngularJS- Javascript MVC Framework
December 2, 2016 1 Comment Uncategorized Minal Landge

Conceptual Overview of AngularJS


<script src=””></script>

This section briefly touches on some of the important parts of AngularJS using a simple example.

  1. Directives
  2. Controllers
  3. Modules
  4. Expression
  5. Filters
  6. Data binding

  • Directives :

  • AngularJS has a set of built-in directives which offers functionality to your applications.
  • You can define  your own directives also.
  • AngularJS extends HTML with ng-directives.
  • ng-app : Root element of an AngularJS application.
  • ng-model : Similar to ng-bind, but establishes a two-way data binding between the view and the scope.
  • ng-bind : Directive binds application data to the HTML view.


  • Some more angularJS built-in directives :

ng-repeat, ng-switch, ng-view, ng-show & ng-hide ..etc.


<!DOCTYPE html>


<script src=””>



<div ng-app=””>

<p>Name: <input type=”text” ng-model=”name”></p>

<p ng-bind=”name”></p>




Data Binding: Synchronize data between the model and view.

  • Expressions:

  • Expressions are written inside double braces like {{ expression}}.
  • Expressions are similar to ng-bind directives which is used to bind application data to html.

Example 1]:

<div ng-app=””>

<p>My first expression: {{ 5 + 5 }}</p>


Output: My first expression: 10

Example 2]:

<div ng-app=”” ng-init=”firstName=’sayali’; lastName=shinde”>

<p>The name is {{ firstName + ” ” + lastName }}</p>


Output: sayali shinde

  • Module:

  • AngularJS supports modular approach.
  • Modules are used to separate logics say services, controllers, application etc. and keep the code clean.
  • We define modules in separate js files and name them as per the module.js file.
  • A module is created by using the Angular JS function module
  • The module is a container for the application controllers.

Example :

<div ng-app=”myApp”>……..</div>


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


  • Controllers:

  • Controller is business logic behind views.
  • AngularJS applications are controlled by controllers.
  • The ng-controller directive defines the application controller.
  • A controller is a JavaScript Object, created by a standard JavaScript object constructor.

Example :

<div ng-app=”myApp” ng-controller=”myCtrl”>

First Name: <input type=”text” ng-model=”firstName”><br>

Last Name: <input type=”text” ng-model=”lastName”><br>

Full Name: {{firstName + ” ” + lastName}}



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

app.controller(‘myCtrl’, function($scope) {

$scope.firstName = “sayali”;

$scope.lastName = “shinde”;



  • Filters:

  • Filters are used to modify data.
  • Syntax: {{expression | filter }}
  • List of commonly used filters:

1) uppercase: converts a text to upper case text.

2) lowercase: converts a text to lower case text.

3) currency: formats text in a currency format.

4) orderby: orders the array based on provided criteria.

5) filter: filter the array to a subset of it based on provided criteria.


<div ng-app=”myApp” ng-controller=”personCtrl”>

<p>The name is : {{ firstName | uppercase }} </p>



angular.module(‘myApp’, []).controller(‘personCtrl’, function($scope) {

$scope.firstName = “sayali”,



Output: The name is: SAYALI













About The Author

Leave a reply

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