Saturday, January 26, 2019

ஆங்குலர் ஜெஎஸ் என்பது என்ன?



AngularJS  என்பது கிளையண்ட் சைட் ஜாவாஸ்கிரிப்ட் MVC ஃப்ரேம் ஒர்க் ஆகும்.இது டைனமிக் வெப் அப்ளிகேசன்களை உருவாக்க பயன்படுகின்றது.இது ஒரு ஓபன் சோர்ஸ் ப்ரேம் ஒர்க் ஆகும்.
Angular JS ஆனது html மற்றும் ஜாவாஸ்கிரிப்ட்டை அடிப்ப்டையாக கொண்டது.
AngularJS ஆனது ஆங்குலர் என்றும் அழைக்க்கபடுகின்றது.

AngularJS ஆனது ஸ்டேட்டிக் html டைனமிக் html ஆக மாற்ற உதவுகின்றது.இது பில்ட்-இன் ஆட்ரிப்யூட் மற்றும் காம்பனன்ட்ஸ் கொ ண்டு html-ஐ நீட்டுவிக்கப் பயன்படுகின்றது.-

AngularJS உதாரணம்.

பின் வரும் நிரல் ஒரு அடிப்படை ஆங்குலர் ஜெஎஸ் நிரலாகும்
சான்று நிரல்.
<!DOCTYPE html>
 
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
    Enter Your Name: <input type="text" ng-model="name" /> <br />
    Hello <label ng-bind="name"></label>
</body>
</html>
 
மேற்கண்ட அதே நிரலை jquery கொண்டு கீழே எழுதப்பட்டுள்ளது.
<!DOCTYPE html>
 
<html>
<head>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
    Enter Your Name: <input type="text" id="txtName" /> <br />
    Hello <label id="lblName"></label>
 
    <script>
        $(document).ready( function< () {
            $('#txtName').keyup(function () {
                $('#lblName').text($('#txtName').val());
            });
        });
    </script>
</body>
</html>

 AngularJS நண்மைகள்

  1.  இது ஒரு ஓபன் சோர்ஸ் ஜாவாஸ்கிரிப்ட் MVC ஃப்ரேம் ஒர்க் ஆகும்.
  2. கூகிள் இதை சப்போர்ட் செய்கின்றது.
  3. புதிதாய் ஒரு மொழியை படிக்க தேவையில்லை .ஏனெனில் இது ஜாவாஸ்கிரிப்ட் மற்றும் HTML தான் அன்றி வேறேதும் இல்லை.
  4. MVC டிசைன் பேட்டர்னை அடிப்ப்டையாக கொண்டது.
  5. பில்ட் –இன் ஆட்ரிபியூட்கள் HTMLஐ டைனமிக் ஆக மாற்றியமைக்கின்றது.
  6. எளிதாக நீட்டுவிக்கலாம்.
  7. ஒற்றை பக்க பயன்பாட்டை ஆதரிக்கின்றது.
  8. Dependency injection என்பதை பயன்படுத்துகின்றது.
  9. எளிதாக யூனிட் டெஸ்ட் செய்யலாம்.

ஆங்குலர் ஜெஎஸ் டெவலப்மெண்ட் என்விரான்மென்ட் செட் அப் செய்வது எப்படி?

பின் வரும் டூல்கள் ஆங்குலர் ஜெ ஏஸ் என்விரான்மென்ட் உபயோக்கின்றது.
  1. AngularJS Library
  2. Editor/IDE
  3. Browser
  4. Web server

AngularJS லைப்ரரி

angularjs.org சென்று  angular js லைப்ரரியை டவுன் லோட் செய்யலாம்.
பின் வரும் CDN URL பயன்படுத்தியும் நிரல் எழுதலாம். https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js

Editor

பின் வரும் எடிட்டரில் ஏதேனும் ஒன்றை பயன்படுத்திக் கொள்ளலாம்.
            Sublime Text
           Aptana Studio 3
Ultra Edit
Eclipse
Visual Studio

Online Editor

 பின் வரும் ஆன்லைன் எடிட்டர்களும் பயன்படுத்தலாம்.
.

Web server

வெப் சர்வராக  IIS, apachee.  போன்றவற்றை பயன்படுத்தலாம்.

Browser

ஏதேனும் ஒரு பிரவுசர் பயன்படுத்தலாம். எனினும் குரோம் பயன்படுத்த அறிவுறுத்த பயன்படுத்தப் படுகின்றது.

  Visual Studio-வில் ஆங்குலர் ஜெஎஸ் ப்ராஜெக்ட்

ஆங்குலர் js அப்ளிகேசனுக்கு ஏதேனும் ஒரு விசுவல் ஸ்டியோவை பயன்படுத்திக் கொள்ளலாம்.
முதலில் new project கிளிக் செய்து new project dialog box ஓபன் செய்யலாம்.
AngularJS in Visual Studio
லெப்ட் பேனில் web என்பதை செலெக்ட் செய்து வலது பேனில் ASP.NET வெப் அப்ளிகேசன் என்பதை தேர்ந்தெடுக்கவும். பிறகு ok கிளிக் செய்யவும்.



அடுத்த விண்டோவில் empty என்பதை தேர்த்டுத்து ok செய்யவும்.
AngularJS in Visual Studio
பிராஜெக்ட் பெயரை வலது கிளிக் செய்து Manage NuGet packages என்பதை செலெக்ட் செய்யவும்.
AngularJS in Visual Studio
டையலாக் பாக்ஸில் angular என்பதை தேடி AngularJS core என்பதை இன்ஸ்டால் செய்யவும்.
AngularJS in Visual Studio
இது angular.js, angular.min.js,மற்றும்  angular-mocks.js ஆகியவற்றை ன்ஸ்டால் செய்யும்
AngularJS in Visual Studio

முதல்  AngularJS பயன்பாடு

முதலில் பின் வரும் html டெம்ப்லேட் எழுதிக் கொள்ளவும்.
<!DOCTYPE html>
 
<html>
    <head>
 
    </head>
<body>
    
</body>
</html>
 
Head பகுதியில் பின் வரும் நிரலில் உள்ளவாறு கோடிங்க் எழுதிக் கொள்ளவும்.
<!DOCTYPE html>
<html>
<head>
    <title>First AngularJS Application</title>
    <script src= "~/Scripts/angular.js"></script>
</head>
<body>
  
</body>
</html>
இங்கே இரண்டு எண்களில் பெருக்கத்தை செய்யும் நிரல் ஒன்றி எழுதப் பட்டுள்ளது..
First AngularJS பயன்பாடு:
<!DOCTYPE html>
 
<html>
<head>
    <title>First AngularJS Application</title>
    <script src= "~/Scripts/angular.js"></script>
</head>
<body ng-app >
    <h1>First AngularJS Application</h1>
 
    Enter Numbers to Multiply: 
    <input type="text" ng-model="Num1" /> x <input type="text" ng-model="Num2" /> 
    = <span>{{Num1 * Num2}}</span>  
</body>
</html>
இங்கு ng-app, ng-model, and {{ }}. ஆகியவை பில்ட் இன் டைரக்டிவ்ஸ் ஆகும். 

First AngularJS Application

Template

AngularJS என்பதை பொறுத்தவரை டெம்ப்லேட் என்பது html உடன் கூடுதல் மார்க் அப் ஆகும்.

Directive

டைரக்டிவ்ஸ் ஆனது DOM எலிமெண்ட் மீது குறிப்பிட்ட நடத்தையை குறிக்கின்றது. பெரும்பாலான டைரக்டிவ்ஸ் ng என்பதனுடன் தொடங்குகின்றது.
ng-app:  ng-app directive ஆனது தொடக்க நிலையாகும்.AngularJS framework ஆனது ng-app directive என்பதைக் கண்டால் அது ஆங்குலர் என்று உணர்கின்றது
ng-model: The ng-model directive ஆனது $scope என்பதில் உள்ள குறிப்பிட்ட பண்பை  HTML element உடன் சேர்க்கின்றது.
கீழே உள்ள நிரலில் இரண்டு டெக்ஸ்ட்பாக்ஸிற்கும் ng-model directive பயன்படுத்தப் பட்டுள்ளது.இங்கு ஆங்குலர் ஆனது num1, num2 என்று இரண்டு பிராப்பர்ட்டி உருவாக்கி அதற்கு நாம் இரு டெக்ஸ்ட் பாக்ஸில் இன்புட்டை மதிப்பிருத்துகின்றது.

Expression

expression என்பது இரண்டு கர்லி பிரேசஸ் உள்ளே எழுதப் படுகின்றது.

 ng-app Directive

The ng-app directive ஆனது ஆங்குலர் என்பதைக் குறிப்பிடுகின்றது. இதைக் கண்டவுடன் ஆங்குலர் இது பூட்ஸ்டிராப் செய்து கொண்டு html template ஆனத கம்பைல் செய்கின்றது.
tipCompiling HTML in AngularJS means attaching event listeners to the HTML to make it interactive.
பொதுவாக ng-app directivesஆனது html-ன் ரூட் எலிமெண்டுடன்  - பயன்படுத்தப்ப்டுகின்றது.
ஆங்குலர் ஆனது ng-app பயன்படுத்தும் DOM elements மற்றும் அதன் சைல்ட் எலிமெண்ட் உடன் உள்ளே பயன்படுத்தப் படுகின்றது . 
<!DOCTYPE html>
<html>
<head>
    <title>ng-app Directive</title>
    <script src="../Scripts/angular.min.js"></script>    
</head>
<body >
    <div>
        {{2/2}}
    </div>
    <div id="myDiv" ng-app>
        {{5/2}}
        <div>
            {{10/2}}
        </div>
    </div>
    <div>
        {{2/2}}
    </div>
</body>
</html>
மேலே உள்ள நிரலில் ng-app ஆனது myid என்கின்ற டிவ் எலிமெண்ட் உடன் கொடுக்கப் பட்டுள்ளது. எனவே ஆங்குலர் ஆனது mydiv என்கின்ற எலிமெண்ட் மற்றும் அதன் சைல்ட் எலிமெண்ட்ஸ் ஆகியவற்றை மட்டும் கம்பைல் செய்கின்றது.
Bootstrap
ஒரு html பக்கத்தில் ஒரே ஒரு ng-app directive மட்டுமே பயன்படுத்த வேண்டும்.

 Module name உடன் ng-app


The ng-app directive ஆனது குறிப்பிட்ட பெயருடன் அறிவிக்கப்படலாம்.
சான்று நிரல்.

<!DOCTYPE html>
<html>
<head>
    <title>ng-app Directive</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myAngularApp">
    <div>
        {{2/2}}
    </div>
    <div>
        {{5/2}}
        <div>
            {{10/2}}
        </div>
    </div>
    <script>
        var app = angular.module('myAngularApp', []);
    </script>
</body>
</html>

Manual Bootstrap

கீழ்க் கண்டவாறும் ng-app பயன்படுத்தாமல் ஆங்குலரை தொடக்கவிக்கலாம்.
சான்று நிரல்:
<!DOCTYPE html>
<html >
<head>
    <title>Angular Bootstrap</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body>
    <div>
         {{2/2}}
    </div>
    <div>
        {{5/2}}
        <div>
            {{10/2}}
        </div>   
    </div>
<script>       
     angular.element(document).ready(function () {
         angular.bootstrap(document);
     });
</script>
 </body>
 </html>
மேலே உள்ள நிரலில்  angular.bootstrap() function உடன் அதன்  root element குறிபிடப் பட்டுள்ளது
AngularJS Expression
AngularJS expressionஆனது இரண்டு கர்லி பிரேசஸ் இடையே எழுதப்படுகின்றது.- {{ expression }}. AngularJS  ஆனது எக்ஸ்பிரசனை மதிப்பிட்டு ரிசல்ட் டேட்டாவை html உடன் பைண்ட் செய்கின்றது.
உதாரணமாக  {{2/2} என்பது 1 என்கின்ற விடையை html உடன் பைண்ட் செய்கின்றது.
சான்று நிரல்:.
Example: Expression
<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <h1>AngularJS Expression Demo:</h1>
    <div ng-app>
        2 + 2 = {{2 + 2}} <br />
        2 - 2 = {{2 - 2}} <br />
        2 * 2 = {{2 * 2}} <br />
        2 / 2 = {{2 / 2}}
    </div>
</body>
</html>
Result:
2 + 2 = 4
2 - 2 = 0
2 * 2 = 4
2 / 2 = 1
ஆங்குலர் எக்ஸ்பிரசனுக்கும் சாதாரண javascript என்பதற்கும் இடையே உள்ள வித்தியாசங்கள்:
ஆங்குலர் உடன் கண்டிசன்கள், லூப் ஆகியவற்றை பயன்படுத்த முடியாது.
ஃபங்க்சங்களை அறிவிக்க இயலாது.
ஆங்குலர் எக்ஸ்பிரசனுடன் கமா பயன்படுத்த இயலாது.
ரிடர்ன் கீவேர்டு பயன்படுத்த இயலாது.
Example: Expression
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <h1>AngularJS Expression Demo:</h1>
    <div ng-app>
        {{"Hello World"}}<br />
        {{100}}<br />
        {{true}}<br />
        {{10.2}}
    </div>
</body>
</html>
Result:
Hello World
100
True
10.2


AngularJS expression ஆனது ng-init directive மூலம் வேரியபிள்களை அறிவிக்கலாம்.
<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <div ng-app ng-init="greet='Hello World!'; amount= 10000;rateOfInterest = 10.5; duration=10;  myArr = [100, 200]; person = { firstName:'Steve', lastName :'Jobs'}">
        {{ (amount * rateOfInterest * duration)/100 }}<br />
        {{myArr[1]}} <br />
        {{person.firstName + " " + person.lastName}}
    </div>
</body>
</html>
Result:
10500
200
Steve Jobs

AngularJS Directives

ng-app

 ng-app directive ஆனது AngularJS என்பது தொடக்குவிக்கின்றது.

ng-init

 ng-init directive ஆனது வேரியபிள்களை அறிவிக்க பயன்படுகின்றது.
சான்று நிரல்:
<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <div ng-app ng-init="greet='Hello World!'; amount= 100; myArr = [100, 200]; person = { firstName:'Steve', lastName :'Jobs'}">
        {{amount}}      <br />
        {{myArr[1]}}    <br />
        {{person.firstName}}
    </div>
</body>
</html>
Result:
100
200
Steve

ng-model

 ng-model directive ஆனது ஒரு வழி டேட்டா பைண்ட் செய்ய ப்யன்படுகின்றது.இது இன்புட் எலிமெண்ட் டேட்டாக்களை $scope ஆப்ஜெக்ட் உடன் பைண்ட் செய்ய பயன்படுகின்றது.
சான்று நிரல்.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
    <input type="text" ng-model="name" />
    <div>
       Hello {{name}}
    </div>
</body>
</html>

ng-bind

 ng-bind directive ஆனது ng-model directive –ல் உள்ள டேட்டாவை பைண்ட் செய்ய பயன்படுகின்றது.
சான்று நிரல்.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="">
    <div>
        5 + 5 = <span ng-bind="5 + 5"></span> <br />
 
        Enter your name: <input type="text" ng-model="name" /><br />
        Hello <span ng-bind="name"></span>
    </div>
</body>
</html>
மேலே உள்ள நிரலில் 5+5 என்கின்ற எக்ஸ்பிரசன் மதிபிடப்ப்பட்டு அதன் பதில் span எலிமெண்ட் உடன் பைண்ட் செய்யப்படுகின்றது.அதே போன்று name என்கின்ற பிராப்பர்ட்டியும் span உடன் பைண்ட் செய்யப் படுகின்றது

ng-repeat

 ng-repeat directive  ஆனது அர்ரேயில் உள்ள ஒவ்வொரு எலி,மெண்டுக்கும் html –ஐ ரிபீட் செய்கின்றது. 

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>
        div {
            border: 1px solid green;
            width: 100%;
            height: 50px;
            display: block;
            margin-bottom: 10px;
            text-align:center;
            background-color:yellow;
        }
    </style>
</head>
<body ng-app="" ng-init="students=['Bill','Steve','Ram']">
    <ol>
        <li ng-repeat="name in students">
            {{name}}
        </li>
    </ol>
    <div ng-repeat="name in students">
        {{name}}
    </div>
</body>
</html>
மேலே உள்ள நிரலில்  ng-repeat ஆனது students arrry உடன் பயன்படுத்தப் பட்டுள்ளது..இது students array-யின் ஒவ்வொரு எலிமெண்டுக்கும் ஒரு <li> எலிமெண்டை உருவாக்குகின்றது .அதே போன்று டிவ் எலிமெண்டையும் ரிபீட் செய்கின்றது.

ng-if

 ng-if directive  ஆனது ஒரு பூலியன் மதிப்பின் அடிப்படையில் ஒரு html எலிமெண்டை உருவாக்கவோ அல்லது அகற்றவோ உதவுகின்றது.

ng-readonly

 ng-readonly directive ஆனது ஒரு HTML எலிமெண்டை read-onlyயாக்க மாற்றுகின்றது. இது ஒரு பூலியன் மதிப்பின் அடிப்ப்டையில் அமைகின்றது.

ng-disabled

 ng-disabled directive ஆனது ஒரு பூலியன் மதிப்பின் அடிப்படையில் ஒரு html எலிமெண்டை டிஸேபிள் செய்கின்றது.
சான்று நிரல்
<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>
        div {
            width: 100%;
            height: 50px;
            display: block;
            margin: 15px 0 0 10px;
        }
    </style>
</head>
<body ng-app ng-init="checked=true" >
    Click Me: <input type="checkbox" ng-model="checked" /> <br />
    <div>
        New: <input ng-if="checked" type="text" />
    </div>
    <div>
        Read-only: <input ng-readonly="checked" type="text" value="This is read-only." />
    </div>
    <div>
        Disabled: <input ng-disabled="checked" type="text" value="This is disabled." />
    </div>
</body>
</html>
-முத்து கார்த்திகேயன்,மதுரை.
ads Udanz
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)