2

I'm compiling an angular app using the yeoman/generator-grunt-angular system, which I have modified slightly to accommodate code shared with another app. "Release mode" is compiling all of the templates into the javascript, so that everything is loaded instantly. If I reference a template, like here:

<div ng-include="'components/navbar/navbar.html'" />
<div class="row">
  <div class="large-4 columns">
    <h3>Your Courses</h3>
    <div ng-include="'components/courses/course-list.html'" ng-controller="MyCoursesCtrl" />
    <form id="fileupload" 
          data-url="http://api.orienteer.io/upload_gpx"
          method="POST" enctype="multipart/form-data" 
          data-ng-controller="GpxFileUploadCtrl" 
          ng-submit="alert('gooo');">
      <span class="btn btn-success fileinput-button"  ng-class="{disabled: disabled}">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Upload a GPX File</span>
        <input type="file" name="gpx_file" ng-disabled="disabled">
        {{ status }}
      </span>
    </form>
  </div>
</div>

The templating halts after the first include. If I remove the first one, it halts after the second. The whole template is included, but nothing after it (in this case, the navbar is rendered, but nothing after it).

No errors are thrown, the templates are all happily residing in the template cache (as evidenced by the fact that they appear, they just stop behavior).

There are no problems with the code in development mode, and I am completely stumped as to how to debug this further. Is there some way I can switch on verbose logging, debugging, etc? I've already turned of code minification so I can read stuff, but without any errors being thrown, I don't know where to start.

EDIT Here are the versions of all of the dependencies that I'm using:

  "dependencies": {
    "modernizr": "2.8.x",
    "angular": "1.3.4",
    "jquery" : "1.x.x",
    "angular-animate" : "1.3.x",
    "angular-cookies" : "1.3.x",
    "angular-touch" : "1.3.x",
    "angular-sanitize" : "1.3.x",
    "angular-resource" : "1.3.x",
    "angular-ui-router" : "0.2.x",
    "angular-leaflet-directive" : "latest",
    "lodash" : "latest",
    "foundation" : "5.4.x",
    "jquery-file-upload" : "latest"
  },
Daniel
  • 1,188
  • 11
  • 22
  • What version of angular? – markthethomas Nov 26 '14 at 17:40
  • @markthethomas - 1.3.4 also added the dependencies clause from my bower.json, which should answer any other dependency questions. – Daniel Nov 26 '14 at 17:44
  • Hmm. That is weird. So you don't get any sort of error whatsoever from the console? Anything CORS related? Ng-include can be troublesome sometimes when using file:// paths. Also: when you say "development" mode, what tools does that mean you're using to serve the app locally w/? – markthethomas Nov 26 '14 at 17:55
  • (I see you're using yeoman, but I'm not familiar w/ that spec. generator) – markthethomas Nov 26 '14 at 17:58
  • While we're trying to figure this out: Batarang can sometimes help. https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk – markthethomas Nov 26 '14 at 17:59
  • Batarang, confusingly, refuses to start in release mode, I have no idea why. Development mode is with everything scattered around in different files, served by a node-based development aid (gulp). Release mode, there are no requests for individual resources, nothing CORS related, etc. Everything is compiled into two JS files, two CSS files (vendor/app) and an HTML file - that's it. All of the partials are inserted into the template cache during app startup. – Daniel Nov 26 '14 at 18:17
  • Gotcha. Weird that Batarang won't start. Can you post a jsfiddle or more code so I can try emulating the environment? – markthethomas Nov 26 '14 at 18:33
  • 1
    I just pushed the release-mode code to http://new.orienteer.io/. Nothing's minified, so you should be able to read everything. – Daniel Nov 26 '14 at 19:30
  • Awesome. Let's see if we can figure this out. – markthethomas Nov 26 '14 at 19:40
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/65715/discussion-between-daniel-and-markthethomas). – Daniel Nov 26 '14 at 19:40
  • can you try naturally closing the divs that contain the ng-include directive and see if that has any affect? Could be due to the way that particular directive gets matched by Angular's HTML compiler. – markthethomas Nov 27 '14 at 01:11

2 Answers2

4

I was checking up on this subject today and I remembered a different notation used on W3Schools.

They used:

<div ng-include="'myUsers_Form.htm'"></div>

Instead of:

<div ng-include="'myUsers_Form.htm'" />

When I changed the first include to your style I encountered the same problem with the include after that one, but in the notation used by W3Schools its possible to include multiple files.

Casper
  • 1,435
  • 10
  • 22
  • Didn't even notice that that directive was self-closing till now. Good catch! – markthethomas Nov 27 '14 at 00:47
  • Can someone explain to me what the difference is from a DOM perspective between self-closing and non-self-closing tags? EDIT: http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/ is a start. – Daniel Nov 27 '14 at 16:38
0

Based on chat: A switch to more complete implementation of UI-router is likely to solve the apparent incompatibility w/ respect to the ng-include directive. https://github.com/angular-ui/ui-router

markthethomas
  • 4,391
  • 2
  • 25
  • 38