All geek questions in one place

Use AngularJs NgResource to load JSON file from localhost

Overview

I am creating an application (runs on MAMP) that contains contact information that will expand to store more data, such as the name of the project and the deadline, as soon as this part is operational.

Questions

When a user visits /projects.php#/project/ , I would like them to see a list of all the project names with a link to their details page.

  • How to write the following to access all my data?

Do I need .json at the end?

What does @id do?

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

When a user visits /projects.php#/project/a-gran-goodn , I would like them to see details about this project (now just a name and address).

  1. How can I write the following to return my data by identifier? $scope.project = $routeParams.id ? Project.get({id: $routeParams.id}): new Project();

plunkr file

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

project.json

This file is located at 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(); });

overtones /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>

overtones /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>
+4
source share
2 answers

Since you cannot request a raw JSON file as you can with RESTful-style URLs (for what $resource built), you can instead get a copy of JSON and then create your own query , get , etc. that looks at the data and returns the right thing. This is a bit complicated because you also want to support the new Project , which doesn’t actually make sense when using file-backed storage, but this example supports it:

 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; });

You can use the query and get results, like any other promise:

 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(); });

Note the change to Project.get($routeParams.id) ; In addition, the updated Plunker also fixes a problem in your $routeProvider configuration.

All of this is shown here: http://plnkr.co/edit/mzQhGg?p=preview

+10
source

Paste here the generic code that I use to extract json from your local or remote server, maybe this will help you:

it uses a factory which you can call when you need it.

 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; });

Then when you need to call it:

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

Source: https://habr.com/ru/post/1489954/

More articles:


All Articles