I've been diving into Angular JS but hit a roadblock with a basic angular routing program. I need some guidance on what's going wrong.
If you want to check out the complete project code, visit my GitHub repository: https://github.com/ashpratap007/ngRoute
The structure of my files looks like the image below:
https://i.sstatic.net/dsWkm.png
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="script.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Angular Route -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js" type="text/javascript"></script>
</head>
<body ng-app='myApp'>
<div class="container-fluid row">
<div class="col-md-12 text-center " style="background-color : #3b5998 ; height: 80px">
<h1 style="font-family: cursive ; color: white">Store Products List</h1>
</div>
</div>
<nav class="navbar navbar-inverse" style="margin-bottom : 0px">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a ng-href="#">Home</a></li>
<li class="active"><a ng-href="#">Products</a></li>
<li><a ng-href="#">Spare1</a></li>
<li><a ng-href="#">Spare2</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid row" style="height:100% ">
<div class="row content">
<div class="col-sm-2 sidenav" style="height: 100%; background-color:#dfe3ee; ">
<p align="middle"><a href="#/Home">Home</a></p>
<hr>
<p align="middle"><a href="#/Products">Products</a></p>
<hr>
<p align="middle"><a href="#/Categories">Categories</a></p>
<hr>
<p align="middle"><a href="#Link4">Link4</a></p>
<hr>
<p align="middle"><a href="#Link4">Link4</a></p>
<hr>
<p align="middle"><a href="#Link4">Link4</a></p>
<hr>
</div>
<div class="col-sm-8" style="margin-top : 10px; background-color : #f7f7f7;">
<div ng-view></div>
</div>
<div class="col-sm-2 sidenav" style="height: 100%; background-color: #dfe3ee ">
<div class="well well-lg">
<p>ADS</p>
</div>
<div class="well well-lg">
<p>ADS</p>
</div>
</div>
</div>
</div>
<div class="container-fluid row">
<div class=" col-md-12 text-center " style="background-color : #3b5998 ; height: 60px">
<h5 style="font-family: Helvetica ; color: white">CITY GENERAL STORE</h5>
</div>
</div>
</body>
</html>
script.js
var app = angular.module("myApp", ["ngRoute"]);
app.config(['$locationProvider',function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/home", {
templateUrl: "pages/home.html",
controller: "homeController"
})
.when("/Products", {
templateUrl: "pages/addProduct.html",
controller: "addProduct"
})
.when("/Categories", {
templateUrl: "pages/categories.html",
controller: "Categories"
}).otherwise({
redirectTo: '/'
});
}]);
app.controller("addProduct", function ($scope) {
$scope.productList = [{
power: false,
productName: 'Soap',
productQuantity: 5,
productPrice: 10
}];
$scope.addNew = function () {
$scope.productList.push({
power: false,
productName: $scope.productName,
productQuantity: $scope.productQuantity,
productPrice: $scope.productPrice
});
$scope.productName = "";
$scope.productQuantity = "";
$scope.productPrice = "";
};
$scope.removeProduct = function () {
var oldList = $scope.productList;
$scope.productList = [];
angular.forEach(oldList, function (x) {
if (!x.power) $scope.productList.push(x);
});
};
});
app.controller("home", function ($scope) {
$scope.message = "THE CITY GENERAL STORE";
});
app.controller("Categories", function ($scope) {
$scope.categories = ["Packaged Food Items", "Fruits", "Vegetables","Dairy Products", "Plasticware","Staples","Freezed Products"];
});
addProduct.html
<div>
<form>
<div class="row">
<div class="col-sm-12" style="margin-bottom:30px ; ">
<input style="border-color : #d8dfea" class="btn col-sm-3" type="text" ng-model="productName" placeholder="Product Name" required>
<input style="border-color : #d8dfea" class="btn col-sm-3" type="number" ng-model="productQuantity" placeholder="Product Quantity" required>
<input style="border-color : #d8dfea" class="btn btn col-sm-3" type="number" ng-model="productPrice" placeholder="Product Price" required>
<button class="btn btn-primary btn col-sm-3" type="submit" ng-click="addNew()">Add New Product</button>
</div>
<div class="col-sm-12" style="margin-top:30px ">
<input class="btn col-sm-12" style="border-color : #d8dfea" type="text" ng-model="test" placeholder="Search Product">
</div>
</div>
</form>
<div style="height: 300px;">
<table class="table table-hover table-striped" style="margin-top:10px ;background-color : #ffffff;" border=2>
<tr style="border-color : black; ">
<th>Checkbox</th>
<th>Product Name</th>
<th>Product Quantity</th>
<th>Product Price</th>
</tr>
<tr ng-repeat="p in productList | filter: test">
<td><input class="checkbox" type="checkbox" ng-model="p.power"></td>
<td ng-bind="p.productName"></td>
<td ng-bind="p.productQuantity"></td>
<td ng-bind="p.productPrice"></td>
</tr>
<tr>
<td colspan=4><button class="btn btn-danger" style="width:100%" ng-click="removeProduct()">Remove Selected Items</button></td>
</tr>
</table>
</div>
</div>
Other HTML files included are purely for testing purposes and may not be directly relevant to this query.