Angular JS

 Program 1

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

<div ng-app="">

 

<p>Input something in the input box:</p>

<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>

<h1>Hello {{name}}</h1>

</div>

</body>

</html>

Program 2

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

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

{{ firstName + " " + lastName }}

</div>

<script>

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

app.controller("myCtrl", function($scope) {

    $scope.firstName = "John";

    $scope.lastName = "Doe";

});

</script>

</body>

</html>

GIT HUB projects

 

SCAN this QR code to connect with git hub projects

Program 3

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

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

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>

<br>

Full Name: {{firstName + " " + lastName}}

</div>

<script>

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

app.controller('myCtrl', function($scope) {

    $scope.firstName = "John";

    $scope.lastName = "Doe";

});

</script>

</body>

</html>

Program 4

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

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

<h1>{{carname}}</h1>

</div>

<script>

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

app.controller('myCtrl', function($scope) {

    $scope.carname = "Volvo";

});

</script>

<p>The property "carname" was made in the controller, and can be referred to in the view by using the {{ }} brackets.</p>

</body>

</html>

Program 5

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

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

<p>Looping with objects:</p>

<ul>

  <li ng-repeat="x in names | orderBy:'country'">

    {{ x.name + ', ' + x.country }}

  </li>

</ul>

</div>

<script>

angular.module('myApp', []).controller('namesCtrl', function($scope) {

    $scope.names = [

        {name:'Jani',country:'Norway'},

        {name:'Carl',country:'Sweden'},

        {name:'Margareth',country:'England'},

        {name:'Hege',country:'Norway'},

        {name:'Joe',country:'Denmark'},

        {name:'Gustav',country:'Sweden'},

        {name:'Birgit',country:'Denmark'},

        {name:'Mary',country:'England'},

        {name:'Kai',country:'Norway'}

        ];

});

</script>

</body>

</html>

Program 6

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

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

<p>Today's welcome message is:</p>

<h1>{{myWelcome}}</h1>

</div>

<p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome" variable.</p>

<script>

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

app.controller('myCtrl', function($scope, $http) {

  $http.get("welcome.htm").then(function (response) {

      $scope.myWelcome = response.data;

  });

});

</script>

</body>

</html>

Program 7

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

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

<table>

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

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

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

  </tr>

</table>

</div>

<script>

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

app.controller('customersCtrl', function($scope, $http) {

    $http.get("customers.php")

    .then(function (response) {$scope.names = response.data.records;});

});

</script>

</body>

</html>

Program 8

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

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

<select ng-model="selectedName" ng-options="x for x in names">

</select>

</div>

<script>

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

app.controller('myCtrl', function($scope) {

    $scope.names = ["Emil", "Tobias", "Linus"];

});

</script>

<p>This example shows how to fill a dropdown list using the ng-options directive.</p>

</body>

</html>

Program 9

<!DOCTYPE html>

<html >

<style>

table, th , td  {

  border: 1px solid grey;

  border-collapse: collapse;

  padding: 5px;

}

table tr:nth-child(odd) {

  background-color: #f1f1f1;

}

table tr:nth-child(even) {

  background-color: #ffffff;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

 

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

 

<table>

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

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

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

  </tr>

</table>

 

</div>

 

<script>

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

app.controller('customersCtrl', function($scope, $http) {

   $http.get("customers_mysql.php")

   .then(function (response) {$scope.names = response.data.records;});

});

</script>

 

</body>

</html>

Program 10

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

<div ng-app="" ng-init="mySwitch=true">

<p>

<button ng-disabled="mySwitch">Click Me!</button>

</p>

<p>

<input type="checkbox" ng-model="mySwitch"/>Button

</p>

<p>

{{ mySwitch }}

</p>

</div> 

</body>

</html>

Program 11

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

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

<h1 ng-mousemove="count = count + 1">Mouse Over Me!</h1>

<h2>{{ count }}</h2>

</div>

<script>

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

app.controller('myCtrl', function($scope) {

    $scope.count = 0;

});

</script> 

</body>

</html>

Program 12

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  

<body ng-app="">

<p>Try writing in the input field:</p>

<form name="myForm">

<input name="myInput" ng-model="myInput" required>

</form>

<p>The input's valid state is:</p>

<h1>{{myForm.myInput.$valid}}</h1>

</body>

</html>

Program 13

<!DOCTYPE html>

<html>

<link rel="stylesheet" href="/w3css/4/w3.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp" ng-controller="userCtrl">

<div class="w3-container">

<h3>Users</h3>

<table class="w3-table w3-bordered w3-striped">

  <tr>

    <th>Edit</th>

    <th>First Name</th>

    <th>Last Name</th>

  </tr>

  <tr ng-repeat="user in users">

    <td>

      <button class="w3-btn w3-ripple" ng-click="editUser(user.id)">&#9998; Edit</button>

    </td>

    <td>{{ user.fName }}</td>

    <td>{{ user.lName }}</td>

  </tr>

</table>

<br>

<button class="w3-btn w3-green w3-ripple" ng-click="editUser('new')">&#9998; Create New User</button>

<form ng-hide="hideform">

  <h3 ng-show="edit">Create New User:</h3>

  <h3 ng-hide="edit">Edit User:</h3>

    <label>First Name:</label>

    <input class="w3-input w3-border" type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">

  <br>

    <label>Last Name:</label>

    <input class="w3-input w3-border" type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">

  <br>

    <label>Password:</label>

    <input class="w3-input w3-border" type="password" ng-model="passw1" placeholder="Password">

  <br>

    <label>Repeat:</label>

    <input class="w3-input w3-border" type="password" ng-model="passw2" placeholder="Repeat Password">

  <br>

  <button class="w3-btn w3-green w3-ripple" ng-disabled="error || incomplete">&#10004; Save Changes</button>

</form>

</div>

<script src= "myUsers.js"></script>

</body>

</html>

Program 14

<!DOCTYPE html>

<html>

<style>

div {

  transition: all linear 0.5s;

  background-color: lightblue;

  height: 100px;

  width: 100%;

  position: relative;

  top: 0;

  left: 0;

}

.ng-hide {

  height: 0;

  width: 0;

  background-color: transparent;

  top:-200px;

  left: 200px;

}

</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 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

</body>

</html>

Program 14

<!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="#!red">Red</a>

<a href="#!green">Green</a>

<a href="#!blue">Blue</a>

<div ng-view></div>

<script>

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

app.config(function($routeProvider) {

    $routeProvider

    .when("/", {

        templateUrl : "main.htm"

    })

    .when("/red", {

        templateUrl : "red.htm"

    })

    .when("/green", {

        templateUrl : "green.htm"

    })

    .when("/blue", {

        templateUrl : "blue.htm"

    });

});

</script>

<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>

</body>

</html>

Program 15

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<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-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;">

  <header class="w3-container w3-light-grey w3-padding-16">

    <h3>My Shopping List</h3>

  </header>

  <ul class="w3-ul">

    <li ng-repeat="x in products" class="w3-padding-16">{{x}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li>

  </ul>

  <div class="w3-container w3-light-grey w3-padding-16">

    <div class="w3-row w3-margin-top">

      <div class="w3-col s10">

        <input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-border w3-padding">

      </div>

      <div class="w3-col s2">

        <button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button>

      </div>

    </div>

    <p class="w3-text-red">{{errortext}}</p>

  </div>

</div>

</body>

</html>