AngularJS Introduction

AngularJS அறிமுகம்

AngularJS அறிமுகம்

AngularJS ஒரு JavaScript கட்டமைப்பாகும்.

இது ஒரு <script> குறிச்சொல்லுடன் ஒரு HTML பக்கத்தில் சேர்க்கப்படலாம்.

AngularJS Directives உடன் HTML பண்புக்கூறுகளை விரிவுபடுத்துகிறது, மேலும் Expressions உடன் தரவை HTML உடன் இணைக்கிறது.

உதவிக்குறிப்பு:

AngularJS JavaScript இல் எழுதப்பட்ட ஒரு JavaScript கட்டமைப்பாகும்.

AngularJS ஒரு JavaScript கட்டமைப்பு

AngularJS ஒரு JavaScript கோப்பாக விநியோகிக்கப்படுகிறது, மேலும் ஒரு script குறிச்சொல் மூலம் ஒரு வலைப்பக்கத்தில் சேர்க்கப்படலாம்:

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

AngularJS HTML ஐ விரிவுபடுத்துகிறது

AngularJS ng-directives உடன் HTML ஐ விரிவுபடுத்துகிறது.

AngularJS உதாரணம்

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>

உதாரணம் விளக்கம்:

வலைப்பக்கம் ஏற்றப்பட்டதும் AngularJS தானாகவே தொடங்குகிறது.

ng-app directive AngularJS க்கு <div> உறுப்பு ஒரு AngularJS பயன்பாட்டின் "உரிமையாளர்" என்று கூறுகிறது.

ng-model directive உள்ளீடு புலத்தின் மதிப்பை பயன்பாட்டு மாறி name உடன் இணைக்கிறது.

ng-bind directive <p> உறுப்பின் உள்ளடக்கத்தை பயன்பாட்டு மாறி name உடன் இணைக்கிறது.

AngularJS Directives

ஏற்கனவே பார்த்தபடி, AngularJS directives என்பது ng முன்னொட்டுடன் கூடிய HTML பண்புக்கூறுகள் ஆகும்.

ng-init directive AngularJS பயன்பாட்டு மாறிகளை துவக்குகிறது.

AngularJS உதாரணம்

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

செல்லுபடியாகும் HTML உடன் மாற்று வழி:

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>

உங்கள் பக்கத்தை HTML செல்லுபடியாக்க விரும்பினால், ng- க்கு பதிலாக data-ng- ஐப் பயன்படுத்தலாம்.

குறிப்பு:

இந்த டுடோரியலில் பின்னர் நீங்கள் directives பற்றி மேலும் பலவற்றைக் கற்றுக்கொள்வீர்கள்.

AngularJS Expressions

AngularJS expressions இரட்டை அடைப்புக்குறிக்குள் எழுதப்படுகின்றன: {{ expression }}.

AngularJS எக்ஸ்பிரஷன் எழுதப்பட்ட இடத்திலேயே தரவை "வெளியிடும்":

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

AngularJS expressions AngularJS தரவை ng-bind directive போன்றே HTML உடன் இணைக்கின்றன.

AngularJS உதாரணம்

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>

</body>
</html>

கற்றல்:

இந்த டுடோரியலில் பின்னர் நீங்கள் expressions பற்றி மேலும் பலவற்றைக் கற்றுக்கொள்வீர்கள்.

AngularJS Applications

AngularJS modules AngularJS applications ஐ வரையறுக்கின்றன.

AngularJS controllers AngularJS applications ஐ கட்டுப்படுத்துகின்றன.

ng-app directive பயன்பாட்டை வரையறுக்கிறது, ng-controller directive கட்டுப்பாட்டாளரை வரையறுக்கிறது.

AngularJS உதாரணம்

<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>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});
</script>

AngularJS Module

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

AngularJS Controller

app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});

முன்னேற்றம்:

இந்த டுடோரியலில் பின்னர் நீங்கள் modules மற்றும் controllers பற்றி மேலும் பலவற்றைக் கற்றுக்கொள்வீர்கள்.

AngularJS expressions எவ்வாறு எழுதப்படுகின்றன?

[ expression ]
✗ தவறு! இது AngularJS expression இல்லை
{{ expression }}
✓ சரி! AngularJS expressions இரட்டை அடைப்புக்குறிக்குள் எழுதப்படுகின்றன
( expression )
✗ தவறு! இது AngularJS expression இல்லை
<expression>
✗ தவறு! இது HTML குறிச்சொல்