Michael Martinez Michael Martinez - 1 month ago 7
Jade Question

Script tag in jade template not generating closing tag with Angular

I am working through the Getting Mean book and have run into trouble in chapter 8, section 2. The publisher's forums are little help.

Hopefully someone can shed some light as I have no idea why it's not working as the book claims it should.

I believe the problem might be to do with the view that I'm using.

doctype html
html(ng-app='loc8rApp')
head
meta(name='viewport', content='width=device-width, initial-scale=1.0')
title= title
link(rel='stylesheet', href='/bootstrap/css/amelia.bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
body
.navbar.navbar-default.navbar-fixed-top
.container
.navbar-header
a.navbar-brand(href='/') Loc8r
button.navbar-toggle(type='button', data-toggle='collapse', data-target='#navbar-main')
span.icon-bar
span.icon-bar
span.icon-bar
#navbar-main.navbar-collapse.collapse
ul.nav.navbar-nav
li
a(href='/about/') About

.container
block content

footer
.row
.col-xs-12
small © Simon Holmes 2014

script(src='/angular/angular.js')
script(src='/angular/loc8rApp.js')
script(src='/javascripts/jquery-1.11.1.min.js')
script(src='/bootstrap/js/bootstrap.min.js')
script(src='/javascripts/validation.js')


As it's generating the following html when I load the page:

<script src="/angular/angular.js"><script src="/angular/loc8rApp.js"></script>
<script src="/javascripts/jquery-1.11.1.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/javascripts/validation.js"></script>


Which means the loc8rApp.js file seems to be contained in a script tag that isn't being closed.

The error being thrown by the console in chrome when I load the page is:

Uncaught Error: [$injector:modulerr] Failed to instantiate module loc8rApp due to:
Error: [$injector:nomod] Module 'loc8rApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.


Just in case the issue is the Angular controller file (loc8rApp.js), it's here:

angular.module('loc8rApp', []);

var locationListCtrl = function ($scope) {
$scope.data = {
locations: [{
//location data in here...
}]
};
};

var ratingStars = function() {
// other code in here...
};

angular
.module('loc8rApp')
.controller('locationListCtrl', locationListCtrl)
.filter('formatDistance', formatDistance)
.directive('ratingStars', ratingStars);


Thanks in advance for anyone who responds! =)

Answer

In the template file,

The line under body (row 9) was incorrectly spaced.

Instead of this:

    body
     .navbar.navbar-default.navbar-fixed-top

It should have been this:

    body
      .navbar.navbar-default.navbar-fixed-top

This mistake was in the books github chapter-08 branch repository which i had cloned and used to work through the code taught in the chapter. I've now submitted a pull request to get this fixed so hopefully it doesn't affect too many others.

pr can be found here: https://github.com/simonholmes/getting-MEAN/pulls

Comments