对于angularjs–使用$http加载json数据时的Angular-grid感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍angular.json，并为您提供关于angularjs–An
对于angularjs – 使用$http加载json数据时的Angular-grid感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍angular.json，并为您提供关于angularjs – Angular $http vs service vs ngResource、angularjs – Angular 2 DI,使用自定义Http、angularjs – Angular JS $http未在范围内定义、angularjs – Angular JS：JSON数据未显示在ng-Grid中的有用信息。
本文目录一览：- angularjs – 使用$http加载json数据时的Angular-grid（angular.json）
- angularjs – Angular $http vs service vs ngResource
- angularjs – Angular 2 DI,使用自定义Http
- angularjs – Angular JS $http未在范围内定义
- angularjs – Angular JS：JSON数据未显示在ng-Grid中
angularjs – 使用$http加载json数据时的Angular-grid（angular.json）
我在项目中使用ag-grid插件.我使用$http服务获取json数据.但网格在网页中显示为空白.但是当直接应用json数据时,网格工作.我想这可能是由于从$http获取数据的延迟.但是根据角度概念,数据到来时应该更新网格.是否有任何解决方案仅在数据来自服务器时显示html页面.
@H_301_20@解决方法
下面是我的javascript文件’filebrowser.js’：
var filebrowserModule = angular.module('filebrowser',['agGrid']);
filebrowserModule.controller('filebrowserController',function($scope,$http) {
$scope.rowData=[
];
$http.get("http://localhost:8080/KKR/flow/sin/allSins.json")
.success(function(data) {
$scope.rowData=JSON.parse("["+JSON.stringify(data)+"]");
console.log($scope.rowData);
});
/*
$scope.rowData=[
{"group":true,"data":{"name":"joe"},"children":[
{"group":true,"data":{"name":"pat"},"children":[{"group":true,"data":{"name":"maya"},"children":[{"group":false,"data":{"name":"brook"},"children":[]},{"group":true,"data":{"name":"kery"},"data":{"name":"santosh"},"children":[]}]}]}]},{"group":false,"data":{"name":"aravind"},"children":[]}]}
]
*/
var columnDefs = [
{headerName: "Name",field: "name",width: 250,cellRenderer: {
renderer: 'group',innerRenderer: innerCellRenderer
}},{headerName: "Size",field: "size",width: 70,cellStyle: sizeCellStyle},{headerName: "Type",field: "type",width: 150},{headerName: "Date Modified",field: "dateModified",width: 150}
];
$scope.gridOptions = {
columnDefs: columnDefs,rowData: $scope.rowData,rowSelection: 'multiple',rowsAlreadyGrouped: true,enableColResize: true,enableSorting: true,rowHeight: 20,icons: {
groupExpanded: '<i/>',groupContracted: '<i/>'
},onRowClicked: rowClicked
};
$scope.selectedFile = 'Select a file below...';
function rowClicked(params) {
var node = params.node;
var path = node.data.name;
while (node.parent) {
node = node.parent;
path = node.data.name + '\\' + path;
}
$scope.selectedFile = path;
}
function sizeCellStyle() {
return {'text-align': 'right'};
}
function innerCellRenderer(params) {
var image;
if (params.node.group) {
image = params.node.level === 0 ? 'disk' : 'folder';
} else {
image = 'file';
}
var imageFullUrl = '/example-file-browser/' + image + '.png';
return '<img src="'+imageFullUrl+'"/> ' + params.data.name;
}
});
下面是我的html文件：
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="UTF-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/angular/filebrowser.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
-->
<script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- you don't need ignore=notused in your code,this is just here to trick the cache -->
<script src="scripts/angular/ag-grid.js?ignore=notused10"></script>
<link rel="stylesheet" type="text/css" href="styles/angular/ag-grid.css?ignore=notused10">
<link rel="stylesheet" type="text/css" href="styles/angular/theme-fresh.css?ignore=notused10">
<script src="scripts/angular/filebrowser.js"></script>
</head>
<body ng-app="filebrowser">
<div ng-controller="filebrowserController">
<divhttps://www.jb51.cc/tag/ott/" target="_blank">ottom: 2px; background-color: white;"> {{selectedFile}}</div>
<divag-grid="gridOptions"https://www.jb51.cc/tag/bro/" target="_blank">browser">
</div>
</div>
</body>
</html>
使用ag-Grid API设置行数据.
看看这个例子“Further Example Starting Point”来看看.
代码是
$scope.gridOptions.api.setRows(res.data);
angularjs – Angular $http vs service vs ngResource
我想了解使用一个简单的$ http请求到服务器和/或在服务中使用一个ngResource对象(除了显而易见的RESTful资源)包装该请求的优点/缺点。
从我的理解$ http请求是低级别，但非常灵活和可配置，而处理RESTful API ngResource对象使交流非常简单。
我想我所询问的是一个非常简单的场景，说从服务器(对象数组的GET请求)检索数据是更有效的简单地使用$ http请求，而不是包装在服务(应该是这样的情况吗？)或使用ngResource对象？
任何想法在这里将不胜感激。例如，一个$ http响应可以被缓存，一个ngResource？谢谢。
决定我将这个形成一个答案，因为在评论中我们基本上你想知道：
使用$ http或$ resource，结果仍然可以缓存，你指出了在你的问题中真正使用一个的原因。如果你有一个RESTful接口，那么使用$ resource是更好的，因为你最终会写一个RESTful接口常见的样板代码，如果你不使用RESTful服务，那么$ http更有意义。您可以通过http://www.pseudobry.com/power-up-http-with-caching/缓存数据
我认为将$ http或$资源请求放入服务通常工作更好，因为您想要访问来自多个位置的数据，该服务作为单身。所以，基本上你可以处理任何类型的缓存，你想要做的，控制器都可以只看到相应的服务来更新自己的数据。我发现一个$ watch在控制器中的数据服务和返回promise从我的服务的方法的组合给我最大的灵活性，如何更新控制器中的东西。
我会把这样的东西在我的控制器中，在控制器定义的顶部注入exampleService。
angular.module("exampleApp",[]).service('exampleService',["$http","$q",function ($http,$q) {
var service = {
returnedData: [],dataLoaded:{},getData = function(forceRefresh)
{
var deferred = $q.defer();
if(!service.dataLoaded.genericData || forceRefresh)
{
$http.get("PHP/getSomeData.PHP").success(function(data){
//service.returnedData = data;
//As Mark mentions in the comments below the line above Could be replaced by
angular.copy(data,service.returnedData);
//if the intention of the watch is just to update the data
//in which case the watch is unnecessary and data can
//be passed directly from the service to the controller
service.dataLoaded.genericData = true;
deferred.resolve(service.returnedData);
});
}
else
{
deferred.resolve(service.returnedData);
}
return deferred.promise;
},addSomeData:function(someDataToAdd)
{
$http.post("PHP/addSomeData.PHP",someDataToAdd).success(function(data){
service.getData(true);
});
}
};
service.getData();
return service;
}]).controller("ExampleCtrl",["$scope","exampleService",function($scope,exampleService){
//$scope.$watch(function() {return exampleService.returnedData},function(returnedData){
// $scope.myModel.someData = returnedData;
//});
//if not using angular.copy() in service just use watch above
$scope.myModel.someData = exampleService.returnedData;
}]);
这里还有一个来自Angular团队的最佳实践的视频，我仍然在重新观看，慢慢吸收。
http://www.youtube.com/watch?v=ZhfUv0spHCY
特别关于服务vs控制器：
http://www.youtube.com/watch?v=ZhfUv0spHCY&t=26m41s
angularjs – Angular 2 DI,使用自定义Http
我有一个使用Http的服务：
import { Injectable } from '@angular/core';
import { Inject } from '@angular/core';
import { Http,Headers,Response } from '@angular/http';
@Injectable()
export class OrdeRSService {
constructor(@Inject(Http) private http:Http) {}
...
}
以及使用它的组件
import { Component } from '@angular/core';
import { FormBuilder,Validators } from '@angular/common';
import { HTTP_PROVIDERS } from '@angular/http';
import { Router} from '@angular/router';
import { OrdeRSService } from '../services/orders.service'
@Component({
selector: 'login',templateUrl: './login.component.html',providers: [
HTTP_PROVIDERS,//{ provide: Http,useClass: Http }
AuthService,AuthStore,OrdeRSService
]
})
export class LoginComponent {
constructor(private authService: AuthService,private ordeRSService: OrdeRSService){}
....
}
这有效.我有一些注释掉的文字{提供：Http,useClass：Http}.我想在这里提供我自己的课程,扩展Http,但仍然具有所有相同的依赖性.我在这里采取的第一步是明确使用Http.
一旦我取消评论此文本(并添加一个http导入),一切都会中断.我收到错误“没有ConnectionBackend的提供者”.似乎HTTP_PROVIDERS刚刚停止作为提供者工作.
>如何明确使用Http工作？
>如何使用自己的CustomHttp并在HTTP_PROVIDERS中使用提供程序？
解决方法
使用自己的CustomHttp时,不需要使用HTTP_PROVIDERS,需要执行以下操作(如果使用RC5,则在app.module.ts中;如果使用RC4,则在main.ts中)：
providers: [
ConnectionBackend,provide(
Http,{
useFactory: (
backend: XHRBackend,defaultOptions: RequestOptions) =>
new CustomHttp(backend,defaultOptions),deps: [XHRBackend,RequestOptions]
}),]
我有同样的问题,这为我解决了.
编辑：
如果您使用RC5,则不需要导入HTTP_PROVIDERS,因为您将导入HttpModule,但我不完全记得RC4中是否需要HTTP_PROVIDERS.你可能会需要它.
angularjs – Angular JS $http未在范围内定义
我在过去几天一直在检查AngularJS,但我遇到了一个问题.我正在尝试使用$http.jsonp从Soundcloud API获取信息….但在我看来,$http未在$scope中定义.这是控制台告诉我的内容：
Uncaught ReferenceError: $http is not defined main.js:18 (anonymous function) main.js:18 (anonymous function) sdk.js:1 window.SC.SC.Helper.merge.Dialog.AbstractDialog.AbstractDialog.handleReturn sdk.js:1 window.SC.SC.Helper.merge.Dialog._handleDialogReturn sdk.js:1 window.SC.SC.Helper.merge.connectCallback
这是我在main.js中进行调用的地方
angular.module('soundSelectahApp')
.controller('MainCtrl',function ($scope) {
$scope.apiKey = "#############################";
$scope.results = [];
$scope.init = function(){
SC.initialize({
client_id: $scope.apiKey,redirect_uri: "http://localhost:9000/callback.html"
});
// initiate auth popup
SC.connect(function() {
SC.get('/me',function(me) {
alert('Hello,' + me.username);
});
$http.jsonp('https://api.soundcloud.com/me.json?client_id=' + $scope.apiKey + '&callback=JSON_CALLBACK').success(function(data) {
console.log(data);
}).error(function(error) {
console.log(error);
});
});
};
});
我忽略了什么吗？我不应该在我的$scope.init()中使用$http.jsonp()吗？这是否意味着我超出了范围？
解决方法
你需要在控制器中注入$http：
.controller('MainCtrl',function ($scope,$http) {
angularjs – Angular JS：JSON数据未显示在ng-Grid中
我已经使用Web API创建了MVC 4.0应用程序,它以
JSON格式返回数据(我使用NewtonSoft.Json将对象序列化为json),并尝试在ng-Grid中绑定数据.我正在接收以下格式的数据：
"[{\"Name\":\"FirsT_NAME\",\"Value\":\"FirsT_NAME\"},{\"Name\":\"CURRENT_DATE_TIME\",\"Value\":\"CURRENT_DATE_TIME\"},{\"Name\":\"CLIENTID\",\"Value\":\"CLIENTID\"},{\"Name\":\"CALLMODE\",\"Value\":\"CALLMODE\"},{\"Name\":\"new 321\",\"Value\":null}]"
当我尝试将数据分配给ng-grid时,每个字符填充在不同的行上.以下是我写的javascript：
var guidesRespApp = angular.module('guidesRespApp',['ngGrid']);
//Get Data from restful API.
guidesRespApp.controller('MyCtrl',function ($scope,$http) {
$http.get('/api/datadictionary').success(function (thisdata) {
$scope.myData = thisdata;
});
$scope.filterOptions = {
filterText: '',useExternalFilter: true,};
//Setting grid options
$scope.gridOptions = {
data: 'myData',multiSelect: true,filterOptions: { filterText: '',useExternalFilter: false },enableRowReordering: false,showGroupPanel: false,maintainColumnRatios: false,groups: [],showSelectionCheckBox: true,showFooter: true,enableColumnResize: true,enableColumnReordering: true
};
// $scope.totalFilteredItemsLength = function() {
// //return self.filteredRows.length;
// };
});
如果手动分配如下,数据将显示在网格中：
$scope.myData = [{"Name":"FirsT_NAME","Value":"FirsT_NAME"},{"Name":"CURRENT_DATE_TIME","Value":"CURRENT_DATE_TIME"},{"Name":"CLIENTID","Value":"CLIENTID"},{"Name":"CALLMODE","Value":"CALLMODE"}];
任何人都可以帮助我了解如何解决？
此外,当我键入filtertext中的值时,我还想显示已过滤的项目的计数.
如
http://angular-ui.github.io/ng-grid/中所述,网格中显示的数据类型为数组,该数组中的每个元素映射到正在显示的行.所以我修改了我的代码如下,它为我工作：
$http.get('http://localhost:12143/api/datadictionary').success(function (thisdata) {
//Convert data to array.
var myData = $.parseJSON(JSON.parse(thisdata));
$scope.myData = myData;
});
甚至var myData = $.parseJSON(angular.fromJson(thisdata));也工作.只需我们首先解析数据(为此我使用JSON.parse()),然后转换为数组(为此我使用$.parseJSON()).
关于angularjs – 使用$http加载json数据时的Angular-grid和angular.json的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于angularjs – Angular $http vs service vs ngResource、angularjs – Angular 2 DI,使用自定义Http、angularjs – Angular JS $http未在范围内定义、angularjs – Angular JS：JSON数据未显示在ng-Grid中等相关内容，可以在本站寻找。
本文标签：
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
