javascript - opening angularjs app in google chrome 32 shows blank page -
i'm working on web app mom's startup, , because thought full server-side framework overkill, decided write using angularjs. i've gotten basic layout done, wrote subpages, wired routes , wrote controllers, when try , launch app, shows layout. i've tried several things things work including:
- addressing jshint/jslint issues.
- fixing errors raised chrome devtools.
- moving javascript file js/ directory root of project , updating html.
- moving subpages pages/ directory root of project , updating routes.
all no results. i'm not sure terms google for, 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 face of 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(); = 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 face of 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 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 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 lost here, have idea point me in right direction? thank time , consideration.
edit okay, we're making progress, looks problem 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
in addition jason lee's changes:
you must not use $log service in .config() block, since used configure providers (e.g. $routeprovider or $logprovider).
just remove injected $log , $log.debug() ($log.debug("setting routes."); , $log.debug("routes set up,");) calls , no more errors thrown.
Comments
Post a Comment