Scribd Logo
Upload

Welcome to Scribd!

  • 8 views

    Aad 3,4,5,6,8

    Uploaded by

    neyot27486
    The document contains code for several AngularJS practices (Prac1-Prac8). Prac1 shows how to add validation for required fields in a form. Prac2 binds form fields to controller properties and displays the full name. Prac3 adds and removes items from a shopping list, with error handling for duplicate items. Prac4 prints submitted form data to the page. Prac5 demonstrates two-way data binding by displaying a mobile number entered in an input field.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Aad 3,4,5,6,8

    Uploaded by

    neyot27486
    8 views10 pages
    The document contains code for several AngularJS practices (Prac1-Prac8). Prac1 shows how to add validation for required fields in a form. Prac2 binds form fields to controller properties and displays the full name. Prac3 adds and removes items from a shopping list, with error handling for duplicate items. Prac4 prints submitted form data to the page. Prac5 demonstrates two-way data binding by displaying a mobile number entered in an input field.

    Original Description:

    Original Title

    AAD 3,4,5,6,8.docx (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains code for several AngularJS practices (Prac1-Prac8). Prac1 shows how to add validation for required fields in a form. Prac2 binds form fields to controller properties and displays the full name. Prac3 adds and removes items from a shopping list, with error handling for duplicate items. Prac4 prints submitted form data to the page. Prac5 demonstrates two-way data binding by displaying a mobile number entered in an input field.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    8 views10 pages

    Aad 3,4,5,6,8

    Uploaded by

    neyot27486
    The document contains code for several AngularJS practices (Prac1-Prac8). Prac1 shows how to add validation for required fields in a form. Prac2 binds form fields to controller properties and displays the full name. Prac3 adds and removes items from a shopping list, with error handling for duplicate items. Prac4 prints submitted form data to the page. Prac5 demonstrates two-way data binding by displaying a mobile number entered in an input field.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 10

    Prac3

    >edit index.html in your directory folder


    <html>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body ng-app="">
    <p>try leaving the first input field blank:</p>
    <form name="myform">
    <p>name:
    <input name="myname" ng-model="myname" required>
    <span ng-show="myform.myname.$touched && myform.myname.$invalid">the name is
    required</sapn>
    </p>
    <p>address:
    <input name="myadd" ng-model="myadd" required>
    <span ng-show="myform.myadd.$touched && myform.myadd.$invalid">the address is
    required</sapn>
    </p>
    </form>
    <p>
    we use the ng-show directive to only show the error message if the field has been touched
    AND is empty</P>
    </body>
    </html>

    Prac4
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Prac4</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.css"></head>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
    <div ng-app="myApp" ng-controller="personCtrl">
    First Name:<input type="text" ng-model="firstName"><br>
    Last Name:<input type="text" ng-model="lastName"><br>
    <br>
    Full Name:{{fullNameFun()}}
    </div>
    <script>
    var app=angular.module('myApp',[]);
    app.controller('personCtrl',function($scope){
    $scope.firstName="Gabbar";
    $scope.lastName="Sing";
    $scope.fullNameFun=function(){
    return $scope.firstName+" "+$scope.lastName;
    };
    });
    </script>
    <script src="runtime.js" type="module"></script><script src="polyfills.js"
    type="module"></script><script src="styles.js" defer></script><script src="vendor.js"
    type="module"></script><script src="main.js" type="module"></script></body>
    </html>
    Prac5
    <!doctype html>
    <html>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
    <script>
    var app=angular.module("myShoppingList",[]);
    app.controller('myCtrl',function($scope){
    $scope.products=["Milk","Bread","Cheese"];
    $scope.addItem=function(){
    $scope.errortext="";
    if(!$scope.addMe){return;}
    if($scope.products.indexOf($scope.addMe)==-1){
    $scope.products.push($scope.addMe);
    }else{
    $scope.errortext="The item is already in your shopping list:";
    }
    }
    $scope.removeItem=function(x){
    $scope.errortext="";
    $scope.products.splice(x,1);
    }
    });
    </script>
    <div ng-app="myShoppingList"ng-controller="myCtrl">
    <ul>
    <li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">x</span></li></ul>
    <input ng-model="addMe">
    <button ng-click="addItem()">Add</button>
    <p>{{errortext}}</p>
    </div>
    <p>Try to add the same item twice,you will get an error message.</p>
    </body>
    </html>
    PRAC 6
    <!doctype html>
    <html lang="en">
    <head>
    <title>Angular JS Print Student Details Form Data</title>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
    <form>
    <label>Name:</label>
    <input type="text" ng-model="student.name"><br>
    <label>Email:</label>
    <input type="email" ng-model="student.email"><br>
    <label>Phone:</label>
    <input type="tel" ng-model="student.phone"><br>
    <label>Address:</label>
    <input type="text" ng-model="student.address"><br>
    <button ng-click="submit()">Submit</button>
    </form>
    <p ng-bind-html="output"></p>
    <script>
    var app=angular.module('myApp',[]);
    app.controller('myCtrl',function($scope,$sce) {
    $scope.student={};
    $scope.output='';
    $scope.submit=function(){
    $scope.output="Name:"$scope.student.name+"<br>"+
    "Email:"+$scope.student.email+"<br>"+
    "Phone:"+$scope.student.phone+"<br>"+
    "Address:"+ $scope.student.address;
    $scope.output=$sce.trustAsHtml($scope.output);
    };
    });
    </script>
    </body>
    </html>
    Prac8

    <!DOCTYPE html>
    <html>
    <head>
    <title>Hello World with AngularJS</title>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    </head>
    <body ng-app="myApp">
    <div ng-controller="myCtrl"">
    <label for="numberinput">Enter your Mobile Number:</label>
    <input type="text" id="numberinput" ng-model="mobile">
    <p>Your Mobile number is {{mobile}}</p>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
    $scope.mobile="9876543210"
    });
    </script>
    </body>
    </html>

    You might also like