Utilisez AngularJs NgResource pour charger le fichier JSON depuis localhost

Aperçu

Je crée une application (qui fonctionne avec MAMP) qui contient des informations de contact qui se développeront pour contenir plus de données telles que le nom du projet et la date limite, une fois que cette partie est fonctionnelle.

Des questions

Lorsque l'utilisateur visite /projects.php#/project/ j'aimerais qu'ils voient une liste de tous les noms de projet avec un lien vers leur page de détail.

Comment puis-je écrire les éléments suivants pour accéder à toutes mes données?

Ai-je besoin du .json à la fin?

Qu'est-ce que le @id fait?

return $resource('data/project.json/:id', {id: '@id'});

Lorsque l'utilisateur visite /projects.php#/project/a-gran-goodn j'aimerais qu'ils voient les détails de ce projet (pour l'instant, juste le nom et l'adresse).

Comment puis-je écrire ce qui suit pour retourner mes données par ID? $scope.project = $routeParams.id ? Project.get({id: $routeParams.id}): new Project();

Fichier plunkr

Http://plnkr.co/edit/7YPBog

Project.json

Ce fichier vit sur http://localhost:8888/angularjs/ProjectsManager/data/project.json

 [ { "address" : [ " 3156 Dusty Highway", " Teaneck New Jersey 07009-6370 US" ], "id" : "a-gran-goodn", "name" : "Grania Goodner", "phone" : " (862) 531-9163" }, { "address" : [ " 62 Red Fawn Moor", " Rodney Village West Virginia 25911-8091 US" ], "id" : "b-aime-defranc", "name" : "Aimery Defranco", "phone" : " (681) 324-9946" } ]

App.js

 var projectsApp = angular.module('projects', ['ngResource']); projectsApp.config(function($routeProvider) { $routeProvider .when('/', { controller: 'ProjectListCtrl', templateUrl: 'partials/projectlist.html'}) .when('project/:id', { controller: 'ProjectDetailCtrl', templateUrl: 'partials/projectdetail.html' }) .otherwise('/'); }); projectsApp.factory('Project', function($resource) { return $resource('data/project.json/:id', {id: '@id'}); }); projectsApp.controller('ProjectListCtrl', function(Project, $scope) { $scope.projects = Project.query(); console.log($scope.projects); }); projectsApp.controller('ProjectDetailCtrl', function(Project, $routeParams, $scope) { $scope.project = $routeParams.id ? Project.get({id: $routeParams.id}) : new Project(); });

Partials / projectlist.html

 <a href="#/project/" class="btn">Add new item</a> <ul class="unstyled"> <li ng-repeat="project in projects"> <div class="well"> <h2><small>{{project.id}}</small> {{project.name}}</h2> <a href="#/project/{{project.id}}" class="btn btn-link">View Info for {{project.name}}</a> </div> </li> </ul>

Partials / projectdetails.html

 <h3>Information</h3> <p>Name: {{project.name}}</p> <p>Phone Number: {{project.phone}}</p> <p ng-repeat="line in project.address">{{line}}</p>

Index.php

 <?php header('Access-Control-Allow-Origin: *'); ?> <!doctype html> <html ng-app="projects"> <head> <meta charset="utf-8"> <title ng-bind="title" ng-cloak>Restaurant &mdash;</title> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> </head> <body ng-controller="ProjectListCtrl"> <a class="brand" href="#">Projects Manager</a> <div id="app-container" class="container-fluid"> <div class="row-fluid"> <div class="span12" id="main" ng-view> </div><!--/.span12--> </div><!--/.row-fluid--> <footer>Copyright Projects &copy; 2013</footer> </div><!--/.container--> <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <!-- Don't forget to load angularjs AND angular-resource.js --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.js></script> <!--Controllers--> <script src="app.js"></script> </body> </html>

Comme vous ne pouvez pas interroger contre un fichier JSON brut comme vous le pouvez avec des URL de type RESTful (c'est ce $resource est construite pour faire), vous pouvez obtenir une copie de JSON, puis créer votre propre query , get , etc. . Qui examine les données et retourne la bonne chose. C'est un peu délicat parce que vous souhaitez également soutenir un new Project , ce qui n'a pas vraiment de sens lors de l'utilisation d'un magasin protégé par un fichier, mais cet exemple le supporte:

 projectsApp.factory('Project', function($http) { // Create an internal promise that resolves to the data inside project.json; // we'll use this promise in our own API to get the data we need. var json = $http.get('project.json').then(function(response) { return response.data; }); // A basic JavaScript constructor to create new projects; // passed in data gets copied directly to the object. // (This is not the best design, but works for this demo.) var Project = function(data) { if (data) angular.copy(data, this); }; // The query function returns an promise that resolves to // an array of Projects, one for each in the JSON. Project.query = function() { return json.then(function(data) { return data.map(function(project) { return new Project(project); }); }) }; // The get function returns a promise that resolves to a // specific project, found by ID. We find it by looping // over all of them and checking to see if the IDs match. Project.get = function(id) { return json.then(function(data) { var result = null; angular.forEach(data, function(project) { if (project.id == id) result = new Project(project); }); return result; }) }; // Finally, the factory itself returns the entire // Project constructor (which has `query` and `get` attached). return Project; });

Vous pouvez utiliser les résultats de la query et get comme toute autre promesse:

 projectsApp.controller('ProjectListCtrl', function(Project, $scope) { $scope.projects = Project.query(); }); projectsApp.controller('ProjectDetailCtrl', function(Project, $routeParams, $scope) { $scope.project = $routeParams.id ? Project.get($routeParams.id) : new Project(); });

Notez la modification de Project.get($routeParams.id) ; De plus, le Plunker mis à jour corrige également un problème dans votre configuration $routeProvider .

Tout ceci est démontré ici: http://plnkr.co/edit/mzQhGg?p=preview

Je vais coller ici un code générique que j'utilise pour récupérer json de votre local ou un serveur de télécommunications peut-être que cela vous aidera:

Il utilise une usine que vous pouvez appeler lorsque vous en avez besoin.

 app.factory('jsonFactory', function($http) { var jsonFactory= { fromServer: function() { var url = 'http://example.com/json.json'; var promise = $http.jsonp(url).then(function (response) { return response.data; }); return promise; }, hospitals: function() { var url = 'jsons/hospitals.js'; var promise = $http.get(url).then(function (response) { return response.data; }); return promise; } }; return jsonFactory; });

Ensuite, lorsque vous devez l'appeler:

 function cardinalCtrl(jsonFactory, $scope, $filter, $routeParams) { jsonFactory.hospitals().then(function(d){ $scope.hospitals=d.hospitals; }); jsonFactory.fromServer().then(function(d){ $scope.fromServer=d.hospitals; }); }