Scribd
Upload
103 views

Index - JS: 1. Try It Out - Hello

This document contains code for several AngularJS examples: 1. A basic example displaying a greeting using controllers and bindings. 2. An example using a controller and filter to display if a number is even or odd. 3. An example of adding products to a cart with filtering by brand and price. Products have details like name, price, image that are displayed and can be added to cart. 4. An expanded example of the product listing with sorting, searching, dropdowns to filter by brand and price range. Products are iterated through and displayed with their details. The code includes Angular modules, controllers, templates with bindings, filters and functions for core functionality like adding products

Uploaded by

Shafieul Mohammad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
103 views

Index - JS: 1. Try It Out - Hello

This document contains code for several AngularJS examples: 1. A basic example displaying a greeting using controllers and bindings. 2. An example using a controller and filter to display if a number is even or odd. 3. An example of adding products to a cart with filtering by brand and price. Products have details like name, price, image that are displayed and can be added to cart. 4. An expanded example of the product listing with sorting, searching, dropdowns to filter by brand and price range. Products are iterated through and displayed with their details. The code includes Angular modules, controllers, templates with bindings, filters and functions for core functionality like adding products

Uploaded by

Shafieul Mohammad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

1.

Try It Out - Hello <first name> <last name>

index.js
//write your code here

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


app.controller('myCtrl', function($scope) {
$scope.first_name = "John";
$scope.last_name = "Doe";
});

index.html
<!-- Hmtl -->
<html>
<head>
<script src="lib/angularjs/angular.min.js"></script>
<script src="lib/angularjs/angular-mocks.js"></script>
<script src="index.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="first_name"><br><br>
<input ng-model="last_name"><br><br>

Hello <span type="text">{{first_name + " " + last_name}}</span> !

</div>

</body>
</html>

2. Try It Out - Even or Odd with AngularJS

Index.js
// Add your code here
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.number1 = 100;
$scope.number2 = 11;

$scope.odd_even = function(result) {
if (result % 2 === 0) {
return "even";
} else {
return "odd";
}
};
});

3. Try It Out – Perform Add to Cart


Index.html
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-
route.min.js"></script>
<script src="index.js"></script>
</head>

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


<div class="topnav">
<a href="#" style="float:right;font-size:20px"><i>Check out</i></a>
<a href="#" style="float:right; font-size:20px"><i>Sign In</i></a>
<a href="#/Home" style="float:left; width:150px;" class="active"><b><i>Pick2get</i></b></a>

</div>
<br />
<div class="search_drop_down">
<select id="month" class="select select-styled" >
<option value="hide">-- Brand --</option>
<option ng-repeat="pdt in products" >{{pdt.brand}}</option>
</select>

<select id="year" class="select select-styled" >


<option value="hide">-- Price --</option>
<option value="low_price_to_high">Low Price to High</option>
<option value="hign_price_to_low">High Price to Low</option>
</select>

<input class="search" placeholder="Search" size="40" type="text">


</div>
<div class="product_box" ng-repeat="pdt in products">
<div class="single_1">
<div class="container">
<div class="discount">
<div class="discount_badge">{{pdt.discount}}</div>
<span class="discount_text">Discount</span>
</div>
<img src="img/dummy_product.jpg" />
</div>

</div>
<div class="single_2">
<div class="prod_desc">
<span class="pdt_name">{{pdt.name}}</span>
<div class="pdt_details_2_col">
<span class="brand">Brand</span>
<span class="brand_name">{{pdt.brand}}</span>
</div>
<div class="pdt_details_2_col">
<span class="brand">Price</span>
<span class="brand_name">{{pdt.price}}</span>
</div>
</div>

</div>
<div class="single_3">
<div class="quantity_sec">
<label>Quantity</label>
<br>
<input placeholder="Quantity" type="number" ng-model="pdt.quantity" >
</div>
</div>
<div class="single_4">
<input type="image" src="img/greyCart.png" alt="Submit" width="48" height="48" ng-
show="pdt.quantity<1?true:false" />
<input type="image" src="img/orangeCart.png" alt="Submit" width="48" height="48" ng-
hide="pdt.quantity<1?true:false" ng-click="addToCart(pdt);"/>

</div>
</div>

</body>

</html>
Index.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var imgPath = "img/";
$scope.quantity=0;
$scope.products = [
{
name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
image : imgPath + "cycle.jpg",
quantity:0
},
{
name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
image : imgPath + "shoes.jpg",
quantity:0
},
{
name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
image : imgPath + "shirt.jpg",
quantity:0
},
]
//Add your code here for addToCart function which returns success message
$scope.addToCart = function () {
alert('Product Added to Cart successfully')
return "success";
}
});

4. Try It Out- Sort and Search


Index.html
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-
route.min.js"></script>
<script src="index.js"></script>

</head>

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


<div class="topnav">
<a href="#" style="float:right;font-size:20px"><i>Check out</i></a>
<a href="" style="float:right; font-size:20px"><i>Sign In</i></a>
<a href="#/Home" style="float:left; width:150px;" class="active"><b><i>Pick2get</i></b></a>

</div>
<br />
<div class="search_drop_down">
<!--
Create drop down for brand
bind the value to 'searchKeyword'
Initialize the id as "brandSelection"
-->
<select class="select select-styled" id = "brandSelection" ng-model="searchKeyword" >
<option value="">-- Brand --</option>
<option ng-repeat="pdt in products" >{{pdt.brand}}</option>
</select>

<!--
Create drop down for price
Bind the value to 'selectedPriceFilter'
Call the function 'selectPriceFilter()' on select change
-->
<select class="select select-styled" ng-model="selectedPriceFilter" ng-
options="option for option in options" ng-change="selectPriceFilter(priceFilter)">
<option value="">-- Price --</option>
</select>
<!--
Create a input field for Search
Bind the input value to 'searchKeyword'
Initialize id and class as "search"
-->
<input id="search" placeholder="Search" size="40" type="text" ng-model="searchKeyword ">

</div>

<!--Use AngularJS sorting / searching features for the Product list-->


<!--Product List -->
<div class="product_box" id="product-list" ng-
repeat="pdt in products | filter: searchKeyword | orderBy:'price':selectedPriceFilter">
<div class="single_1">
<div class="container">
<div class="discount">
<div class="discount_badge">{{pdt.discount}}</div>
<span class="discount_text">Discount</span>
</div>
<img ng-src="{{pdt.image}}" />
</div>

</div>
<div class="single_2">
<div class="prod_desc">
<span class="pdt_name">{{pdt.name}}</span>
<div class="pdt_details_2_col">
<span class="brand">Brand</span>
<span class="brand_name brdName">{{pdt.brand}}</span>
</div>
<div class="pdt_details_2_col">
<span class="brand">Price</span>
<span class="brand_name prdPrice">{{pdt.price}}</span>
</div>
</div>

</div>
<div class="single_3">
<div class="quantity_sec">
<label>Quantity</label>
<br>
<input placeholder="Quantity" type="number" ng-model="pdt.quantity">
</div>
</div>
<div class="single_4">
<input type="image" src="img/greyCart.png" alt="Submit" width="48" height="48"
ng-show="pdt.quantity<1?true:false" />
<input type="image" src="img/orangeCart.png" alt="Submit" width="48" height="48"
ng-hide="pdt.quantity<1?true:false" ng-click="addToCart();" />
</div>
</div>
<!--Product List End-->
</body>

</html>

Index.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
var imgPath = "img/";
$scope.priceFilter = '';
$scope.selectPriceFilter = "";
$scope.dtsinCart = 0;
$scope.products = [
{
name: "Happy Cycle",
discount: "20%",
price: 2500,
brand: "Wheels",
addedToCart: false,
image: imgPath + "cycle.jpg",
quantity: 0
},
{
name: "Polo Baby Care Dress",
discount: "20%",
price: 500,
brand: "Super Hero",
addedToCart: false,
image: imgPath + "shirt.jpg",
quantity: 0 },
{
name: "Kids Shoes",
discount: "10%",
price: 1000,
brand: "Feel Good",
addedToCart: false,
image: imgPath + "shoes.jpg",
quantity: 0
}

];
$scope.addToCart = function () {
alert('Product Added to Cart successfully')
return "success";
}
//create scope variable options that has 'Low Price to High' and 'High Price to Low' values.
$scope.options = ['Low Price to High', 'High Price to Low'];
//add selectPriceFilter function that assign scope priceFilter to true / false based on condition
$scope.selectPriceFilter = function (priceFilter) {

if (priceFilter == 'Low Price to High') {


$scope.priceFilter = true;
} else if (priceFilter == 'High Price To Low') {
$scope.priceFilter = false;
}
};
});

5. Try It Out – Perform Displaying images


Index.html
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-
route.min.js"></script>
<script src="index.js"></script>
</head>

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


<div class="topnav">
<a href="#" style="float:right;font-size:20px"><i>Check out</i></a>
<a href="#" style="float:right; font-size:20px"><i>Sign In</i></a>
<a href="#/Home" style="float:left; width:150px;" class="active"><b><i>Pick2get</i></b></a>

</div>
<br />
<div class="search_drop_down">
<select id="month" class="select select-styled">
<option value="hide">-- Brand --</option>
<option ng-repeat="pdtBrand in products">{{pdtBrand.brand}}</option>
</select>

<select id="year" class="select select-styled">


<option value="hide">-- Price --</option>
<option value="low_price_to_high">Low Price to High</option>
<option value="hign_price_to_low">High Price to Low</option>
</select>

<input class="search" placeholder="Search" size="40" type="text">


</div>
<div class="product_box" ng-repeat="pdt in products">
<div class="single_1">
<div class="container">
<div class="discount">
<div class="discount_badge">{{pdt.discount}}</div>
<span class="discount_text">Discount</span>
</div>

<!--Display the image here-->


<img ng-src="{{pdt.image}}">

</div>

</div>
<div class="single_2">
<div class="prod_desc">
<span class="pdt_name">{{pdt.name}}</span>
<div class="pdt_details_2_col">
<span class="brand">Brand</span>
<span class="brand_name">{{pdt.brand}}</span>
</div>
<div class="pdt_details_2_col">
<span class="brand">Price</span>
<span class="brand_name">{{pdt.price}}</span>
</div>
</div>

</div>
<div class="single_3">
<div class="quantity_sec">
<label>Quantity</label>
<br>
<input placeholder="Quantity" type="number" ng-model="pdt.quantity">
</div>
</div>
<div class="single_4">
<input type="image" src="img/greyCart.png" alt="Submit" width="48" height="48"
ng-show="pdt.quantity<1?true:false" />
<input type="image" src="img/orangeCart.png" alt="Submit" width="48" height="48"
ng-hide="pdt.quantity<1?true:false" ng-click="addToCart();" />
</div>
</div>

</body>

</html>

Index.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.quantity=0;
//Add image property to the products and the image should have the url of images
var imagePath1 = "img/cycle.jpg";
var imagePath2 = "img/shoes.jpg";
var imagePath3 = "img/shirt.jpg";

$scope.products = [
{
name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
image:imagePath1,
quantity:0
},
{
name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
image: imagePath2,
quantity:0
},
{
name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
image: imagePath3,
quantity:0
},
]

$scope.addToCart=function(){
alert('Product Added to Cart successfully')
return "success";
}

});

6. Try It Out - Sign- in Form Validations in angularJS


Signin.html
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-
route.min.js"></script>
<script src="index.js"></script>
</head>

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


<div class="topnav">
<a href="#" style="float:right;font-size:20px"><i>Check out</i></a>
<a href="signin.html" style="float:right; font-size:20px"><i>Sign In</i></a>
<a href="index.html" style="float:left; width:150px;" class="active"><b><i>Pick2get</i></b><
/a>

</div>
<br />
<div class="search_drop_down">
<div class="tab">
<button id="newCustomer" class="tablinks active" onclick="openUser(event, 'New_Customer'
)">New Customer
</button>
<button id="existingCustomer" class="tablinks" onclick="openUser(event, 'Existing_Custom
er')">Existing
Customer</button>

</div>

<div id="New_Customer" class="tabcontent active">


<form name="New_User">
<!--
Get UserID input
Bind the input to 'userid'
-->

<input type="text" name="userid" ng-model="userid" placeholder="UserID" required ng-


minlength="8">

<br>
<label>Must be of 8 characters</label>
<br>
<br>
<!--
Get EmailID input and type should be email
Bind the input to 'emailid'
-->

<input name="emailid" ng-


model="emailid" placeholder="EmailID" type="email" required>

<br>
<label>Enter Valid Email</label>
<br>
<br>
<!--
Get Password input
Bind the input to 'pswd'
-->

<input type="text" name="pswd" ng-


model="pswd" placeholder="Password" required pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[@$]).*">

<br>
<label>Must be a combination of uppercase, lowercase and special characters</label>
<br>
<br>
<!--
Create a button which should contain label text as 'Create an Account'
Initialize button 'id' as "reg_new_user" and for class as "create_an_account"
If the inputs are invalid disable the button
When click is made the button should call 'registerUser()'
-->

<button id="reg_new_user" class="create_an_account" ng-


disabled="New_User.$invalid || New_User.$pristine">Create an Account</button>

</form>
</div>

<div id="Existing_Customer" class="tabcontent">


<form name="Login">
<label>Enter you User ID</label>
<br>

<input type="text" name="login_userid" ng-


model="login_userid" placeholder="UserID" required>
<br>

<br>
<label>Enter you Password</label>
<br>

<input type="Password" name="login_pswd" ng-


model="login_pswd" placeholder="Password" required>
<br>
<br>
<br>

<button id="login" class="Login" ng-click="login()">Login</button>


</form>
</div>

</div>

<script>
function openUser(event, userType) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}

document.getElementById(userType).style.display = "block";
event.currentTarget.className += " active";
}
</script>

</body>

</html>

Index.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var imgPath = "img/";
$scope.dtsinCart=0;
$scope.products = [
{
name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
image : imgPath + "cycle.jpg",
quantity:0
},
{
name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
image : imgPath + "shoes.jpg",
quantity:0
},
{
name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
image : imgPath + "shirt.jpg",
quantity:0
},
];
$scope.addToCart=function(){
alert('Product Added to Cart successfully')
return "success";
}

//add your code for registerUser which alert user and return successful message
$scope.registerUser = function() {
alert('Registration Successful');
return "successful";
}

});

7. Try It Out - Display all Products


Index.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var imgPath = "img/";
//add your $scope variable products here with below provided product details.
$scope.products = [
{
name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
image : imgPath + "cycle.jpg",
quantity:0
},
{
name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
image : imgPath + "shoes.jpg",
quantity:0
},
{
name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
image : imgPath + "shirt.jpg",
quantity:0
},
];
});

8. Try It Out - Get User Details Using $http


Index.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
//Define scope variable users here
//Use http service that consumes https://jsonplaceholder.typicode.com/users
$scope.users = {};

$http({
method: "GET",
url: "https://jsonplaceholder.typicode.com/users"
}).then(
function successCallback(response) {
$scope.users = response.data;
},
function errorCallback(response) {
alert("Error. Try Again!");
}
);

});

You might also like