Scribd Logo
Upload

Welcome to Scribd!

  • Example Program

    Uploaded by

    kuttydon
    28 views6 pages
    The document provides examples of using AngularJS routing, reading JSON data, AJAX requests, and filters. It includes code samples for setting up routes to load different templates, retrieving JSON data from a file and displaying it in a table, making an AJAX GET request to load new content, and using filters to modify output like changing case, formatting currency, and filtering/ordering a list of subjects.

    Original Description:

    Original Title

    Example_program

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides examples of using AngularJS routing, reading JSON data, AJAX requests, and filters. It includes code samples for setting up routes to load different templates, retrieving JSON data from a file and displaying it in a table, making an AJAX GET request to load new content, and using filters to modify output like changing case, formatting currency, and filtering/ordering a list of subjects.

    Copyright:

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

    Example Program

    Uploaded by

    kuttydon
    The document provides examples of using AngularJS routing, reading JSON data, AJAX requests, and filters. It includes code samples for setting up routes to load different templates, retrieving JSON data from a file and displaying it in a table, making an AJAX GET request to load new content, and using filters to modify output like changing case, formatting currency, and filtering/ordering a list of subjects.

    Copyright:

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

    Angular JS routing example program (see the output of the program, run it)

    <!DOCTYPE html>

    <html>

    <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-route.js"></script>

    <body ng-app="myApp">

    <p><a href="#/!">Main</a></p>

    <a href="#!london">City 1</a>

    <a href="#!paris">City 2</a>

    <p>Click on the links to read about London and Paris.</p>

    <div ng-view></div>

    <script>

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

    app.config(function($routeProvider) {

    $routeProvider

    .when("/", {

    templateUrl : "main.htm"

    })

    .when("/london", {

    templateUrl : "london.htm"

    })

    .when("/paris", {

    templateUrl : "paris.htm"

    });

    });
    </script>

    </body>

    </html>

    Read JSOn data in angular JS (run the program)

    <!DOCTYPE html>

    <html>

    <head>

    <title>Wikitechy AngularJS Tutorials</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/

    angular.min.js"></script>

    </head>

    <body>

    <div ng-app="myApp" ng-controller="jsonCtrl" >

    <h3>JSON Fetching example in AngularJS </h3>

    <table border="1">

    <tr>

    <th>ID</th>

    <th>Car</th>

    <th>Model</th>

    </tr>

    <tr ng-repeat="x in myObject " >

    <td>{{x.id}}</td>

    <td>{{x.Car}}</td>

    <td>{{x.Model}}</td>

    </tr>

    </table>

    <h3>Original JSON file: {{myObject}}</h3>

    </div>
    <script>

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

    app.controller("jsonCtrl", function($scope, $http) {

    $http.get("myjson.json")

    .then(function (res) {

    $scope.myObject=res.data.records;

    });

    });

    </body>

    </script>

    </html>

    Myjson.json file

    { "records":[{"id":"1","Car":"Lamborghini","Model":"Veneno"},

    {"id":"2","Car":"Porsche","Model":"Panamera"},

    {"id":"3","Car":"Jaguar","Model":"XJ"},

    {"id":"4","Car":"Mercedes","Model":"Benz"},

    {"id":"5","Car":"Aston Martin","Model":"V8 Vantage"},

    {"id":"6","Car":"Rolls Royce","Model":"Miley"},

    {"id":"7","Car":"Bugatti","Model":"Veyron GT"} ] }

    AJAX reques example program

    <!DOCTYPE html>

    <html>

    <body>

    <div id="demo">

    <h1>The XMLHttpRequest Object</h1>

    <button type="button" onclick="loadDoc()">Change Content</button>

    </div>
    <script>

    function loadDoc() {

    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {

    if(this.readyState == 4 && this.status == 200) {

    document.getElementById("demo").innerHTML = this.responseText;

    };

    xhttp.open("GET", "xyz1.txt", true);

    xhttp.send();

    </script>

    </body>

    </html>

    Xz1.txt file

    hello updated

    AngularJS filter

    <html>
    <head>
    <title>Angular JS Filters</title>
    <script src =
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.m
    in.js">
    </script>
    </head>

    <body>
    <h2>AngularJS Sample Application</h2>

    <div ng-app = "mainApp" ng-controller =


    "studentController">
    <table border = "0">
    <tr>
    <td>Enter first name:</td>
    <td><input type = "text" ng-model =
    "student.firstName"></td>
    </tr>
    <tr>
    <td>Enter last name: </td>
    <td><input type = "text" ng-model =
    "student.lastName"></td>
    </tr>
    <tr>
    <td>Enter fees: </td>
    <td><input type = "text" ng-model =
    "student.fees"></td>
    </tr>
    <tr>
    <td>Enter subject: </td>
    <td><input type = "text" ng-model =
    "subjectName"></td>
    </tr>
    </table>
    <br/>

    <table border = "0">


    <tr>
    <td>Name in Upper Case:
    </td><td>{{student.fullName() | uppercase}}</td>
    </tr>
    <tr>
    <td>Name in Lower Case:
    </td><td>{{student.fullName() | lowercase}}</td>
    </tr>
    <tr>
    <td>fees: </td><td>{{student.fees | currency}}
    </td>
    </tr>
    <tr>
    <td>Subject:</td>
    <td>
    <ul>
    <li ng-repeat = "subject in student.subjects
    | filter: subjectName |orderBy:'marks'">
    {{ subject.name + ', marks:' +
    subject.marks }}
    </li>
    </ul>
    </td>
    </tr>
    </table>
    </div>

    <script>
    var mainApp = angular.module("mainApp", []);

    mainApp.controller('studentController', function($scope)
    {
    $scope.student = {
    firstName: "Mahesh",
    lastName: "Parashar",
    fees:500,

    subjects:[
    {name:'Physics',marks:70},
    {name:'Chemistry',marks:80},
    {name:'Math',marks:65}
    ],
    fullName: function() {
    var studentObject;
    studentObject = $scope.student;
    return studentObject.firstName + " " +
    studentObject.lastName;
    }
    };
    });
    </script>

    </body>
    </html>

    You might also like