Unable to make AngularJS Routing

Question

This is my first time with AngularJS Routing, I have made a master HTML file like this

<!DOCTYPE html>
<html lang="en">
<head ng-app="RateRequestApp">
    <title> - Shipment Details</title>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="Angular/App.js"></script>
    <script src="Angular/Controllers.js"></script>
</head>
<body ng-controller="ReadOnlyController">
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Angular Routing Example</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#ShipmentDetails"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#rate-request"><i class="fa fa-shield"></i> About</a></li>

            </ul>
        </div>
    </nav>
    <div id="main">
    <span>data need to come here</span>
        <!-- angular templating -->
        <!-- this is where content will be injected -->
        <div ng-view></div>

    </div>
</body>
</html>

And app.js

var RateRequestApp = angular.module('RateRequestApp', [
   'RateRequestApp.controllers',
   'ngRoute'
]);
RateRequestApp.config(function ($routeProvider) {
    $routeProvider
        .when('/ShipmentDetails', {

            templateUrl: 'ShipmentDetails.html',
            controller: 'ReadOnlyController'
        })
        .when('/rate-request', {
            templateUrl: 'rate-request.html',
            controller: 'RateRequestCtrl'
        });
});

Controllers.js

angular.module('RateRequestApp.controllers', []).controller('ReadOnlyController', [
    '$scope',
    function ($scope) {
        $scope.message = "Success";
    }
]);

I can't see any error in console. The app is simply not working. And my URL comes like this

http://localhost:61919/home.html#ShipmentDetails

Everything looks okay to me. Can any one point out What I am doing wrong here?

My complete App: http://plnkr.co/edit/0f14nrITRb9ioXunEdot

I do see errors in console on plnkr.co/edit/0f14nrITRb9ioXunEdot?p=preview ... One of it is: Error: [$injector:nomod] Module 'RateRequestApp' is not available! More, on the 'network' tab you can see Angular/App.js and Angular/Controller.js can't be found... — MarcoS
– MarcoS, Commented Dec 17, 2014 at 10:36
Your .js files are in the root, not in an "Angular" folder. In your Plnkr at least. — cfj
– cfj, Commented Dec 17, 2014 at 10:38

MarcoS · Accepted Answer · 2014-12-17 10:48:38Z

3

Actually, there are lots of errors in the console. So lets start

1.You do not have Angular directory

<script src="Angular/App.js"></script>
<script src="Angular/Controllers.js"></script>

it should be

<script src="App.js"></script>
<script src="Controllers.js"></script>

ng-app on body not head
You have to use ng-href directive it should be like this :

<a ng-href='#/ShipmentDetails'>Details</a>

And you do not have RateRequestCtrl - check App.js.

Fixed example : http://plnkr.co/edit/beRwB2gAccPDcgRsicjU?p=preview

edited Dec 17, 2014 at 10:48

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

answered Dec 17, 2014 at 10:43

MiTa

1,34011 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to make AngularJS Routing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related