Рубрики
Без рубрики

Angularjs vs vuejs – построить трекер стойки в обоих рамостях – часть 1/2

Понимание Angularjs VS Vuejs, построение такого же отслеживания стойки, используя эти две рамки Frontend.

Автор оригинала: Troy Do.

Я полагаю, как Angularjs, и Vuejs являются мощными рамочными рамками, которые резко улучшают производительность и скорость команды DEV-команды, но обеспечивают качество и ремонтопригодность кода.

У каждого есть свои силы и в зависимости от композиции и навыков команды, а также существующей кодовой базы, которую нужно выбрать друг друга.

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

Это теги стойки стойки, которые мы заинтересованы в:

У Angulary и Vue есть CLI для разработки приложений. Мы можем установить их с помощью NPM внутри терминала

  • Установите интерфейс командной строки CLI
# AngularJS
$ npm install -g @angular/cli 

# VueJS
$ npm install -g @vue/cli 
  • Создать проект Boaterplate
# AngularJS
$ ng new angular-stack 

# VueJS
$ vue create vue-stack 
  • Начать живую среду развития проекта
# AngularJS
$ cd angular-stack && ng serve 

# VueJS
$ cd vue-stack && npm run serve 

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

Угловой стек

Приложение Angular-Stack будет включать в себя 4 модуля: Core, Global, Tags и вопросы.

Угловая диаграмма стека
  • Основной модуль: включите все наши услуги (данные для сетей и сортировку для сортировки вопросов)

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

  • Модуль тега: маршрутизация и компонент для просмотра тегов.

  • Модуль вопросительного вопроса: маршрутизация и компонент для представления вопросов.

  • Создайте наши 4 модуля:

$ ng generate module Tags 
$ ng generate module Questions
$ ng generate module Core
$ ng generate module Global

Глобальный модуль

Мы можем объявить наш тег и документ о данных здесь, используя интерфейс

Интерфейс

export interface ITag {
  id: number;
  name: string;
  description: string;
  questionsTotal : number;
}

export interface IQuestion {
  id: number;
  tag: string;
  voteCount: number;
  questionTitle: string;
  questionLink: string;
}

Теги модуль

Внутренний модуль тегов, нам нужно добавить:

  • tags.component.html – выкладывание компонента в HTML

{{ title }}

  • tags.component.css – стайлинг компонент в CSS
.h2 {
  text-align: left;
  color: blue;
}
  • Tags.component.ts – Написать Teamptry Component Logic
# Importing Component and OnInit from Angular Core module
import {Component, OnInit} from '@angular/core';

# Config Component using @Component decorator
@Component({
  selector: 'app-tags',
  templateUrls: './tags.componemt.html',
  styleUrls: './tags.component.css'
});

# Implemnt Component Logic
class TagsComponent implements OnInit {
  
  title: string;         
  
  
  popularTags: ITag[];    
  
 
  ngOnInint(){
    this.title = "Popular AngularJS tags on Stackoverflow "
  }
}
  • Теги-маршрутизация. Module.ts – логика маршрутизации для компонента.
# Importing Angular Core and Router Module
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

# Import our created TagsComponent
import {TagsComponent} from './tags.component';

# Create route "http://localhost:4200/tags" that serve TagsComponent
const routes: Routes = [
  { path: 'tags', component: TagsComponent}
];

# Import 'routes' and export for accessing from root Route
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class TagsRoutingModule { }
  • Tags.modules.ts – Регистрация внутренних компонентов, модулей
# Importing Core and Common Angular Module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

# Importing Created TagsRoutingModule and TagsComponent
import { TagsRoutingModule } from './tags-routing.modules';
import { TagsComponent } from './tags.component';


@NgModule({

  # Register Module for Internal Usage
  imports: [
    CommonModule,
    TagsRoutingModule, 
    CoreModule
  ],
  
  # Declare and Export so TagsComponent is accessbile from outside
  declarations: [TagsComponent],
  exports: [TagsComponent]
})

export class TagsModule { }

  • Создайте список тегов Component Component внутри ваших меток, используя угловую CLI:
$ ng generate component tags/tags-list
  • Добавление бирки-списка Детский компонентный код внутри TS, HTML и CSS-файл

Tags-list.component.html.



Tags Description Questions Count

Tags-list.component.css.

.table {
  text-align: left;
}

Tags-list.component.ts.

## Importing necessary modules from angular core
import { Component, OnInit, Input } from '@angular/core';

## Importing Tag Data Model via ITag Interface
import { ITag } from '../../global/interfaces';

## Config TagsList Component
@Component({
  selector: 'app-tags-list',
  templateUrl: './tags-list.component.html',
  styleUrls: ['./tags-list.component.css']
})

## Writing Logic Code for TagsList Component
export class TagsListComponent implements OnInit {
  ## Create
  private _tags: ITag[] = []

  # Using @Input decorator and set to pass data from parents to child component
  @Input() get tags(): ITag[]{
  return this._tags;
  }

  set tags(value: ITag[]){
  	if (value){
  		this._tags = value;
  	}
  }
  constructor() { }

  ngOnInit() {
  	console.log(this._tags);
  }
}
  • Теперь нам нужно вернуться к нашим tags.component.html и tags.module.ts для загрузки нашего компонента List List:

Tags.component.html.



{{ title }}

Tags.Module.ts.

...
import { TagsListComponent } from './tags-list/tags-list.component';
...

@NgModule({
  ...
  declarations: [TagsComponent, TagsListComponent],
  ...
})

export class TagsModule { }

Последний шаг – добавить маршрут приложений в корню в нашем app.component.html и app.module.ts

app.component.html.

## Display Rendered route here

app.module.ts.

...
import { AppRoutingModule } from './app-routing.module';
...

...
  imports: [
    BrowserModule,
    CoreModule,
    TagsModule,
    QuestionsModule,
    AppRoutingModule
  ],
...

После этого шага, если мы запустим «NG служить» и перейдите к http://localhost: 4200, мы должны видеть нашу таблицу тегов без данных.

Услуги данных

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

Обычно мы пишем наш код DataService внутри CoreModule.

*** data.service.ts ***

// Importing Angular Injectable and HTTPClient
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';


// Importinng RXJS Obserable, map and catchError
import { Observable, of} from 'rxjs';
import { map, catchError } from 'rxjs/operators';

// Importing Tag and Question Data Model from Interfaces
import { ITag, IQuestion } from '../../app/global/interfaces';


// Using @Injectable decorator to create DataService service.
@Injectable ()
export class DataService {

  
  baseUrl: string = 'assets/';
  
  
  stackUrl = 'https://api.stackexchange.com/2.2/tags/'
  site = '/faq?site=stackoverflow';
  
  
  getTags(): Observable{
    let myTags = this.http.get(this.baseUrl + 'angular.json')
      .pipe(
        catchError(this.handleError)
    );
    return myTags
  }

  
  getQuestions(tag: string): Observable{
    return this.http.get(this.stackUrl + tag + this.site)
      .pipe(
        map( data => {
          var items = data['items'];
          var questions: IQuestion[] = [];
          
          
          for (let item of items){
            var question: IQuestion = {
              id: item['question_id'],
              tag: tag,
              voteCount: item['score'],
              questionTitle: item['title'],
              questionLink: item['link']
            };
            questions.push(question);
          }
          return questions;
        }),
        
        
        catchError(this.handleError)
      );
  }

  // Handling Error Method
    private handleError(error: any) {
      console.error('server error:', error);
      if (error.error instanceof Error) {
          const errMessage = error.error.message;
          return Observable.throw(errMessage);
          // Use the following instead if using lite-server
          // return Observable.throw(err.text() || 'backend server error');
      }
      return Observable.throw(error || 'Node.js server error');
    }
}

Без создания данных DataServices теперь мы можем вернуться к нашим «Tags.comPonents.ts» и наши «теги-list.component.html» для загрузки наших тегов данных.

tags.component.ts.

...
import { DataService } from '../core/data.service';
...
...
export class TagsComponent implements OnInit {
  title: string;
  popularTags: ITag[];
  myQuestions = [];
  
  constructor(private dataService: DataService) {}
  ngOnInit(){
    this.title = 'Popular Angular Tags';
  
    
    this.dataService.getTags()
      .subscribe((tags: ITag[]) => this.popularTags = tags);
   }
}

Tags-list.component.html.

    ...
  
    	
        
        	
                {{ tag.name }}
            
        

        
        
            {{ tag.description }}
        	
        
        
        
        	{{ tag.questionsTotal }}
        
    
    ...

Теперь, если мы запустим «NG» снова и посетите «http://localhost: 4200», мы должны иметь возможность увидеть наши данные, загруженные из «Активы/Angular.json».

Вопросы модуль

  • Вопросы Комплектующие * вопросы.component.html.



Questions for Angular Tag {{tag}}

ID Vote Count Question Content
{{question.id}} {{question.voteCount}} {{question.questionTitle}}
View All Angular Tags

* вопросы.component.css.

.table {
  text-align: left;
}

#tag {
  background-color: yellow;
}

вопросы.component.ts.

# Importing Angular Component, Router, ActivatedRoute, Params
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

# Importing IQuestion interface and DataService
import { IQuestion } from '../global/interfaces';
import { DataService } from '../core/data.service';

# Config Component
@Component({
  selector: 'app-questions',
  templateUrl: './questions.component.html',
  styleUrls: ['./questions.component.css']
})

# Implement Component Logic
export class QuestionsComponent implements OnInit {

  # Initialize myQuestions and tag to store this data
  myQuestions: IQuestion[] = [];
  tag: string;
  
  # Initialize dataService and route to use later
  constructor(
    private dataService: DataService,
    private route:ActivatedRoute
  ){};

  ngOnInit() {
  
    # Getting value of Tag param from url
  	this.tag = this.route.snapshot.paramMap.get('tag');
    
    # Passing questions data via DataService and store in 
    this.dataService.getQuestions('angularjs-directive')
      .subscribe((questions:IQuestion[]) => {
        this.myQuestions = questions;
    }
  }
}

  • Вопросы маршрутизации Мы создаем динамический маршрут с тегом параметров внутри вопросов-маршрута. Module.ts.
# Angular Module
import {NgModule} from '@angular/core';
import {RouterModule, Routes } from '@angular/router';

# Questions Compomemt
import {QuestionsComponent } from './questions.component';

# Load Component via 'questions/:tag' path
const routes: Routes = [
  {path:'questions/:tag', component: QuestionsComponent}
];

# Register and Export Module
@NgModule({
  imports: [RouterModule.forChild(routes )],
  exports: [RouterModule]
})

export class QuestionsRoutingModule {

}

Последний шаг – добавить вопрос о проведении вопросов внутри «Вопросы. Module.ts» и добавить модуль вопросов внутри «app.module.ts».

Вопросы. Module.ts.

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

import { QuestionsComponent } from './questions.component';
import { QuestionsRoutingModule } from './questions-routing.module';

@NgModule({
  imports: [
    CommonModule,
    QuestionsRoutingModule
  ],
  declarations: [QuestionsComponent], 
  exports: [QuestionsComponent]
})
export class QuestionsModule {
  
}

app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { TagsModule} from './tags/tags.module';
import { QuestionsModule } from './questions/questions.module';
import { CoreModule } from './core/core.module';
import { AppRoutingModule } from './app-routing].module';

import { AppComponent } from './app.component';

@NgModule({
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule,
    TagsModule,
    QuestionsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Теперь, если мы снова запустим «NG» и посетите «http://localhost: 4200», приложение должно перечислять 5 тегов и введите quen, щелкнув тег TheH, он должен загрузить список вопросов, связанных с этим тегом.

Полный исходный код приложения – здесь Отказ