Angular 5 разрабатывает переводчик Youdao

Стремитесь к первому колесу Angular 5 в Китае

Гитхаб:GitHub.com/оранжевый XC/UD…
Link: incompetent-plantation.surge.sh/

В последнее время было построено больше колес, которые предназначены для того, чтобы дать новичкам справочный пример.Согласно текущим отзывам, если стек технологий не соответствует, мало кто нажмет, чтобы прочитать его.В будущем вы можете рассмотреть возможность изменения типа сообщения в блоге.

Я написал один раньшеAngular2 от среды создания до разработки, получил Q4 2016 на segmentfaulttop writerЧетвертое место в списке статей теперь занимает angular 5

Общее впечатление у всех такое, что большие скачки версий принесут с собой критические изменения, потому что angular с 1.x на 2.x — это просто два фреймворка, нет, просто два фреймворка.

Angular 1.x называется angular.js, а после angular 2.x он называется angular, и две версии размещены в двух репозиториях github.

Что меня еще больше удивило, так это то, что звезда angular.js близка к двойнику angular, а сообщество более процветающее.В этой статье изо всех сил пытаются найти компоненты, которые можно использовать с angular 5, потому что фреймворк только что был обновлен. , а соответствующие компоненты не обновлялись.Расскажу позже.Небольшой совет всем.

От angular 2 до 4 и до 5 количество компонентов уменьшается экспоненциально, но, к счастью, его можно легко продлить назад.Если вы знакомы с angular 2, этот проект можно полностью понять.

На самом деле написать колесо может любой, кто читает документ, я стараюсь рассказать о как можно большем количестве подводных камней, чтобы разработчики могли их избежать.

Засучи рукава.

Создайте среду разработки

npm install -g @angular/cli@1.5.0

Тут прямо укажите версию 1.5.0

ng new PROJECT-NAME
cd PROJECT-NAME

На данный момент зависимость установлена, выполнитеng -v, вы можете увидеть следующее

ng serve

Порт по умолчанию 4200, вы можете увидеть страницу инициализации.

Процесс установки может быть долгим, рекомендуется устанавливать yarn локально, при установке зависимостей cli будет автоматически использовать yarn для установки зависимостей, что будет намного быстрее.

В этот момент его можно развивать.

развивать

От публичного интерфейса словаря удао отказались, используемый здесь интерфейс является неофициальным и поддерживает ограниченные функции.

Явно используемая здесь библиотека пользовательского интерфейса:ng-bootstrap, загрузка используетngx-loading

При установке будет предупреждение, что версия зависимостей не совпадает, вот так

Но еле юзабельно.Как уже было сказано ранее, найти подходящую библиотеку компонентов сложно.Вот небольшая хитрость,заходим в поиск googleangular [some component]В основном это компоненты angular 1.x, поэтому, согласно историческому анализу, имена компонентовng- ng2-, в 4 все устали, поэтому просто позвонилиngx-, поиск напрямуюngx-[some component].

почему здесьng-bootstrapвместо выбораngx-bootstrapНу, действительно естьngx-bootstrap,потому чтоng-bootstrapтолько поддержкаbootstrap4, последний поддерживает 3 и 4, во избежание споров о версиях используйте напрямуюng-bootstrap.

Говоря об этом, это далеко не доказательство того, что эту библиотеку может использовать angular 5. Мой стандарт суждения — angular 4. Если angular 4 поддерживается, то 90% поддерживают angular 5, потому что изменения действительно невелики.

маршрутизация

В настоящее время этот проект включает только 4 маршрута.

• /Дома
• /translateпереводить
• /searchнечеткий поиск
• /detail/:wordдетали слова

существуетapp.module.tsОпределите маршрут ниже

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }, {
    path: 'translate',
    component: TranslateComponent
  }, {
    path: 'search',
    component: SearchComponent
  }, {
    path: 'detail/:word',
    component: DetailComponent
  }
]

Вот некоторые проблемы, связанные с переходами маршрутизации.В angular 5 они по-прежнему делятся на переходы по меткам и переходы по js.

• Как написать этикетку

@Directive({ selector: ':not(a)[routerLink]' })
class RouterLink {
  queryParams: {[k: string]: any}
  fragment: string
  queryParamsHandling: QueryParamsHandling
  preserveFragment: boolean
  skipLocationChange: boolean
  replaceUrl: boolean
  set routerLink: any[]|string
  set preserveQueryParams: boolean
  onClick(): boolean
  get urlTree: UrlTree
}

Пример этого проекта:

<li class="nav-item">
  <a class="nav-link" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">主页</a>
</li>
<li class="nav-item">
  <a class="nav-link" routerLink="/translate" routerLinkActive="active">翻译</a>
</li>
<li class="nav-item">
  <a class="nav-link" routerLink="/search" routerLinkActive="active">搜索</a>
</li>

Обратите внимание на яму здесь, перваяliтеги, больше[routerLinkActiveOptions]="{exact: true}", если не добавить, приведет к/При маршрутизации актив не срабатывает.

• нотация js

class Router {
  constructor(rootComponentType: Type<any>|null, urlSerializer: UrlSerializer, rootContexts: ChildrenOutletContexts, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes)
  get events: Observable<Event>
  get routerState: RouterState
  errorHandler: ErrorHandler
  navigated: boolean
  urlHandlingStrategy: UrlHandlingStrategy
  routeReuseStrategy: RouteReuseStrategy
  onSameUrlNavigation: 'reload'|'ignore'
  config: Routes
  initialNavigation(): void
  setUpLocationChangeListener(): void
  get url: string
  resetConfig(config: Routes): void
  ngOnDestroy(): void
  dispose(): void
  createUrlTree(commands: any[], navigationExtras: NavigationExtras = {}): UrlTree
  navigateByUrl(url: string|UrlTree, extras: NavigationExtras = {skipLocationChange: false}): Promise<boolean>
  navigate(commands: any[], extras: NavigationExtras = {skipLocationChange: false}): Promise<boolean>
  serializeUrl(url: UrlTree): string
  parseUrl(url: string): UrlTree
  isActive(url: string|UrlTree, exact: boolean): boolean
}

Пример этого проекта:

gotoDetail ({ entry }) {
  this.router.navigate([`/detail/${entry}`])
}

По сравнению с обзором документа, эти два примера являются самыми простыми в использовании.При необходимости вы можете посмотреть другие методы, которые в основном могут удовлетворить все потребности маршрутизации.

просить

В отличие от vue и react, angular предоставляет интерфейсное решение с полным стеком, включая модуль http, который нужно толькоapp.module.tsимпорт внутри

import { HttpClientModule } from '@angular/common/http'

// ...
imports: [
  HttpClientModule
]
// ...

Синтаксис запроса тоже очень простой, посмотреть код можно на github.

Вот небольшая яма, в реализацииdetailпри маршрутизацииngOnInitТекущие параметры маршрутизации получаются в хуке для запроса, а обновление запроса не запускается при изменении маршрута.Окончательная версия выглядит следующим образом.

код показывает, как показано ниже

ngOnInit () {
  this.route.params.subscribe((params) => {
    this.loading = true

    const apiURL = `https://dict.youdao.com/jsonapi?q=${params['word']}`

    this.http.get(`/?url=${encodeURIComponent(apiURL)}`)
    .subscribe(res => {
      // set component data

      this.loading = false
    })
  })
}

Это было недействительно раньше, потому что это не было написаноthis.route.params.subscribe((params) => {}), поэтому прослушиватель не будет срабатывать каждый раз

здесьsubscribeбудет продолжать следитьthis.route.paramsИзменение.

путь запроса

Как и в случае с базовым URL-адресом axios, мы не хотим писать полный путь для каждого запроса при запросе. Нам нужно настроить глобальный базовый URL-адрес, чтобы сделать путь запроса коротким.

Угловой нужен@Injectable, знакомая концепция - внедрение зависимостей, подробностей много статей, вот решение для этого требования

@Injectable()
export class ExampleInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const url = 'https://proxy-oagpwnbkpe.now.sh'

    req = req.clone({
      url: url + req.url
    })

    return next.handle(req)
  }
}
// ...
providers: [
  AppComponent,
  { provide: HTTP_INTERCEPTORS, useClass: ExampleInterceptor, multi: true }
]
// ...

Этот код решает проблему с baseURL.

запрос на переадресацию

Обратите внимание на предыдущий раздел здесьconst url = 'https://proxy-oagpwnbkpe.now.sh', корневой путь не является правильным путем.

По-прежнему выполняйте слой обработки прокси узла. Междоменные проблемы все еще должны быть решены.

Код службы узла также очень прост, что и используется здесьflyДелайте запросы на стороне узла

код показывает, как показано ниже

const express = require('express')
const fly = require('flyio')
const app = express()

app.use('/', async (req, res) => {
  const data = await fly.get(req.query.url).then(res => res.data)

  res.set('Access-Control-Allow-Origin', '*')

  res.send(data)
})

app.listen(process.env.PORT || 3001)

Суть в том, чтобы вернуть заголовок, установленныйAccess-Control-Allow-Origin: *, чтобы браузер не блокировал запрос.

поток данных

существуетdetailСтраница разделена на подкомпоненты 5. Конечно, компонент «родитель-потомок» — это очень простой односторонний поток данных.

Пример: html родительского компонента выглядит следующим образом

<app-detail-phrs-list-tab [simple]="simple" [ec]="ec"></app-detail-phrs-list-tab>

подкомпонентcomponent.tsследующим образом

export class DetailPhrsListTabComponent {
  @Input() simple
  @Input() ec
}

просто используйте@InputПолучите значение, переданное из родительского компонента.Когда дело доходит до управления глобальным состоянием здесь, это зависит от сложности проекта.

Простое управление глобальным состоянием может создатьglobal.ts, а затем создайте внедрение зависимостей, как показано ниже.

// globals.ts
import { Injectable } from '@angular/core';

@Injectable()
export class Globals {
  role: string = 'test';
}

В компоненте можно вызвать так

// hello.component.ts
import { Component } from '@angular/core';
import { Globals } from './globals';

@Component({
  selector: 'hello',
  template: 'The global role is {{globals.role}}',
  providers: [Globals]
})

export class HelloComponent {
  constructor(private globals: Globals) {}
}

Другой способ — знакомая разработчикам SPA глобальная библиотека управления состоянием, например flex, redux

угловой также обеспечиваетangular-redux, рекомендуется для сложных приложений.

Пакуйте и выходите в интернет

Команды упаковки вокругng build, предоставляет несколько параметров конфигурации, которые здесь описываться не будут.

Развертывание здесь используетsurge

Дружеское напоминание: не размещайте частные проекты на таких публичных сервисах, есть много минусов.

Суммировать

Какой бы ни был фронтенд фреймворк, у него есть свои плюсы, так как проект небольшой, выпустить его здесь нет возможности.rxjsМощность angular-cli установлена ​​по умолчанию.Он очень эффективен для обработки сложного асинхронного потока данных.Я написал много колес.В конце концов, это еще образец, но метание не может остановиться.

Связанная документация

Соответствующие документы для этого обновления angular 5 следующие:

Официальная документация:next.angular.io/docs
Официальный блог:blog.angular.IO/версия-5-0…
Официальный кли:GitHub.com/angular/ang…

Старайтесь как можно чаще смотреть через стену, домашнийangular.cn/Документация еще не обновлена.