讓 AngularJS 中的依賴可被注入到 Angular

當(dāng)運(yùn)行一個(gè)混合式應(yīng)用時(shí)，可能會(huì)遇到這種情況：你需要把某些 AngularJS 的依賴注入到 Angular 代碼中。 這可能是因?yàn)槟承I(yè)務(wù)邏輯仍然在 AngularJS 服務(wù)中，或者需要某些 AngularJS 的內(nèi)置服務(wù)，比如 ?$location? 或 ?$timeout?。

在這些情況下，把一個(gè) AngularJS 提供者升級(jí)到Angular 也是有可能的。這就讓它將來有可能被注入到 Angular 代碼中的某些地方。 比如，你可能在 AngularJS 中有一個(gè)名叫 ?HeroesService ?的服務(wù)：

import { Hero } from '../hero';

export class HeroesService {
  get() {
    return [
      new Hero(1, 'Windstorm'),
      new Hero(2, 'Spiderman')
    ];
  }
}

你可以用 Angular 的工廠提供者升級(jí)該服務(wù)， 它從 AngularJS 的 ?$injector? 請(qǐng)求服務(wù)。

很多開發(fā)者都喜歡在一個(gè)獨(dú)立的 ?ajs-upgraded-providers.ts? 中聲明這個(gè)工廠提供者，以便把它們都放在一起，這樣便于引用、創(chuàng)建新的以及在升級(jí)完畢時(shí)刪除它們。

同時(shí)，建議導(dǎo)出 ?heroesServiceFactory ?函數(shù)，以便 AOT 編譯器可以拿到它們。

注意：這個(gè)工廠中的字符串 'heroes' 指向的是 AngularJS 的 ?HeroesService?。 AngularJS 應(yīng)用中通常使用服務(wù)名作為令牌，比如 'heroes'，并為其追加 'Service' 后綴來創(chuàng)建其類名。

import { HeroesService } from './heroes.service';

export function heroesServiceFactory(i: any) {
  return i.get('heroes');
}

export const heroesServiceProvider = {
  provide: HeroesService,
  useFactory: heroesServiceFactory,
  deps: ['$injector']
};

然后，你就可以把這個(gè)服務(wù)添加到 ?@NgModule? 中來把它暴露給 Angular：

import { heroesServiceProvider } from './ajs-upgraded-providers';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ],
  providers: [
    heroesServiceProvider
  ],
/* . . . */
})
export class AppModule implements DoBootstrap {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
  }
}

然后在組件的構(gòu)造函數(shù)中使用該服務(wù)的類名作為類型注解注入到組件中，從而在組件中使用它：

import { Component } from '@angular/core';
import { HeroesService } from './heroes.service';
import { Hero } from '../hero';

@Component({
  selector: 'hero-detail',
  template: `
    
{{hero.id}}: {{hero.name}}
  `
})
export class HeroDetailComponent {
  hero: Hero;
  constructor(heroes: HeroesService) {
    this.hero = heroes.get()[0];
  }
}

在這個(gè)例子中，你升級(jí)了服務(wù)類。當(dāng)注入它時(shí)，你可以使用 TypeScript 類型注解來獲得這些額外的好處。 它沒有影響該依賴的處理過程，同時(shí)還得到了啟用靜態(tài)類型檢查的好處。 任何 AngularJS 中的服務(wù)、工廠和提供者都能被升級(jí) —— 盡管這不是必須的。

讓 Angular 的依賴能被注入到 AngularJS 中

除了能升級(jí) AngularJS 依賴之外，你還能降級(jí)Angular 的依賴，以便在 AngularJS 中使用它們。 當(dāng)你已經(jīng)開始把服務(wù)移植到 Angular 或在 Angular 中創(chuàng)建新服務(wù)，但同時(shí)還有一些用 AngularJS 寫成的組件時(shí)，這會(huì)非常有用。

例如，你可能有一個(gè) Angular 的 ?Heroes ?服務(wù)：

import { Injectable } from '@angular/core';
import { Hero } from '../hero';

@Injectable()
export class Heroes {
  get() {
    return [
      new Hero(1, 'Windstorm'),
      new Hero(2, 'Spiderman')
    ];
  }
}

仿照 Angular 組件，把該提供者加入 ?NgModule ?的 ?providers ?列表中，以注冊(cè)它。

import { Heroes } from './heroes';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ],
  providers: [ Heroes ]
})
export class AppModule implements DoBootstrap {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
  }
}

現(xiàn)在，用 ?downgradeInjectable()? 來把 Angular 的 ?Heroes ?包裝成AngularJS 的工廠函數(shù)，并把這個(gè)工廠注冊(cè)進(jìn) AngularJS 的模塊中。 依賴在 AngularJS 中的名字你可以自己定：

import { Heroes } from './heroes';
/* . . . */
import { downgradeInjectable } from '@angular/upgrade/static';

angular.module('heroApp', [])
  .factory('heroes', downgradeInjectable(Heroes))
  .component('heroDetail', heroDetailComponent);

此后，該服務(wù)就能被注入到 AngularJS 代碼中的任何地方了：

export const heroDetailComponent = {
  template: `
    
{{$ctrl.hero.id}}: {{$ctrl.hero.name}}
  `,
  controller: ['heroes', function(heroes: Heroes) {
    this.hero = heroes.get()[0];
  }]
};

惰性加載 AngularJS

在構(gòu)建應(yīng)用時(shí)，你需要確保只在必要的時(shí)候才加載所需的資源，無論是加載靜態(tài)資產(chǎn)（Asset）還是代碼。要確保任何事都盡量推遲到必要時(shí)才去做，以便讓應(yīng)用更高效的運(yùn)行。當(dāng)要在同一個(gè)應(yīng)用中運(yùn)行不同的框架時(shí)，更是如此。

惰性加載是一項(xiàng)技術(shù)，它會(huì)推遲到使用時(shí)才加載所需靜態(tài)資產(chǎn)和代碼資源。這可以減少啟動(dòng)時(shí)間、提高效率，特別是要在同一個(gè)應(yīng)用中運(yùn)行不同的框架時(shí)。

當(dāng)你采用混合式應(yīng)用的方式將大型應(yīng)用從 AngularJS 遷移到 Angular 時(shí)，你首先要遷移一些最常用的特性，并且只在必要的時(shí)候才使用那些不太常用的特性。這樣做有助于確保應(yīng)用程序在遷移過程中仍然能為用戶提供無縫的體驗(yàn)。

在大多數(shù)需要同時(shí)用 Angular 和 AngularJS 渲染應(yīng)用的環(huán)境中，這兩個(gè)框架都會(huì)包含在發(fā)送給客戶端的初始發(fā)布包中。這會(huì)導(dǎo)致發(fā)布包的體積增大、性能降低。

當(dāng)用戶停留在由 Angular 渲染的頁(yè)面上時(shí)，應(yīng)用的整體性能也會(huì)受到影響。這是因?yàn)?nbsp;AngularJS 的框架和應(yīng)用仍然被加載并運(yùn)行了 —— 即使它們從未被訪問過。

你可以采取一些措施來緩解這些包的大小和性能問題。通過把 AngularJS 應(yīng)用程序分離到一個(gè)單獨(dú)的發(fā)布包中，你就可以利用惰性加載技術(shù)來只在必要的時(shí)候才加載、引導(dǎo)和渲染這個(gè) AngularJS 應(yīng)用。這種策略減少了你的初始發(fā)布包大小，推遲了同時(shí)加載兩個(gè)框架的潛在影響 —— 直到絕對(duì)必要時(shí)才加載，以便讓你的應(yīng)用盡可能高效地運(yùn)行。

下面的步驟介紹了應(yīng)該如何去做：

• 為 AngularJS 發(fā)布包設(shè)置一個(gè)回調(diào)函數(shù)。
• 創(chuàng)建一個(gè)服務(wù)，以便惰性加載并引導(dǎo)你的 AngularJS 應(yīng)用。
• 為 AngularJS 內(nèi)容創(chuàng)建一個(gè)可路由的組件
• 為 AngularJS 特有的 URL 創(chuàng)建自定義的 ?matcher ?函數(shù)，并為 AngularJS 的各個(gè)路由配上帶有自定義匹配器的 Angular 路由器。

為惰性加載 AngularJS 創(chuàng)建一個(gè)服務(wù)

在 Angular 的版本 8 中，惰性加載代碼只需使用動(dòng)態(tài)導(dǎo)入語(yǔ)法 ?import('...')? 即可。在這個(gè)應(yīng)用中，你創(chuàng)建了一個(gè)新服務(wù)，它使用動(dòng)態(tài)導(dǎo)入技術(shù)來惰性加載 AngularJS。

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

@Injectable({
  providedIn: 'root'
})
export class LazyLoaderService {
  private app: angular.auto.IInjectorService | undefined;

  load(el: HTMLElement): void {
    import('./angularjs-app').then(app => {
      try {
        this.app = app.bootstrap(el);
      } catch (e) {
        console.error(e);
      }
    });
  }

  destroy() {
    if (this.app) {
      this.app.get('$rootScope').$destroy();
    }
  }
}

該服務(wù)使用 ?import()? 方法惰性加載打包好的 AngularJS 應(yīng)用。這會(huì)減少應(yīng)用初始包的大小，因?yàn)槟闵形醇虞d用戶目前不需要的代碼。你還要提供一種方法，在加載完畢后手動(dòng)啟動(dòng)它。AngularJS 提供了一種使用 angular.bootstrap() 方法并傳入一個(gè) HTML 元素來手動(dòng)引導(dǎo)應(yīng)用的方法。你的 AngularJS 應(yīng)用也應(yīng)該公開一個(gè)用來引導(dǎo) AngularJS 應(yīng)用的 ?bootstrap ?方法。

要確保 AngularJS 應(yīng)用中的任何清理工作都觸發(fā)過（比如移除全局監(jiān)聽器），你還可以實(shí)現(xiàn)一個(gè)方法來調(diào)用 ?$rootScope.destroy()? 方法。

import * as angular from 'angular';
import 'angular-route';

const appModule = angular.module('myApp', [
  'ngRoute'
])
.config(['$routeProvider', '$locationProvider',
  function config($routeProvider: angular.route.IRouteProvider,
                  $locationProvider: angular.ILocationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider.
      when('/users', {
        template: `
          

            Users Page
          
        `
      }).
      otherwise({
        template: ''
      });
  }]
);

export function bootstrap(el: HTMLElement) {
  return angular.bootstrap(el,  [appModule.name]);
}

你的 AngularJS 應(yīng)用只配置了渲染內(nèi)容所需的那部分路由。而 Angular 路由器會(huì)處理應(yīng)用中其余的路由。你的 Angular 應(yīng)用中會(huì)調(diào)用公開的 ?bootstrap ?方法，讓它在加載完發(fā)布包之后引導(dǎo) AngularJS 應(yīng)用。

注意：當(dāng) AngularJS 加載并引導(dǎo)完畢后，監(jiān)聽器（比如路由配置中的那些監(jiān)聽器）會(huì)繼續(xù)監(jiān)聽路由的變化。為了確保當(dāng) AngularJS 尚未顯示時(shí)先關(guān)閉監(jiān)聽器，請(qǐng)?jiān)?nbsp;$routeProvider 中配置一個(gè)渲染空模板 ?otherwise ?選項(xiàng)。這里假設(shè) Angular 將處理所有其它路由。

創(chuàng)建一個(gè)用來渲染 AngularJS 內(nèi)容的組件

在 Angular 應(yīng)用中，你需要一個(gè)組件作為 AngularJS 內(nèi)容的占位符。該組件使用你創(chuàng)建的服務(wù)，并在組件初始化完成后加載并引導(dǎo)你的 AngularJS 應(yīng)用。

import { Component, OnInit, OnDestroy, ElementRef } from '@angular/core';
import { LazyLoaderService } from '../lazy-loader.service';

@Component({
  selector: 'app-angular-js',
  template: '
'
})
export class AngularJSComponent implements OnInit, OnDestroy {
  constructor(
    private lazyLoader: LazyLoaderService,
    private elRef: ElementRef
  ) {}

  ngOnInit() {
    this.lazyLoader.load(this.elRef.nativeElement);
  }


  ngOnDestroy() {
    this.lazyLoader.destroy();
  }
}

當(dāng) Angular 的路由器匹配到使用 AngularJS 的路由時(shí)，會(huì)渲染 AngularJSComponent，并在 AngularJS 的 ng-view 指令中渲染內(nèi)容。當(dāng)用戶導(dǎo)航離開本路由時(shí)，$rootScope 會(huì)在 AngularJS 應(yīng)用中被銷毀。

為那些 AngularJS 路由配置自定義路由匹配器

為了配置 Angular 的路由器，你必須為 AngularJS 的 URL 定義路由。要匹配這些 URL，你需要添加一個(gè)使用 ?matcher ?屬性的路由配置。這個(gè) ?matcher ?允許你使用自定義模式來匹配這些 URL 路徑。Angular 的路由器會(huì)首先嘗試匹配更具體的路由，比如靜態(tài)路由和可變路由。當(dāng)它找不到匹配項(xiàng)時(shí)，就會(huì)求助于路由配置中的自定義匹配器。如果自定義匹配器與某個(gè)路由不匹配，它就會(huì)轉(zhuǎn)到用于 "捕獲所有"（catch-all）的路由，比如 404 頁(yè)面。

下面的例子給 AngularJS 路由定義了一個(gè)自定義匹配器函數(shù)。

export function isAngularJSUrl(url: UrlSegment[]) {
  return url.length > 0 && url[0].path.startsWith('users') ? ({consumed: url}) : null;
}

下列代碼往你的路由配置中添加了一個(gè)路由對(duì)象，其 ?matcher ?屬性是這個(gè)自定義匹配器，而 ?component ?屬性為 ?AngularJSComponent?。

import { NgModule } from '@angular/core';
import { Routes, RouterModule, UrlSegment } from '@angular/router';
import { AngularJSComponent } from './angular-js/angular-js.component';
import { HomeComponent } from './home/home.component';
import { App404Component } from './app404/app404.component';

// Match any URL that starts with `users`
export function isAngularJSUrl(url: UrlSegment[]) {
  return url.length > 0 && url[0].path.startsWith('users') ? ({consumed: url}) : null;
}

export const routes: Routes = [
  // Routes rendered by Angular
  { path: '', component: HomeComponent },

  // AngularJS routes
  { matcher: isAngularJSUrl, component: AngularJSComponent },

  // Catch-all route
  { path: '**', component: App404Component }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

當(dāng)你的應(yīng)用匹配上需要 AngularJS 的路由時(shí)，AngularJS 應(yīng)用就會(huì)被加載并引導(dǎo)。AngularJS 路由會(huì)匹配必要的 URL 以渲染它們的內(nèi)容，而接下來你的應(yīng)用就會(huì)同時(shí)運(yùn)行 AngularJS 和 Angular 框架。

使用統(tǒng)一的 Angular 位置服務(wù)（Location）

在 AngularJS 中，$location 服務(wù)會(huì)處理所有路由配置和導(dǎo)航工作，并對(duì)各個(gè) URL 進(jìn)行編碼和解碼、重定向、以及與瀏覽器 API 交互。Angular 在所有這些任務(wù)中都使用了自己的底層服務(wù) ?Location?。

當(dāng)你從 AngularJS 遷移到 Angular 時(shí)，你會(huì)希望把盡可能多的責(zé)任移交給 Angular，以便利用新的 API。為了幫你完成這種轉(zhuǎn)換，Angular 提供了 ?LocationUpgradeModule?。該模塊支持統(tǒng)一位置服務(wù)，可以把 AngularJS 中 ?$location? 服務(wù)的職責(zé)轉(zhuǎn)給 Angular 的 ?Location ?服務(wù)。

要使用 ?LocationUpgradeModule?，就會(huì)從 ?@angular/common/upgrade? 中導(dǎo)入此符號(hào)，并使用靜態(tài)方法 ?LocationUpgradeModule.config()? 把它添加到你的 ?AppModule ?導(dǎo)入表（?imports?）中。

// Other imports ...
import { LocationUpgradeModule } from '@angular/common/upgrade';

@NgModule({
  imports: [
    // Other NgModule imports...
    LocationUpgradeModule.config()
  ]
})
export class AppModule {}

?LocationUpgradeModule.config()? 方法接受一個(gè)配置對(duì)象，該對(duì)象的 ?useHash ?為 ?LocationStrategy?，?hashPrefix ?為 URL 前綴。

?useHash ?屬性默認(rèn)為 ?false?，而 ?hashPrefix ?默認(rèn)為空 ?string?。傳遞配置對(duì)象可以覆蓋默認(rèn)值。

LocationUpgradeModule.config({
  useHash: true,
  hashPrefix: '!'
})

這會(huì)為 AngularJS 中的 ?$location? 提供者注冊(cè)一個(gè)替代品。一旦注冊(cè)成功，導(dǎo)航過程中所有由 AngularJS 觸發(fā)的導(dǎo)航、路由廣播消息以及任何必需的變更檢測(cè)周期都會(huì)改由 Angular 進(jìn)行處理。這樣，你就可以通過這個(gè)唯一的途徑在此混合應(yīng)用的兩個(gè)框架間進(jìn)行導(dǎo)航了。

要想在 AngularJS 中使用 ?$location? 服務(wù)作為提供者，你需要使用一個(gè)工廠提供者來降級(jí) ?$locationShim?。

// Other imports ...
import { $locationShim } from '@angular/common/upgrade';
import { downgradeInjectable } from '@angular/upgrade/static';

angular.module('myHybridApp', [...])
  .factory('$location', downgradeInjectable($locationShim));

一旦引入了 Angular 路由器，你只要使用 Angular 路由器就可以通過統(tǒng)一位置服務(wù)來觸發(fā)導(dǎo)航了，同時(shí)，你仍然可以通過 AngularJS 和 Angular 進(jìn)行導(dǎo)航。

PhoneCat 升級(jí)教程

在本節(jié)和下節(jié)中，你將看一個(gè)完整的例子，它使用 ?upgrade ?模塊準(zhǔn)備和升級(jí)了一個(gè)應(yīng)用程序。 該應(yīng)用就是來自原 AngularJS 教程中的Angular PhoneCat。 那是我們很多人當(dāng)初開始 Angular 探險(xiǎn)之旅的地方。 現(xiàn)在，你會(huì)看到如何把該應(yīng)用帶入 Angular 的美麗新世界。

這期間，你將學(xué)到如何在實(shí)踐中應(yīng)用準(zhǔn)備指南中列出的那些重點(diǎn)步驟： 你先讓該應(yīng)用向 Angular 看齊，然后為它引入 SystemJS 模塊加載器和 TypeScript。

本教程基于 ?angular-phonecat? 教程的 1.5.x 版本，該教程保存在代碼倉(cāng)庫(kù)的 1.5-snapshot 分支中。接下來，克隆 angular-phonecat 代碼倉(cāng)庫(kù)，check out ?1.5-snapshot? 分支并應(yīng)用這些步驟。

在項(xiàng)目結(jié)構(gòu)方面，工作的起點(diǎn)是這樣的：

這確實(shí)是一個(gè)很好地起點(diǎn)。這些代碼使用了 AngularJS 1.5 的組件 API，并遵循了 AngularJS 風(fēng)格指南進(jìn)行組織， 在成功升級(jí)之前，這是一個(gè)很重要的準(zhǔn)備步驟。

• 每個(gè)組件、服務(wù)和過濾器都在它自己的源文件中 —— 就像單一規(guī)則所要求的。
• ?core?、?phone-detail? 和 ?phone-list? 模塊都在它們自己的子目錄中。那些子目錄除了包含 HTML 模板之外，還包含 JavaScript 代碼，它們共同完成一個(gè)特性。 這是按特性分目錄的結(jié)構(gòu) 和模塊化規(guī)則所要求的。
• 單元測(cè)試都和應(yīng)用代碼在一起，它們很容易找到。就像規(guī)則 組織測(cè)試文件中要求的那樣。

切換到 TypeScript

因?yàn)槟銓⑹褂?nbsp;TypeScript 編寫 Angular 的代碼，所以在開始升級(jí)之前，先要把 TypeScript 的編譯器設(shè)置好。

你還將開始逐步淘汰 Bower 包管理器，換成 NPM。后面你將使用 NPM 來安裝新的依賴包，并最終從項(xiàng)目中移除 Bower。

先把 TypeScript 包安裝到項(xiàng)目中。

npm i typescript --save-dev

還要為那些沒有自帶類型信息的庫(kù)（比如 AngularJS、AngularJS Material 和 Jasmine）安裝類型定義文件。

對(duì)于 PhoneCat 應(yīng)用，我們可以運(yùn)行下列命令來安裝必要的類型定義文件：

npm install @types/jasmine @types/angular @types/angular-animate @types/angular-aria @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev

如果你正在使用 AngularJS Material，你可以通過下列命令安裝其類型定義：

npm install @types/angular-material --save-dev

你還應(yīng)該要往項(xiàng)目目錄下添加一個(gè) ?tsconfig.json? 文件，?tsconfig.json? 文件會(huì)告訴 TypeScript 編譯器如何把 TypeScript 文件轉(zhuǎn)成 ES5 代碼，并打包進(jìn) CommonJS 模塊中。

最后，你應(yīng)該把下列 npm 腳本添加到 ?package.json? 中，用于把 TypeScript 文件編譯成 JavaScript （根據(jù) ?tsconfig.json? 的配置）：

"scripts": {
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  ...

現(xiàn)在，從命令行中用監(jiān)視模式啟動(dòng) TypeScript 編譯器：

npm run tsc:w

讓這個(gè)進(jìn)程一直在后臺(tái)運(yùn)行，監(jiān)聽任何變化并自動(dòng)重新編譯。

接下來，把 JavaScript 文件轉(zhuǎn)換成 TypeScript 文件。 由于 TypeScript 是 ECMAScript 2015 的一個(gè)超集，而 ES2015 又是 ECMAScript 5 的超集，所以你可以簡(jiǎn)單的把文件的擴(kuò)展名從 ?.js? 換成 ?.ts?， 它們還是會(huì)像以前一樣工作。由于 TypeScript 編譯器仍在運(yùn)行，它會(huì)為每一個(gè) ?.ts? 文件生成對(duì)應(yīng)的 ?.js? 文件，而真正運(yùn)行的是編譯后的 ?.js? 文件。 如果你用 ?npm start? 開啟了本項(xiàng)目的 HTTP 服務(wù)器，你會(huì)在瀏覽器中看到一個(gè)功能完好的應(yīng)用。

有了 TypeScript，你就可以從它的一些特性中獲益了。此語(yǔ)言可以為 AngularJS 應(yīng)用提供很多價(jià)值。

首先，TypeScript 是一個(gè) ES2015 的超集。任何以前用 ES5 寫的程序(就像 PhoneCat 范例)都可以開始通過 TypeScript 納入那些添加到 ES2015 中的新特性。 這包括 ?let?、?const?、箭頭函數(shù)、函數(shù)默認(rèn)參數(shù)以及解構(gòu)(destructure)賦值。

你能做的另一件事就是把類型安全添加到代碼中。這實(shí)際上已經(jīng)部分完成了，因?yàn)槟阋呀?jīng)安裝了 AngularJS 的類型定義。 TypeScript 會(huì)幫你檢查是否正確調(diào)用了 AngularJS 的 API，—— 比如往 Angular 模塊中注冊(cè)組件。

你還能開始把類型注解添加到自己的代碼中，來從 TypeScript 的類型系統(tǒng)中獲得更多幫助。 比如，你可以給 ?checkmark ?過濾器加上注解，表明它期待一個(gè) ?boolean ?類型的參數(shù)。 這可以更清楚的表明此過濾器打算做什么

angular.
  module('core').
  filter('checkmark', () => {
    return (input: boolean) => input ? '\u2713' : '\u2718';
  });

在 ?Phone ?服務(wù)中，你可以明確的把 ?$resource?&nb
名稱欄目：創(chuàng)新互聯(lián)Angular教程：Angular升級(jí)說明
網(wǎng)站網(wǎng)址：http://www.5511xx.com/article/djgeojo.html