Я стараюсь не подыгрывать повествованию о «войне фреймворков», которое используется в некоторых статьях по программированию. Однако я признаю, что довольно критично отношусь к AngularJS (также известному как Angular 1). Синтаксис и структура часто казались мне неуклюжими, а сообщения об ошибках не доставляли удовольствия! С появлением React я также предпочел архитектуру на основе компонентов, которая стала более популярной. Скалистая миграция без обратной совместимости на Angular 2 меня сбила с толку, и я перестал обращать внимание на Angular.
Недавно я услышал больше разговоров об Angular 5, и мне захотелось попробовать его и сравнить свой опыт с моим опытом работы с Vue и React, поскольку я использую их на очень регулярной основе.
Начиная
Я начал с учебника на веб-сайте Angular, он показался мне очень простым и концептуально похожим на другие фреймворки. TypeScript, пожалуй, самое большое отличие от Angular, и мне это очень понравилось! Я чувствовал себя комфортно при создании проекта после того, как ознакомился с их образцом, тем более что он такой большой! Мне потребовалось несколько часов, чтобы пройти весь этот путь!
Тема супергероя была довольно милой, и мне понравилось, как она включала маршрутизацию, запросы API, интерфейс командной строки и сервисы. Введение в фреймворк было очень тщательным!
Финальный проект
На прошлой неделе я создал API в Go, который отображает ресурсы кодирования, поэтому на этой неделе я хотел создать интерфейс для этого приложения! На данный момент я работаю в значительной степени исключительно в стиле микросервисных приложений: я бы предпочел создать внешний и внутренний интерфейс отдельно. Это приложение не стало исключением — проект этой недели был полностью статичным и размещен на страницах GitHub.
Я начал с компонента для моих ресурсов кодирования, схемы TypeScript для ресурсов, а затем службы для подключения к API. Я сохранил эту архитектуру повсюду. Поскольку это было очень простое приложение, я не чувствовал необходимости иметь подкомпоненты или что-то в этом роде на данный момент.
Служба выглядела так:
@Injectable() export class ResourcesService { private resourcesUrl = 'https://helpful-coding-resources.herokuapp.com/resources'; constructor ( private http: HttpClient, ) {} getResources (): Observable<Resource[]>{ return this.http.get<Resource[]>(this.resourcesUrl) .pipe( tap(resources => console.log('done! 😀')); ) }
Мне показалось интересным, что у Angular есть собственный сервис AJAX, а не вы используете свой любимый. Обычно я использую Axios, и было бы неплохо использовать его, но было бы неплохо включить его в библиотеку.
Примечание: я не привык использовать точки с запятой в JavaScript, но я использовал их для этого проекта, в основном потому, что VSCode автоматически вставлял их в файлы TypeScript, и мне было лень менять настройку!
Затем я работал над самим компонентом, который в итоге получился таким:
export class ResourcesComponent implements OnInit { resources: Resource[]; initialResources: Resource[]; showSearch: boolean; constructor(private resourceService: ResourcesService) { } ngOnInit() { this.getResources(); } getResources(): void { this.resourceService.getResources() .subscribe(resources => { this.resources = resources; this.initialResources = resources; }); } toggleSearch(): void { this.showSearch = !this.showSearch; } search(val): void { this.resources = this.initialResources.filter(resource => { return resource.Tags.some(tag => { return tag.toLowerCase().startsWith(val.toLowerCase()); }); }); } }
Мне также понравился язык шаблонов, очень похожий на Vue. Я также нахожу интересным, как в Angular все еще существует разделение задач для кода HTML и JS, особенно по сравнению с архитектурой React.
<div *ngIf="resources"> <div class="search-div"> <i class="material-icons" (click)="toggleSearch()" > search </i> <input #searchInput [ngClass]="{'shown': showSearch}" class="search-box" (keyup)="search(searchInput.value)" type="text" placeholder="Filter Resources" /> </div> <div class="list"> <div class="resource" *ngFor="let resource of resources"> <a href="{{ resource.Link }}"><h3>{{ resource.Name }} <span class="author">{{ resource.Author }}</span></h3></a> <p>{{ resource.Description }}</p> </div> </div> </div> <div *ngIf="!resources"> <div class="loader"></div> </div>
У меня было два массива: один с текущими отображаемыми ресурсами, а другой с теми, которые были получены из API. Это позволило мне легко реализовать фильтрацию, которую я реализовал на основе тегов. У меня также есть переключатель, который скрывает панель поиска, когда она не используется. Наконец, у меня есть метод поиска, который фильтрует теги, прикрепленные к ресурсам.
Показать все статьи
Искомые статьи
Я также довольно легко добавил анимацию. Была документация по их реализации непосредственно в Angular, но вместо этого я решил сделать их в CSS. Я больше привык к этому, и он также оптимизирован.
Развертывание
Я нашел пакет npm
, который развертывает приложения Angular 5 на страницах GitHub, которые я использую для всех своих статических хостингов. Это было относительно просто, и я легко развернул страницу.
Следующие шаги
Мне понравилось видеть, как далеко продвинулась экосистема Angular со времен AngularJS! Мне нравится архитектура компонентов, и синтаксис, кажется, улучшился. Я думал, что все было хорошо интегрировано, и интерфейс командной строки был великолепен.
При этом я не вижу личной необходимости или использования для Angular 5. Пакет огромен, и мне было намного сложнее найти поддержку по проблемам, чем для React или Vue (вероятно, из-за быстрого управления версиями) . Если бы мне нужна была статическая типизация, я бы, вероятно, использовал поток в React или интегрировал TypeScript в Vue. Я думаю, что Angular пытается стать основой для корпоративных приложений, которые ценят стабильность. Для этого очень важно иметь имя Google, и большой домен, который он охватывает, вероятно, также помогает. Я по-прежнему предпочитаю структурирование кода React и Vue — я предпочитаю повышенную гибкость, которую они предлагают.
Короче говоря, мне нравилось работать с Angular 5, и я без колебаний создал бы еще одно приложение с его использованием, если бы меня об этом попросили, но я бы не стал использовать его сам по сравнению с другими фреймворками. Vue настолько прост в освоении, его экосистема настолько стабильна, а архитектура React изменила отрасль. Мне ничего не нравилось в Angular 5, просто он меня не так привлекал, как другие инструменты.
Часть моей серии Изучение нового