I'm currently involved in developing a job-board type website as a personal project. It is built using Foundation for sites and I am experimenting with integrating AngularJS.
I have created a basic module and controller:
angular.module('jobboard', [])
.controller('genCtrl', function($scope){
$scope.data = "Hello world!";
console.log($scope.data);
});
I have also designed a simple template structure. Here is an overview:
<body ng-app="jobboard">
<div ng-controller="genCtrl">
{{data}}
</div>
</body>
A few points to note:
- I have included angular and my controller script in the correct order within my header section.
- This code snippet is what it looks like after running gulp, previously it was divided into layout and page templates.
The issue I am facing is that although the console.log() statement functions properly, there is no content appearing inside the specified div. Any suggestions?
Additionally, I am familiar with Foundation for Apps but I am encountering difficulties integrating all its components with my specific project requirements. If anyone has insights on seamlessly incorporating Foundation for Sites components into a Foundation for Apps project, I would appreciate any advice.
Edit: additional information regarding my gulp and test-server setup
In Foundation for Sites, the project consists of a source (src) folder and a distribution (dist) folder: where you edit the raw site files and compile them for production respectively. I make changes in the src files, build the project, and inspect the served files from the dist folder.
Since Foundation for Sites does not include angular by default, I installed it separately using bower. To integrate it with my project, I could combine it with my generic app.js, but this file contains jQuery which I prefer to place at the end of my document while angular is typically placed in the head section. Following the same pattern as Foundation JS files inclusion.
Instead, I opted to pipe it into its own directory that can be accessed by my HTML document. Similar approach was taken for my controller script to avoid merging it into app.js.
My assumption is somewhere between this intricate process from src to dist, essential details might be overlooked but identifying the missing link poses a challenge.