0

so i've been trying to learn angular for the past couple of days and i've set this up so that a message comes up...but it seems like its not working and i cannot figure out why. Please let me know if its just a misspell or something been looking at it for hours now... THanks

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Routing App!</title>

    <!-- set the base path for angular routing -->
    <base href="/">

    <!-- CSS -->
    <!-- load bootstrap and fontawesome via CDN -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="C:\Users\JChoi\Desktop\font-awesome-4.3.0/css/font-awesome.css">
    <style>
        body { padding-top:50px; }
    </style>

    <!-- JS -->
    <!-- load angular and angular-route via CDN -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>

    <!-- load our custom angular app files -->
    <script src="js/app.js"></script>
    <script src="js/app.routes.js"></script>
</head>
<body class="container" ng-app="routerApp" ng-controller="mainController as main">

    <!-- HEADER AND NAVBAR -->
    <header>
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Angular Routing Example</a>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="/about"><i class="fa fa-shield"></i> About</a></li>
                <li><a href="/contact"><i class="fa fa-comment"></i> Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <main>
        <div class="jumbotron">
            <h1>{{ main.bigMessage }}</h1>
        </div>

        <!-- angular templating will go here -->
        <!-- this is where content will be injected -->
    </main>

</body>
</html>

JS/Angular code:

angular.module('routerApp', ['routerRoutes'])

// create the controller and inject Angular's 
// this will be the controller for the ENTIRE site
.controller('mainController', function() {

    var vm = this;

        // create a bigMessage variable to display in our view
        vm.bigMessage = 'A smooth sea never made a skilled sailor.';

})

// home page specific controller
.controller('homeController', function() {

    var vm = this;

    vm.message = 'This is the home page!';
})

// about page controller
.controller('aboutController', function() {

    var vm = this;

        vm.message = 'Look! I am an about page.';
})

// contact page controller
.controller('contactController', function() {

    var vm = this;

        vm.message = 'Contact us! JK. This is just a demo.';
});

Here is a codepen link as well: http://codepen.io/zomdar/pen/doPJgY?editors=101

1
  • You don't list ngRoute as a module dependency at angular.module('routerApp', ['routerRoutes'])
    – Tom
    Apr 27, 2015 at 17:58

2 Answers 2

3

Please change routerRoutes to ngRoute in your model settings.

Write this code

angular.module('routerApp', ['ngRoute'])

instead of this code

angular.module('routerApp', ['routerRoutes'])

Working Demo

Explanation for your error

You have call this(angular-route.js) script in your screen

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>

You can see the details about that script from : http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js

The defined route module by `ngRoute' Name.

see

 angular.module('ngRoute', ['ng']).
                        provider('$route', $RouteProvider),

So you should be call ngRoute in you main module.

4
  • it works in codepen but is there a reason when i do it on my desktop it still doesnt work?
    – jeremy
    Apr 27, 2015 at 18:03
  • @jeremy Clear your browser history and try to force refresh your browser :) Apr 27, 2015 at 18:05
  • I'm not sure why but its still not working on my desktop i tried clearing hte browser history as well as force refreshing
    – jeremy
    Apr 27, 2015 at 18:40
  • nvm i just fixed it...sometypos
    – jeremy
    Apr 27, 2015 at 18:54
0

The codepen link is broken because you didn't add the "routerRoutes" module. If you remove it, the sample is working.

Do you have content in your "app.routes.js" file?

Not the answer you're looking for? Browse other questions tagged or ask your own question.