Category: Angularjs

AngularJS Events ANgular_JS

AngularJS Events

| Posted on |

1) ng-click https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-4880246846967300&output=html&h=60&slotname=6239393533&adk=202425667&adf=2306573245&pi=t.ma~as.6239393533&w=468&lmt=1621006853&psa=1&format=468×60&url=https%3A%2F%2Fscripts.guru%2Fangularjs-events%2F%3Futm_source%3Drss%26utm_medium%3Drss%26utm_campaign%3Dangularjs-events&flash=0&wgl=1&adsid=ChEI8L_4hAYQrb-iq9CI64XZARI9AOMPUgO2a5vTcLVAB7CJT9voq_O-r-SzYcUPuAop7x9th-n9rpHFoqFq1gjOQo-OduC_Xqb-G8FDg7XuIw&uach=WyJXaW5kb3dzIiwiMTAuMCIsIng4NiIsIiIsIjkwLjAuNDQzMC4yMTIiLFtdXQ..&dt=1621006851033&bpp=3&bdt=6636&idt=1163&shv=r20210511&cbv=%2Fr20190131&ptt=9&saldr=aa&abxe=1&cookie=ID%3Dae88d6ef60dfeb51-220624c824c80065%3AT%3D1620881451%3ART%3D1620881451%3AS%3DALNI_MbziyJ-Hxj_TMPSW5tsSHH0KW2DEA&prev_fmts=728×90%2C300x250%2C0x0&nras=1&correlator=1735026327341&frm=20&pv=1&ga_vid=1477556874.1620554064&ga_sid=1621006852&ga_hid=1464170960&ga_fc=0&u_tz=330&u_his=1&u_java=0&u_h=864&u_w=1536&u_ah=864&u_aw=1536&u_cd=24&u_nplug=3&u_nmime=4&adx=340&ady=1033&biw=1519&bih=735&scr_x=0&scr_y=0&eid=31060980&oid=3&pvsid=1558493135739161&pem=494&eae=0&fc=896&brdim=0%2C0%2C0%2C0%2C1536%2C0%2C1536%2C864%2C1536%2C735&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=0&bc=31&jar=2021-05-14-15&ifi=2&uci=a!2&btvi=1&fsb=1&xpc=5rKSCALJ5n&p=https%3A//scripts.guru&dtd=2240 <!DOCTYPE html> <html> <head> <meta chrset=”UTF 8″> <title>Event</title> </head> <body ng-app=””> <script src=”https://code.angularjs.org/1.6.9/angular.js”></script> <script src=”https://code.jquery.com/jquery-3.3.1.min.js”></script> <h1> Script guru Global Event</h1> <button ng-click=”count = count + 1″ ng-init=”count=0″> Increment </button> <div>The Current Count is {{count}}</div> </body> </html> We are introducing the ng-click event directive to the button. In this directive, we are writing […]

AngularJS Filter Example: Lowercase And Uppercase ANgular_JS

AngularJS Filter Example: Lowercase And Uppercase

| Posted on |

Lowercase This filter takes on a string output and formats the string and displays all the characters in the string as lowercase. <!DOCTYPE html> <html> <head> <meta chrset=”UTF 8″> <title>Event Filter</title> </head> <body> <script src=”https://code.angularjs.org/1.6.9/angular-route.js”></script> <script src=”https://code.angularjs.org/1.6.9/angular.min.js”></script> <script src=”https://code.jquery.com/jquery-3.3.1.min.js”></script> <h1> Script guru Global Event</h1> <div ng-app=”App” ng-controller=”DemoController”> Tutorial Name : <input type=”text” ng-model=”tutorialName”><br> <br> This […]

AngularJS Form Validation: TextBox and Button Click ANgular_JS

AngularJS Form Validation: TextBox and Button Click

| Posted on |

Validation is the process ensuring that data is correct and complete. When the user submits the registration form, normally a validation would occur first before the details are sent to the server. This validation would try to ensure to the best possible extent that the details for the input fields are entered in the right […]

AngularJS – My First Hello World

| Posted on |

Step 01) <!DOCTYPE html> <html lang=”en”> <head> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js”></script> </head> <body> </body> </html> Step 02) Second step is to create an angular module and define a Controller. The job of controller is to control the information that we put on page or in editing scenario controller save the information that use is typing into the […]

AngularJS Animations

| Posted on |

<!DOCTYPE html> <html> <style> div { transition: all linear 0.5s; background-color: pink; height: 100px; width: 100px; position: relative; top: 0; left: 0; } .ng-hide { height: 0; width: 0; background-color: transparent; top:200px; left: 3px; } </style> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js”></script> <body ng-app=”ngAnimate”> <h1>Hide the Box: <input type=”checkbox” ng-model=”myCheck”></h1> <div ng-hide=”myCheck”></div> </body> </html>

Angular js : Directives

| Posted on |

1) ng-app <!DOCTYPE html> <html> <head> <meta chrset=”UTF 8″> <title>Event Directives</title> </head> <body> <script src=”https://code.angularjs.org/1.6.9/angular-route.js”></script> <script src=”https://code.angularjs.org/1.6.9/angular.js”></script> <script src=”https://code.angularjs.org/1.6.9/angular.min.js”></script> <script src=”https://code.jquery.com/jquery-3.3.1.min.js”></script> <h1> Script guru Global Event</h1> <div ng-app=””> Tutorial Name : {{ “Angular” + “JS”}} </div> </body> </html> The “ng-app” directive is added to our div tag to indicate that this application is an angular.js […]

Upload File Using AngularJS

| Posted on |

<html> <head> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script> </head> <body ng-app = “myApp”> <div ng-controller = “myCtrl”> <input type = “file” file-model = “myFile”/> <button ng-click = “uploadFile()”>upload</button> </div> <script> var myApp = angular.module(‘myApp’, []); myApp.directive(‘fileModel’, [‘$parse’, function ($parse) { return { restrict: ‘A’, link: function(scope, element, attrs) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; […]

AngularJS Arrays

| Posted on |

Let’s look at an example of Angular JS expressions with arrays. In this example, we are going to define an array which is going to hold the marks of a student in 4 subjects. In the view, we will display the value of these marks accordingly. <!DOCTYPE html> <html> <head> <meta chrset=”UTF 8″> <title>Event Marksheet</title> […]

Email send Using Angularjs and PHP

| Posted on |

In the following example you learn how to Email sending with AngularJS and PHP <script src = “scripts/form.js”></script> <div class=”container” ng-app=”formApp” ng-controller=”formController”> <div class=”col-md-6 col-md-offset-3″> <!– PAGE TITLE –> <div class=”page-header”> <h1><span class=”glyphicon glyphicon-tower” style=”font-size:20px”></span><span style=”font-size:20px; margin-left:10px;”>Send a direct e-mail to us</span></h1> </div> <!– SHOW ERROR/SUCCESS MESSAGES –> <div id=”messages” class=”well” ng-show=”message”></div> <!– FORM –> […]