AngularJS- Javascript MVC Framework

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

Conceptual Overview of AngularJS

""

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></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.

Example:

<!DOCTYPE html>

<html>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”>

</script>

<body>

<div ng-app=””>

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

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

</div>

</body>

</html>

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>

</div>

Output: My first expression: 10

Example 2]:

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

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

</div>

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>

<script>

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

</script>


  • 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}}

</div>

<script>

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

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

$scope.firstName = “sayali”;

$scope.lastName = “shinde”;

});

</script>


  • 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.

Example:

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

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

</div>

<script>

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

$scope.firstName = “sayali”,

});

</script>

Output: The name is: SAYALI

 

 

 

 

 

 

 

 

 

 

 

 

Tags
About The Author

Leave a reply

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