CODEWITHSUNDEEP
htmlcssangularjs
beginner
beginner

Reputation: 303

Angularjs Routing to the next page is not working

I am working on the main page. When I click on the link it should route to the next page. Its not working and I am unable to understand where I am going wrong.

Here is the plunkr for this [https://plnkr.co/edit/TA71EqoDX8Yu0WyIcgPn?p=preview]

my routing code is here:

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function ($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/Header', {
            templateUrl: '/Header.html',
            controller: 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl: 'pages/about.html',
            controller: 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl: 'pages/contact.html',
            controller: 'contactController'
        });
});

index.html code:

<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
    <title></title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <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.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <link href="index.css" rel="stylesheet" />
    <script src="app.js"></script>

    <link href="font.css" rel="stylesheet" />
</head>
<body ng-controller="mainController">

    <div class="navbar navbar-inverse navbar-fixed-left">
        <p>
            <br />
            <br />
        </p>



        <b><a class="navbar-brand" href="#" style="color:white">Administrator</a></b>
        <ul class="nav navbar-nav">

            <li><a href="#Header">Header Details</a></li>
            <li><a href="#ReportDetails">Report Details</a></li>
            <li><a href="#ProjectIDCreation">Project ID Creation</a></li>
            <li><a href="#">Display all submission for verify</a></li>
        </ul>

        <b><a class="navbar-brand" href="#" style="color:white">User</a></b>
        <ul class="nav navbar-nav">

            <li><a href="#">Timesheet Information</a></li>

        </ul>
    </div>

    <div class="navbar navbar-inverse navbar-fixed-top">



                <ul id="login_signup">
                    <li><a href="#" id="login_link">Login <span>&#x25c0;</span></a></li>
                    <li><a href="#" id="sign_link">SignUp <span>&#x25c0;</span></a></li>
                </ul>
            </div>

    <div class="pull-right" style="margin-right:30px;margin-top:50px">

        <div ng-view></div>


    </div>



</body>
</html>

Upvotes: 1

Views: 898

Answers (1)

Aravind
Aravind

Reputation: 41571

The following are the errors

  1. You have declared multiple modules.
  2. Header.html is having the html ,body tags which is not needed.
  3. The Main controller bootstrapped in the index.html does not exists.

  4. angular.module('scotchApp') is a getter syntax for the module defined already, which can be used to refer to the module

    var app = angular.module('scotchApp');
app.controller('mainController', function ($scope){
  console.log('main controller');

});
app.controller('headerCtrl', function ($scope) {
    $scope.headerData = {};
    $scope.headerData.Result = [];
    $scope.clear = function () {
        $scope.headerData.Result = [];
    }
    $scope.Save = function () {


        $scope.headerData.Result.push({
            "Header": $scope.header,
            "Status": $scope.status

        });

    };

    $scope.clear = function() {
        console.log($scope.header);
        console.log($scope.status);
        $scope.header = "";
        $scope.status = "";


    };


});

Updated plunk

Upvotes: 1

Related Questions