Menu icon Foundation
Foundation for Apps not loading ui-view and ng-include

I was using Chrome v48.0 with the F4A gulpfile.js and it wasn't loading the ng-includes and ui-views into index.html. I was sure it was me and struggled for much of a day until I tried Safari and Firefox and magic, my code was working fine. Then I tinkered with _settings and not much else and now I can't load anything in any browser.

Does anyone understand what happening? Nothing out there on the Web that I could find. F4A can't be that picky! Below is index.html. The home page has the usual routing code at the top but the partials, header, footer, nav, don't. Driving me nuts!

I'm on a Mac with El Capitan.

<!doctype html>
<html lang="en" ng-app="application">
<head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>My Product Name</title>
	<link href="./assets/css/app.css" rel="stylesheet" type="text/css">  
	<script src="./assets/js/foundation.js"></script>
	<script src="./assets/js/templates.js"></script>
	<script src="./assets/js/routes.js"></script>
	<script src="./assets/js/app.js"></script>
</head>  
 
<body>
	<div class="grid-frame vertical">
	  <div class="gid-content shrink">
	  	<div ng-include="'./templates/partials/nav.html'"></div>
	  </div>
	  <div ng-include="'./templates/partials/header-home.html'"></div>
	  <div ui-view class="grid-content"></div>
	</div> 
	<div ng-include="'./templates/partials/footer.html'"></div>
</body>
</html>

            

         

f4aPartials

I was using Chrome v48.0 with the F4A gulpfile.js and it wasn't loading the ng-includes and ui-views into index.html. I was sure it was me and struggled for much of a day until I tried Safari and Firefox and magic, my code was working fine. Then I tinkered with _settings and not much else and now I can't load anything in any browser.

Does anyone understand what happening? Nothing out there on the Web that I could find. F4A can't be that picky! Below is index.html. The home page has the usual routing code at the top but the partials, header, footer, nav, don't. Driving me nuts!

I'm on a Mac with El Capitan.

<!doctype html>
<html lang="en" ng-app="application">
<head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>My Product Name</title>
	<link href="./assets/css/app.css" rel="stylesheet" type="text/css">  
	<script src="./assets/js/foundation.js"></script>
	<script src="./assets/js/templates.js"></script>
	<script src="./assets/js/routes.js"></script>
	<script src="./assets/js/app.js"></script>
</head>  
 
<body>
	<div class="grid-frame vertical">
	  <div class="gid-content shrink">
	  	<div ng-include="'./templates/partials/nav.html'"></div>
	  </div>
	  <div ng-include="'./templates/partials/header-home.html'"></div>
	  <div ui-view class="grid-content"></div>
	</div> 
	<div ng-include="'./templates/partials/footer.html'"></div>
</body>
</html>

            

         
Jim Preston almost 4 years ago

Additional info: My /build contains all the properly updated files with the partials living in /client/templates/partials. index.html lives in /client/index.html.

/build/assets/js/ contains app, foundation, routes, templates all dated for the last save.

I'm developing on my MacBook Pro with Coda 2 for my IDE but using Gulp, not their preview mode. To develop the front end do I need a more robust server for the includes and views than the simple dev one in Coda?

What else can break F4A / AngularJS??

I saw the F4A splash page after setup and I was careful not to change anything but the html from that start. Nothing in js yet.

Rafi Benkual almost 4 years ago

Maybe it's the 'Allow access to file URLs' needs to be checked for LiveReload in Chrome's Extensions settings?

Jim Preston almost 4 years ago

Thanks Rafi. I didn't have a Livereload extension, didn't know I needed one. It works now.

Jim Preston almost 4 years ago

The problem was fixed by adding the Livereload extension in Chrome and the following:

I put a /temp folder in /client to store html files that I need to rework from F4S. Gulp copied this folder to /build. When I moved that folder out to the root and Gulped again then all browser display a mess, but that is the F4S formatting in F4A. I can fix that.

So the moral of the story is don't screw with the /client folder. It is sensitive to "creativity". At least it is for newbies. Of course the Gulpfile could be modified if necessary but easier to move my temp folder to the root.

Jim Preston almost 4 years ago

FYI post so anyone finding this thread has more diagnostic info:

The problem came back. Somehow I'm breaking http://localhost:8079 easily. Either ui-routing or the server is a sensitive beast. Chrome is more sensitive than Safari and Firefox. I couldn't get anything to show in index.html after doing the following and re-gulping.

1) I added a couple of folders to /templates and named them like /_partials. I removed them and it didn't bring the server or routing back to life. I restored them after the solution below and all works well now. We can add sub /folders and /_folders and the server and routing can handle this.

2) I created some new pages by duplicating a mostly empty one with the usual routing at the top and a and with a little text in them. Nothing on the page could break anything. Right?

I found one of the new pages with the same routing as another. This seems to cause the system to fail. Not like I found a lot of divine guidance in the Angular documents so maybe this thread will help someone.