Scribd Logo
Upload

Welcome to Scribd!

  • Programs

    Uploaded by

    Manju Bhuvan
    10 views3 pages

    Original Title

    programs

    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

    Copyright:

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

    Programs

    Uploaded by

    Manju Bhuvan

    Copyright:

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

    1.

    Develop Angular JS program that allows user to input their first name
    and last name and display their full name. Note: The default values for
    first name and last name may be included in the program.

    Description:
    Users can input their first and last names into an AngularJS program, which
    then displays their entire name. 'Rajender' and 'Tilak' are the default values
    assigned to the first and last names. These values are modifiable in the
    controller (myCtrl) as needed.

    Program:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Program1</title>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    </head>
    <body>
    <div ng-app="myApp" ng-controller="myCtrl">
    <h1 >Full Name Program</h1 >
    <input type="text" ng-model="firstName" placeholder="Enter First Name">
    <input type="text" ng-model="lastName" placeholder=" Enter Last Name "
    >
    <br>
    Full Name:{{firstName + "" + lastName}}
    </div>
    <script>
    var app = angular.module("myApp",[]);
    app.controller("myCtrl", function($scope) {
    $scope.firstName="Rajender" ;
    $scope.lastName="Tilak";
    });
    </script>
    </body>
    </html>
    2. Develop an Angular JS application that displays a list of shopping items.
    Allow users to add and remove items from the list using directives and
    controllers.
    Note: The default values of items may be included in the program.

    Descriptions:
    AngularJS application that shows a shopping list and lets users edit the list
    by adding and removing items with controllers and directives. The shopping
    list is managed by this AngularJS application using a controller called
    myctrl. The item list displayed using ng-repeat, and there is an input field
    for adding new items. when an item is clicked on the ,,Remove Item,, button
    next to each one, it is removed from the list. clicking the [Add item,, button
    adds the entered item to the list. The items in the default list are ,,Egg,,,
    ,,Bread,,, and ,,Milk.,,.

    Program:
    <!DOCTYPE html>
    <html>
    <head>
    <title>AngularJS Shopping List App</title>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.j
    s"></script>
    </head>
    <body>
    <div ng-app ="myApp", ng-controller="myCtrl">
    <h1>Shopping List App</h1>
    <ul>
    <li ng-repeat="item in items">{{item}}</li>
    </ul>
    <input type="text" ng-model="newItem" placeholder="Enter New
    Item">
    <button ng-click="addItem()">Add Item </button >
    <button ng-click="removeItem(index)">Remove Item</button>
    </div>
    <script>
    var app = angular.module("myApp",[] );
    app.controller( "myCtrl", function($scope) {
    $scope.items =["Milk", "Bread" ,"Egg"];
    $scope.addItem=function() {
    $scope.items.push($scope.newItem);
    $scope.newItem=" ";
    };

    $scope.removeItem= function(index) {
    $scope.items.splice(index,1);
    };
    });
    </script>
    </body>
    </html>

    You might also like