AngularJS basic routing Program is not working

debugcn Published at Dev

Ashish Pratap

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:

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.

Sajeetharan

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-30

Comments

0 comments

From Dev

Simple AngularJS routing not working

From Dev

KendoUI not working with AngularJS Routing

From Dev

Angularjs routing not working

From Dev

angularjs routing not working properly

From Dev

routing with parameters not working in angularjs

From Dev

Angularjs routing not working correctly

From Dev

Angularjs routing is not working

From Dev

Routing is not working with AngularJS

From Dev

Routing is not working in AngularJS

From Dev

Routing not working on Angularjs

From Dev

angularjs with cordova routing not working

From Dev

Angularjs routing not working with base href

From Dev

AngularJS Data Binding and Routing not working

From Dev

AngularJS Routing not doing anything not working

From Dev

angularjs routing is not working no error found

From Dev

Why is this basic python program not working?

From Dev

Basic Angularjs routing failing to get template

From Dev

Basic Angularjs routing failing to get template

From Dev

Basic issue with AngularJS directive not working

From Dev

angularjs formly basic form not working

From Dev

Why this HelloWorld program of AngularJS is not working?

From Dev

AngularJS subdirectory routing not working, with <base> tag applied

From Dev

AngularJS, HTML5 mode routing not working

From Dev

AngularJS routing not working after adding second state

From Dev

AngularJS routing not working after site hosted into IIS

From Dev

AngularJS routing is sometimes not working on IE10

From Dev

Routing is not working in MVC Web API and AngularJS

From Dev

AngularJS routing not working after adding second state

From Dev

Basic Binary to Decimal Conversion Program not working (Python)

Related Related

Article