Reputation: 6095

opening angularjs app in google chrome 32 shows blank page

I'm working on a web app for my mom's startup, and because I thought a full server-side framework would be overkill, I decided to write it using AngularJS. I've gotten the basic layout done, wrote subpages, wired up routes and wrote the controllers, but when I try and launch the app, it just shows my layout. I've tried several things to get things to work including:

Addressing all jshint/jslint issues.
Fixing all errors raised by Chrome DevTools.
moving the javascript file from the js/ directory to the root of the project and updating the HTML.
Moving the subpages from the pages/ directory to the root of the project and updating my routes.

All with no results. I'm not sure what terms to google for, so I skipped that.

Contents of index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">

    <head>
        <title>{{ Page.title() }}</title>
        <meta charset="utf-8">
        <meta name="description" content="Life in the face of an emergency base template.">
        <meta name="keywords" content="emergency, life, presentation" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="Levi Campbell">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="author" href="humans.txt">
        <link rel="Shortcut Icon" type="image/ico" href="img/favicon.png">
        <link rel="canonical" href="http://www.lifeintheface.com/" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen,projection">
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-resource.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc13.min.js"></script>
        <script src="js/html5.js"></script>
        <script>
            (function (i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

            ga('create', 'UA-49712370-1', 'lifeintheface.com');
            ga('send', 'pageview');
        </script>
    </head>

    <body>
        <div id="wrap">
            <header>
                <div itemscope>
                    <h1 itemprop="logo">
                        <img src="img/banner.png" />
                    </h1>
                </div>
                <nav role="navigation">
                    <!-- Add navigation here -->
                    <a href="/">Home</a>
                    <a href="/about">About</a>
                    <a href="/contact">Contact me</a>
                </nav>
            </header>
            <div id="content">
              <div ng-view></div>
            </div>
            <footer>
                <p>Copyright 2014 Life In the Face of an Emergency.</p>
            </footer>
        </div>
        <script src="js/custom.js"></script>
    </body>
</html>

Contents of js/custom.js:

$(document).ready(function () {

});

AWS.config.update({accessKeyId: 'akid', secretAccessKey: 'secret'});
var app = angular.module('LifeInTheFace', ['ngRoute']);

app.config(function($routeProvider, $locationProvider, $log) {
    $log.debug("Setting up routes.");
    $routeProvider.
    when('/', {
        templateUrl: 'pages/home.html',
        controller: "IndexCtrl"
    }).
    when('/about', {
        templateUrl: 'pages/about.html',
        controller: "AboutCtrl"
    }).
    when('/faqs', {
        templateUrl: 'pages/faqs.html',
        controller: "FaqsCtrl"
    }).
    when('/contact', {
        templateUrl: 'pages/contact.html',
        controller: "ContactCtrl"
    }),
    when('/thanks', {
        templateUrl: "pages/thanks.html",
        controller: "ThanksCtrl",
    }),
    otherwise({
        redirectTo: 'index'
    });
    $locationProvider.html5Mode(true);
    $log.debug("Routes set up,");
});

app.controller('IndexCtrl', function ($scope, $route, $routeParams, $location, $log, Page) {
    $log.debug("Now entering the index controller.")
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
    $scope.page = Page;
    Page.setTitle('Introduction');
});

app.controller("AboutCtrl", function ($scope, $route, $routeParams, $location, Page) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
    $scope.page = Page;
    Page.setTitle('About us');
});

app.controller("faqsCtrl", function ($scope, $route, $routeParams, $location, Page) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
    $scope.page = Page;
    Page.setTitle('Frequently Asked Questions');
});

app.controller("FaqsCtrl", function ($scope, $route, $routeParams, $location, Page) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
    $scope.page = Page;
    Page.setTitle('Frequently Asked Questions');
});

app.controller("ContactCtrl", function ($scope, $route, $routeParams, $location, Page) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
    $scope.page = Page;
    Page.setTitle('Contact me');
});

app.controller("FormCtrl", function ($scope, $route, $routeParams, $location, contact) {
    var ses = new AWS.SES();
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
    $scope.master = {};
    $scope.send = function (contact) {
        $scope.master = angular.copy(contact);
        var message = {};
        message.Destination.ToAddresses = [$scope.master.email];
        message.Message.Body.Text.Data = $scope.master.message;
        message.Message.Body.Text.Charset = "utf-8";
        message.Message.Subject.Data = $scope.master.subject;
        message.ReturnPath = $scope.master.email;
        ses.sendEmail(message, function (err, data) {
            if (err) $log.debug(err, err.stack);
            else $log.info(data);
        });
    };
});

app.controller("ThanksCtrl", function ($scope, $route, $routeParams, $location, Page) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
    $scope.page = Page;
    Page.setTitle('Thank you!');
});

I'm really lost here, does anyone have an idea that would point me in the right direction? Thank you for your time and consideration.

EDIT Okay, we're making progress, it looks like a problem with the injector.

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.15/$injector/modulerr?p0=LifeInTheFace&p1=E…arjs.org%2F1.2.15%2F%24injector%2Funpr%3Fp0%3D%2524log%0A%20%20%20%20at%20...<omitted>...8) angular.js:3710

Upvotes: 2

Answers (4)

Florian Orben

Reputation: 96

In addition to Jason Lee's changes:

You must not use the $log service in a .config() block, since those are used to configure your providers (e.g. $routeProvider or $logProvider).

Just remove the injected $log and the $log.debug() ($log.debug("Setting up routes."); and $log.debug("Routes set up,");) calls and no more errors will be thrown.

Upvotes: 2

Garrett McCullough

Reputation: 980

This is probably a pretty minor bug but the otherwise in your routing is wrong. It's currently trying to redirect you to 'index' but you don't have an index route. It should probably redirect to '/'.

Upvotes: 1

Jason Lee

Reputation: 23

You have some . and some , separating your when's. They should all be period to "chain" on another when.

$routeProvider.
    when('/', {
        templateUrl: 'pages/home.html',
        controller: "IndexCtrl"
    }).
    when('/about', {
        templateUrl: 'pages/about.html',
        controller: "AboutCtrl"
    }).
    when('/faqs', {
        templateUrl: 'pages/faqs.html',
        controller: "FaqsCtrl"
    }).
    when('/contact', {
        templateUrl: 'pages/contact.html',
        controller: "ContactCtrl"
    }),
    when('/thanks', {
        templateUrl: "pages/thanks.html",
        controller: "ThanksCtrl",
    }),
    otherwise({
        redirectTo: 'index'
    });

Upvotes: 2

Aray Karjauv

Reputation: 2945

You've missed ng-app

try to add it to <html ng-app='LifeInTheFace'>

Upvotes: 3

opening angularjs app in google chrome 32 shows blank page

Answers (4)

Related Questions