Angular Js for Beginners

Angular Js for Beginners

Angular Js for Beginners

Angular JS is a JavaScript framework. AngularJS extends HTML attributes with Directives and binds data to  HTML with Expressions. It can be added to an HTML page with a <script> tag .

AngularJS Development Environment: –

We need the following tools to set up a development environment for Angular JS:

  1. Angular JS Library

  2. Editor/IDE

  3. Web server

  4. Browser

 

Angular JS Library:

Angular JS is a library written in JavaScript. It can be added to web page with a <script> tag. Ex- <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>

Editor/IDE:

You can use any good editor as per your choice. Ex-  Sublime Text, Eclipse, Notepad++, Visual Studio etc. You can also use any online editor.

Web Server:

Use any web server such as IIS, apache  etc. 

Browser:

  As Angular JS supports cross-browser compatibility then you can use any browser as your choice.

Basic building blocks of AngularJS:

We will learn the following things in Angular JS:

  1. Directives

  2. Expressions

  3. Data binding

  4. Module

  5. Model

  6. Filters

  7. Controllers

  8. $scope object

    Directives: 

Directives are attributes on a  DOM element. It gives the specific behaviour to that DOM element. Directives are extended HTML attributes with the prefix ng- . Some of the directives have been described below-

ng-app:- 

This is the root element of the AngularJS application. This directive initializes an AngularJS application. You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used. Syntax-  <element ng-app=Modulename>  Content here…. </element>

ng-init:-

This directive evaluates the given expression and initializes any application data.   Syntax-  <element ng-init=”expression/initialize application data > Content here…. </element>

ng-controller:-

This directives takes the data from the view , process the data and then sends the data to the view.  Syntax-  <element ng-controller=”expression> Content here…. </element>

ng-model:-

This directive binds the HTML controls (input, textarea etc ) to application data. Syntax-  <element ng-model=”application data > Content here…. </element>

ng-repeat:-

This directive repeats a HTML element. When we want to repeat a same task, we use this directive.

Example:-

<!DOCTYPE html>

<html>

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

<body>

 <div ng-app=””  ng-init=”num1=10; num2=5; names=[‘Sayantani’,’Avishek’,’Abhijit’] “>

  <p>My first expression: {{ num1 + num2 }}</p>

   Enter Numbers to addition:

<input type=”text”  ng-model=”num1″ /> + <input type=”text” ng-model=”num2″ /> 

    = <span>{{ num1+ num2}}</span> 

 <p>Looping with ng-repeat:</p>

  <ul>

    <li ng-repeat=”x in names”>

      {{ x }}

    </li>

  </ul>

 </div>

</body>

</html>

Expressions: 

AngularJs Expressions is used to bind application data to an Html. It can be written within braces {{expression}}. It can be used inside a directive like ng-bind.

Ex-

<!DOCTYPE html>

<html>

<head>

       <title>AngularJS Expressions</title>

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

   </head>

     <body>

      <h1> AngularJS Expressions </h1>

            <div ng-app = “” ng-init = “quantity = 2; price = 30; student = {firstname:’Riya’,lastname:’dutta’,rollno:34};marks = [80,90,70,40,60]”>

         <p>Hello {{student.firstname + ” ” + student.lastname}}!</p>

  <p>Expense on Books : Rs. <span ng-bind=” price *quantity “></span></p>

         <p>Roll No: {{student.rollno}}</p>

         <p>Marks(English): {{marks[4]}}</p>

      </div>      

   </body>

</html>

Output: 

AngularJS Expressions

Hello Riya dutta!

Expense on Books : 60 Rs

Roll No: 34

Marks(English): 60

Data binding:-

Data binding in Angular JS is to synchronize between view and model. Angular JS supports two-way data binding menas when data in the model changes then the view is updated and vice versa.

Ex- 

<!DOCTYPE html>

<html>

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

<body>

 <div ng-app=”myfirstApp”  ng-controller=”myfisrtCtrl”>

    Name: <input ng-model=”firstname”>

    <h1>{{firstname}}</h1>

</div>

 <script>

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

app.controller(‘ myfisrtCtrl ‘, function($scope) {

    $scope.firstname = “Sayantani”;

    });

</script>

 <p>Change the name inside the input field, and the model data will change automatically</p>

</body>

</html>

Module:- 

Module is a container of different parts of your app- controllers, services, filters, directives, etc. Module is created by angular js function angular.module

var app = angular.module(“myApp”, []); myApp parameter refers to an HTML element in which the application will run. [] This array is the list of modules myApp depends on. Without the [] parameter, you are not creating a new module, but retrieving an existing one.

Models:-

The data shown to the user in the view and with which the user interacts.

Filters:-

Filters are used to modify the data. They can be clubbed in expression or directives using pipe (|) character. The following list shows the commonly used filters.  
  • Uppercase- Converts a text to uppercase text. Ex.

Enter first name:<input type = “text” ng-model = “student.firstName”>

Enter last name: <input type = “text” ng-model = “student.lastName”>

Name in Upper Case: {{student.fullName() | uppercase}}

  • Lowercase- Converts a text to lowercase text. Ex.

Enter first name:<input type = “text” ng-model = “student.firstName”>

Enter last name: <input type = “text” ng-model = “student.lastName”>

Name in Lower Case: {{student.fullName() | lowercase}}

  • Currency- formats text in a currency format. Ex.

Enter fees: <input type = “text” ng-model = “student.fees”>

fees: {{student.fees | currency}}

  • Filter- To display only required subjects, we use subjectName as filter. Ex.

Enter subject: <input type = “text” ng-model = “subjectName”>

Subject:

<ul>

   <li ng-repeat = “subject in student.subjects | filter: subjectName”>

      {{ subject.name + ‘, marks:’ + subject.marks }}

   </li>

</ul>

  • Order by – To order subjects by marks, we use orderBy marks. Ex. 

Subject:

<ul>

   <li ng-repeat = “subject in student.subjects | orderBy:’marks'”>

      {{ subject.name + ‘, marks:’ + subject.marks }}

   </li>

</ul>

Controllers :-

AngularJS application mainly relies on controllers to control the flow of data in the application. In AngularJS, a Controller is defined by a JavaScript constructor function that is used to augment the AngularJS Scope. Ex 

<div ng-app = “” ng-controller = “studentController”>

   …

</div>

<script>

   function studentController($scope) {

      $scope.student = {

         firstName: “Rima”,

         lastName: “Sen”,

         

         fullName: function() {

            var studentObject;

            studentObject = $scope.student;

            return studentObject.firstName + ” ” + studentObject.lastName;

         }

      };

   }

</script>

$scope object :- Scope is a JavaScript object that connects controller with views. Scope contains model data. In controllers, model data is accessed via $scope object. Ex.

<script>

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

   

   mainApp.controller(“shapeController”, function($scope) {

      $scope.message = “In shape controller”;

      $scope.type = “Shape”;

   });

</script>

With Angular, we declaratively define our events on our HTML elements, but wire up the code in the controller. This separation makes our application much easier to maintain. Hope, my blog is helpful to the beginners who are trying to know about AngularJS.    

Leave a reply

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