Angular 5的AngularJS提供程序升级

Question

我正在使用AngularJS，现在我想转向angular4。我正在阅读，现在我需要使用课程但不确定如何。

首先，我想将这个简单的工厂转换为类，但我不知道从哪里开始

angular.module('web-api-service', [])


.provider('webApi', [ function() {
    var nameUrlMap = {};

    var getUrl = function(name) {
        var ret = nameUrlMap[name];
        if (!ret) {
            throw new Error("Unable to find API URL for API " + name);
        }
        return marketServiceBase + ret;
    };

    this.registerApiUrl = function(name, url) {
        nameUrlMap[name] = url;
    };

    this.registerApiUrlCore = function(name, url) {
        nameUrlMap[name] = nameUrlMap[name] || url;
    };

    this.$get = function() {

        return {
            getUrl : getUrl
        };
    };
}]);

有人可以给我一个如何开始的提示吗？

Answer 1

首先，Angular位于typescript，其中包含类。其次，角度为services只剩factory。您的代码将像服务一样：

import { Injectable } from '@angular/core';

@Injectable()
export class HeroService {

  constructor() { }
   nameUrlMap = {};

    getUrl(name) {
        ret = this.nameUrlMap[name];
        if (!ret) {
            throw new Error("Unable to find API URL for API " + name);
        }
        return marketServiceBase + ret;
    };

    registerApiUrl(name, url) {
        this.nameUrlMap[name] = url;
    };

    registerApiUrlCore(name, url) {
        this.nameUrlMap[name] = this.nameUrlMap[name] || url;
    };

}

添加评论以获得更多帮助。

Answer 2

Typescript是angular 4最常用的语言，因此我将以打字稿的形式向您展示示例。

您需要从创建所需名称的类开始。我在下面的代码中评论过。你可以读一读。有关详情，请转至angular。

＆＃13;

＆＃13;

rstudio

＆＃13;

＆＃13;

＆＃13;

Answer 3

我也建议你使用棱角分明的CLI。

并完成由角度团队提供的tutorial。

因此，您可以使用简单的指令创建新服务：ng new service services / myService，它将在您的项目中包含新服务，随时可以使用

使用angular 4，你需要开始使用 TypeScript ，这就是为什么Angular 1.x被称为Angular JS ，（JavaScript）。

我正在阅读，现在我需要使用课程但不确定如何。 - ＆gt;在TypeScript中，所有指令和组件都是带有装饰器的类。

将angularjs应用程序迁移到angular2-4-5并不容易，所以你应该从开始学习它

Answer 4

创建一个类WebApi，其构造函数接受参数url。

@Injectable
export class WebApi {
    constructor(url: string) {
        this.url = url;
    }

    // the other relevant code of your provider goes here.
}

在app.module文件中，您需要使用useFactory将其添加为提供商。

providers: [
    ...
    { provide: WebApi, useFactory: () => new WebApi(API_URL) }
    ...
]

Answer 5

首先你需要在这样的app文件夹中创建typescript文件

例如我创建一个文件名gen-function.module.ts然后添加自己的类。这是我的例子

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import { Injectable } from '@angular/core';

export class GenFunctionProvider{
    getLink(msg : any)
    {

      return 'your URl';
    }
}

别忘了在你的app.module.ts上添加你的提供者

import { GenFunctionProvider } from'./gen-function.module';

并像这样添加@ngModule

@NgModule({
      declarations: [
        ....
      ],
      imports: [
        ...
      ],
      entryComponents: [....],
      providers: [GenFunctionProvider],
      bootstrap: [....]
    })