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="/" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen,projection">
<link rel="stylesheet" href="//netdna.bootstrapcdn/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis/ajax/libs/angularjs/1.2.15/angular-resource.js"></script>
<script src="//ajax.googleapis/ajax/libs/angularjs/1.2.15/angular-route.js"></script>
<script src="//ajax.googleapis/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script src="//netdna.bootstrapcdn/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src=".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/analytics.js', 'ga');
ga('create', 'UA-49712370-1', 'lifeintheface');
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] .2.15/$injector/modulerr?p0=LifeInTheFace&p1=E…arjs%2F1.2.15%2F%24injector%2Funpr%3Fp0%3D%2524log%0A%20%20%20%20at%20...<omitted>...8) angular.js:3710
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./" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen,projection">
<link rel="stylesheet" href="//netdna.bootstrapcdn./bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn./bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis./ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis./ajax/libs/angularjs/1.2.15/angular-resource.js"></script>
<script src="//ajax.googleapis./ajax/libs/angularjs/1.2.15/angular-route.js"></script>
<script src="//ajax.googleapis./ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script src="//netdna.bootstrapcdn./bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://sdk.amazonaws./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./analytics.js', 'ga');
ga('create', 'UA-49712370-1', 'lifeintheface.');
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/1.2.15/$injector/modulerr?p0=LifeInTheFace&p1=E…arjs%2F1.2.15%2F%24injector%2Funpr%3Fp0%3D%2524log%0A%20%20%20%20at%20...<omitted>...8) angular.js:3710
- 1 do you have a jS console error ? jsfiddle to reproduce ? – Jscti Commented Apr 14, 2014 at 12:11
- 1 @Bixi: No JS console errors, no JSHint warnings, JSFiddle gives same result. – Levi Campbell Commented Apr 14, 2014 at 12:31
- 1 @LeviCampbell And what is html5.js file content? – YAAK Commented Apr 14, 2014 at 15:01
4 Answers
Reset to default 3You've missed ng-app
try to add it to <html ng-app='LifeInTheFace'>
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.
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'
});
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 '/'.