我有一个读取json文件的$ http服务。我想使用模块化，但是我不知道如何在控制器中调用服务，也不知道服务的编写是否正确。
这是一个jsFidlle：https ://jsfiddle.net/aqbmdrvn/ 。
谢谢！！！
/// <reference path="../../typings/angularjs/angular.d.ts" />
/// <reference path="../../typings/angularjs/angular-route.d.ts" />
/// <reference path="../app.ts" />
/// <reference path="servicePets.ts" />
"use strict";
module AnimalPlanet {
// pet interface
export interface IPet {
type: string;
name: string;
age: number;
color: string;
specialCare: boolean;
availableForAdoption: boolean;
ldAdoption: boolean;
history: string;
featured: boolean;
newest: boolean;
imageUrl: string;
}
export interface RootObject {
pets: IPet[];
}
// pet controller with ui-grid
export class petsCtrl implements RootObject {
pets: IPet[];
constructor(private $http: ng.IHttpService,public petsService, private $scope: any, uiGridConstants: any, filterldAdoption: any) {
$scope.pets = {};
// ui grid option
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
paginationPageSizes: [5, 10, 15],
paginationPageSize: 5,
onRegisterApi: (gridApi) => {
$scope.gridApi = gridApi;
},
columnDefs: [
{
name: 'type',
cellTooltip: true,
headerTooltip: true
},
{
name: 'name',
cellTooltip: true,
headerTooltip: true
},
{
name: 'age',
// filters: [{
// condition: uiGridConstants.filter.GREATER_THAN,
// placeholder: 'greater than'
// }, {
// condition: uiGridConstants.filter.LESS_THAN,
// placeholder: 'less than'
// }
// ],
cellTooltip: true,
headerTooltip: true
},
{
name: 'color',
cellTooltip: true,
headerTooltip: true
},
{
name: 'specialCare',
cellTooltip: true,
headerTooltip: true
},
{
name: 'availableForAdoption',
cellTooltip: true,
headerTooltip: true
},
{
name: 'history',
cellTooltip: true,
headerTooltip: true
},
{
name: 'featured',
cellTooltip: true,
headerTooltip: true
},
{
name: 'newest',
cellTooltip: true,
headerTooltip: true
},
{
name: 'imageUrl',
cellTooltip: true,
headerTooltip: true,
enableFiltering: false,
enableHiding: false,
cellTemplate: "<img width=\"50px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src>"
}
]
};
// read json using http service
this.$http.get('/app/pets/pets.json').success((data) => { // pune te rog asta intr-un serviciu
// fill ui grid using http service
$scope.filterPets = data;
var uiGridPets = [];
angular.forEach($scope.filterPets, (item) => {
if (item.ldAdoption) {
uiGridPets.push(item);
}
});
$scope.gridOptions.data = uiGridPets;
// filter for main page with 3 pets
$scope.pets = data;
$scope.quantity = 3;
var featuredPets = [];
var newestPets =[];
angular.forEach($scope.pets, (item) => {
if (item.featured) {
featuredPets.push(item);
}
if(item.newest){
newestPets.push(item);
}
});
$scope.featuredPets = featuredPets;
$scope.newestPets = newestPets;
});
$scope.fromService = petsService.weatherChange();
}
}
petsCtrl.$inject = ['$http', '$scope', 'uiGridConstants', 'petsService'];
app.controller("petsCtrl", petsCtrl);
}
/// <reference path="../../typings/angularjs/angular.d.ts" />
/// <reference path="../../typings/angularjs/angular-route.d.ts" />
/// <reference path="../app.ts" />
"use strict";
module AnimalPlanet {
export interface IPetsService {
http: ng.IHttpService;
uiGridConstants: any;
}
export class servicePets implements IPetsService {
http: ng.IHttpService;
uiGridConstants: any;
constructor( $scope:any , $http: ng.IHttpService, uiGridConstants: any )
{
// read json using http service
$scope.pets = {};
this.http = $http;
}
public get() {
this.http.get('/app/pets/pets.json').success((data) => { // pune te rog asta intr-un serviciu
// fill ui grid using http service
var filterPets = data;
var uiGridPets = [];
angular.forEach(filterPets, (item) => {
if (item.ldAdoption) {
uiGridPets.push(item);
}
});
var gridOptions.data = uiGridPets;
// filter for main page with 3 pets
var pets = data;
var quantity = 3;
var featuredPets = [];
var newestPets =[];
angular.forEach(pets, (item) => {
if (item.featured) {
featuredPets.push(item);
}
if(item.newest){
newestPets.push(item);
}
});
var featuredPets = featuredPets;
var newestPets = newestPets;
});
}
}
servicePets.$inject = ['$http', '$scope', 'uiGridConstants'];
app.service('servicePets', servicePets);
}
这是我用于样板控制器和工厂的内容：
控制器代码：
declare var app: angular.IModule;
class MyController {
static $inject = ['myService'];
localData: IGetDataResult;
constructor(private myService: MyService) {
this.myService.getData('key1')
.then(result => {
this.localData = result.data;
});
}
}
app.controller('myController', MyController);
工厂代码：
declare var app: angular.IModule;
interface IGetDataResult {
field1: string;
}
class MyService {
static $inject = ['$http'];
constructor(private $http: angular.IHttpService) {
}
getData(key: string): angular.IHttpPromise<IGetDataResult> {
return this.$http({
method: 'POST',
data: {
key: key
},
url: '/WebService/GetData'
});
}
}
function MyServiceFactory($rootElement) : MyService {
const inj = $rootElement.injector();
return inj.instantiate(MyService);
}
app.factory('myService', ['$rootElement', $rootElement => MyServiceFactory($rootElement)]);
一些解释：
$inject。该数组中元素的顺序必须与构造函数中参数的顺序相对应。$rootElement。我发现，如果我想使用$location，必须使用实例化的注射器$rootElement。$http调用中使用了强类型的返回值。由于明显的原因，这很有帮助。$rootElement。没有angular.d.ts包含该injector()函数的匹配类型。还有一件事，打字稿适用于该controllerAs方法。这意味着您不需要注入$scope到控制器中，并且在html中，必须controllerAs在每个作用域表达式之前添加控制器别名（值）。这样，您就可以将所有范围变量和函数作为成员放在控制器上。
有时，$scope如果您想使用$watch或$on，则确实需要注入，但是关于this闭包，有一些陷阱，但这是另一篇文章的主题。
一个陷阱ui-grid是，如果您为gridoptions.data成员使用字符串值，则它还必须包含控制器别名前缀。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句