Introduction to AngularJs | ng-app, ng-repeat, ng-model, ng-bind, ng-init,ng-controller

Introduction

 It is JavaScript framework.It is perfect for single page application.It extends HTML attributes with Directive.


Miskey Heveryis the founder of angularJs. He started to work in 2009.It is now officially supported by google.

Version 1.0 was released on 2012.

Some basic AngularJs directives:

ng-app : Defines the angularJs application.It initializes the angular application.

 ng-model : Binds the HTML control (input,select,textarea) to application data.

 ng-bind : Binds application data to HTML view.

 Basic example of ng-app, ng-model and ng-bind: -

 <!DOCTYPE html>
<html lang="en-US">
<title> AngularJs Tutorial | Introduction</title>
<!-- AngularJs library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<!-- ng-app: Initialization of AngularJs Application--> <div ng-app="">
<!-- ng-model: Binds input to anglarJs application-->

   <p>Name : <input type="text" ng-model="name"></p>
<!-- AngularJs expression--> 
  <h1>Hello {{name}}</h1>
<!-- Binds input(name) to html view element view -->
    <div ng-bind="name"></div>


</div>
</body>
</html>


Output :


Introduction to ng-init and ng-repeat:

 ng-init : It is use to initialize variable.
ng-repeat : It is use to repeat a set of HTML, a given number of times. 

 Basic example of ng-init, ng-repeat  : -
<!DOCTYPE html>
<html lang="en-US">
<title> AngularJs Tutorial | Introduction</title>
<!-- AngularJs library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<!-- ng-app: Initialization of AngularJs Application-->
<div ng-app="">

 <!-- ng-init: intialize variable-->
  <div ng-init="fruits=['Apple','Mango','Orange','Grapes'];name='david';">
  <div>My name is : <b>{{name}}</b></div>
  <!-- ng-repeat: fetch array data from variable-->
  Fruits Name :
  <div ng-repeat="fruit in fruits"><b> {{fruit}}</b></div>

   </div>

  
</div>
</body>

</html>
Output :

Introduction to ng-controller:

 ng-controller : It is use to control the data of angularJs Application.
Basic example of ng-controller  : -
<!DOCTYPE html>
<html lang="en-US">
<title> AngularJs Tutorial | Introduction</title>
<!-- AngularJs library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<!-- ng-app: Initialization of AngularJs Application-->
<div ng-app="myApp">

 <!-- ng-controller: It is use to control data of angularJs application-->
  <div ng-controller="myController">
  <div>My name is : <b>{{name}}</b></div>
  <!-- ng-repeat: fetch array data from variable-->
  Fruits Name :
  <div ng-repeat="fruit in fruits"><b> {{fruit}}</b></div>

   </div>

  
</div>
</body>
</html>

 <script>
var myApp =  angular.module('myApp',[]);

 //$scope is the application object (the owner of application variables and functions).
//fruits is variable
myApp.controller('myController',function($scope){
$scope.name = 'David';
$scope.fruits=['Apple','Mango','Orange','Grapes'];
});

</script>
Output :






Comments

Post a Comment