Search code examples
javascriptangularjsangular-ui-routerngroute

AngularJS basic routing Program is not working

I am learning Angular JS, got stuck with basic angular routing program. Kindly let me know what I am doing wrong.

GitHub link of the complete project code : https://github.com/ashpratap007/ngRoute

My files structure is as shown in below image:

enter image description here

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 are just test files and may be irrelevant for such question.

Solution

  • Change the order that you load the references, angular-route and angular should be loaded before loading the script.js

    <!-- 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>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.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>
<script type="text/javascript" src="script.js"></script>

    also your app.config should be,

    app.config(['$routeProvider','$locationProvider',function ($routeProvider, $locationProvider) {

    DEMO