Currently, I am diving into the world of M.E.A.N stack development. As part of my learning process, I have successfully set up a test page where Angular.js beautifully displays and re-orders data based on search criteria. To challenge myself further, I decided to incorporate an external JSON document into my application using a JavaScript controller. Despite everything running smoothly in the program, there's one hiccup - I can't seem to correctly link the file. It appears that I may be missing a crucial understanding of which document should be treated as the root file.
Here is a snippet of my code:
var phonecatApp = angular.module('contactApp', []);
phonecatApp.controller('ContactListCtrl',
['$scope', '$http', function($scope,
$http) {
$http.get('../data/contacts.json').success(
function(data) {
$scope.contacts = data;
});
$scope.orderProp = 'age';
}]);This is how my file structure looks like:
myApp
├── data
| |-- contacts.json
├── public
│ ├── javascripts
│ │ ├── controllers
| |---controller.js
|---views
| |---index.jade
| |---layout.jade
Here are the steps I've taken so far:
I carefully went through the documentation, which led me to believe that the link in my controller should be written as if it were referencing from the index.jade file. Unfortunately, this approach did not yield the desired result.
If anyone has any suggestions or insights, they would be immensely appreciated.
Thank You