Миграция из угнта 1.x на угловые 2: обновление стратегий

Angular 2.0 только что был официально выпущен !

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

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

Что может быть причиной повторного написания целой рамки, которая может быть несовместимым? Не то, чтобы угловая команда не имела работы, и что они пытаются «изобретать колесо» после написания угловых 1.x – я бы сказал, если угловой 1.x хорош, то угловые 2 – улучшение!

Ниже приведены расширенные функции, которые делают угловые 2 лучше, чем предыдущие версии.

Лучшая производительность

Концепции связывания данных Angular 1.x имеют множество жалоб и неудовлетворенность производительности из-за задержек и узких мест. В Angular 2 улучшения методов связывания данных увеличили общий производительность приложения и скорость работы при обмене данных.

Адекватная поддержка мобильных или смартфонов

Посмотрим на него, угловые 1.x никогда не были построены с адекватной поддержкой мобильной связи или смартфона. Хотя некоторые проблемы поддержки рассматриваются при использовании IONIC (I.E. Advanced HTML5 Hybrid Mobile App Framework), проблемы с производительностью и пользовательским опытом еще не привлекли много мобильных пользователей. Следовательно, необходимость обновления углового использования с лучшей производительностью на его предшественниках неизбежна. Angular 2 разработан с целью, который сделает его достаточно прочным, чтобы иметь возможность адаптироваться к будущим технологии мобильной связи и смартфонов.

Будущее веб-разработки

Angular 2.0 реализован в Tymdercript (язык, который является суперсом JavaScript) и ES2015/ES6 (I.E. Основная версия ECMAScript). Tymdercript – очень надежный язык, поддерживаемый Microsoft. Его самое большое преимущество состоит в том, что он менее восприимчит к ошибкам времени выполнения в связи с наличием типов на языке. Код Angular 2.0 записан в Teadercript, который в конечном итоге скомпилирован в код JavaScript.

Эта комбинация имеет все обнадеживающие особенности, которые достаточно способны удовлетворить не только на дневные ожидания веб-приложений, но и будущих задач в веб-разработке.

Простые и легче учиться

На основании блогах и статей из угловых разработчиков я могу сделать вывод, что угловые 2 легче узнать по сравнению с 1.x. Обычно это займет неделя для разработчиков для изучения угловых 1.x. Тем не менее, угловые 2 очень просты; Разработчики, мигрирующие к нему, могут заказать их работу по этой структуре в течение трех-четырех дней. Но мигрирование из угловых 1 до 2 также может быть сложнее для разработчиков, поскольку это может означать отказаться от всех своих предыдущих знаний о угловых кодировках, чтобы догнать и оставаться в курсе угловых 2.

Давайте посмотрим на следующие примеры на угловых 2 для новичков. Angular 2 имеет три основных концепция: компоненты, инъекции зависимости и привязки.

Те, кто знакомы с угловой, знают эту очень хорошо угловую 1.x используют директивы, контроллеры и область применения для создания приложения. Эта вся эта концепция была объединена на компоненты в угловом углу 2. В следующем примере приложение/приложение-компонент .TS мы впервые импортируем Компонент от @ Угловая/ядра упаковка. Тогда мы будем использовать @Component Декоратор, который имеет селектор , templateurl и Стилерлс Отказ Селектор определяет тег, который загружает приложение в секции тела index.html как показано ниже. templateurl Определяет путь, где находится фактический файл шаблона HTML. Стилерлс Определяет путь, в котором файл stylesheet CSS расположен, который стили текста и элемент на шаблоне. Наконец, мы экспортируем AppComponent Класс, который используется в качестве класса контроллера.

приложение/приложение-компонент.

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

@Component({
  selector: 'my-angular2-app',
  templateUrl: 'resource/template.html',
  styleUrls: ['assets/styles.css'] 
})

export class AppComponent { 
  heading = "Welcome to Angular 2.0 framework";
  paragraph = "Hello World!";
}

template.html: Это называется в компоненте как templateurl Отказ

{{heading}}
{{paragraph}}

Index.html : Это главная HTML Ride, которая отображает и запускает приложение. У этого есть селектор My-First-Angular2-App , который присутствует в разделе тела, как показано ниже.



Angular 2.0 App

Выход

Ниже приведен выход для приложения Angular 2.0 выше.

Вы нашли ничего сложного о угловой 2 TyplicScript Coding? Поскольку угловые 2 не являются обратной совместимой, все существующие приложения, встроенные в угловой 1.x, должны быть перенесены на версию 2, потому что угловая команда теперь будет сосредоточиться на большем количестве поддержки на последних версиях, и предыдущие будут иметь меньшее и менее поддержку в будущем Отказ

Мигрировать из угловой 1 на угловые 2

Вот несколько способов, которыми вы можете мигрировать из угловых 1.x на угловые 2.

Приложения, которые не должны быть мигрированы

Давайте посмотрим на самый простой подход сейчас. Мы все знаем, что Internet Explorer 10 все еще есть пользователи, даже если рынок имеет последний доступный браузер Microsoft Edge. Аналогичным образом, приложения, близкие к концу их жизненного цикла, но хорошо работают на угловых 1.x, вообще не требуются для миграции на угловые 2.0. Любые усилия для обновления или переноса приложения, которое охватило, – это просто будет пустой тратой усилий, и к тому времени Angularjs 1.x не будет устареть официально

Восстановление в угловых 2

Я бы сказал, что это самый чистый подход – восстановление полного применения с нуля в угловой 2, выбивая приложение Angular 1.x. Но, поскольку все мы все хорошо знаем, разрабатывая любое приложение с нуля, возникает как стоимость, так и рисков устойчивости. Сохранение обоих факторов, в том, что компания или владелец приложения должны принять решение либо восстановить приложение с нуля в угловой 2.0 или использовать NgForward или NGUPGRADE Подход, который я объясню дальше.

Используйте подход NGForward

В NgForward Подход, мы на самом деле не обновляем существующие приложения Angular 1.x – мы создаем среду, в которой эти приложения 1.x будут вести себя как угловые 2 приложения. Другими словами, мы можем постепенно переписать наше приложение Angular 1.x, чтобы работать как Angular 2 приложение. Затем мы можем дополнительно увеличить новые угловые 2 функции к настоящему приложению 1.x в верхней части существующего приложения.

Следующие шаги являются одни основными способами использования NgForward Подход при миграции существующего углового 1.x (должен быть 1,3+) приложения, чтобы быть больше похоже на приложение 2.0.

Откройте подсказку командной строки и выполните следующую команду. Подсказка командной строки открыта в существующем угловом 1.x корневой каталоге проекта. Когда эта команда выполнена, она установит последнюю доступную версию NgForward в том числе модуль отражающих метаданных.

npm i --save ng-forward@latest reflect-metadata

Далее откройте файл HTML в текстовом редакторе и будьте готовы внести следующие изменения, как показано ниже:




  
    
    Ng-Forward Migration EG
    
    
    
    
    
    
  
  
    A moment please...

Отметим, что файл config.js объявляется в заголовке файла index.html выше. Этот файл будет создан, как показано ниже.

System.config({
  defaultJSExtensions: true,
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  map: {
    'ng-forward': 'https://gist.githubusercontent.com/timkindberg/d93ab6e17fc07b4db7e9/raw/
b311a63e0e96078774e69f26d8e8805b7c8b0dd2/ng-forward.0.0.1-alpha.10.js',
    'typescript': 'https://raw.githubusercontent.com/Microsoft/TypeScript/master/lib/
typescript.js',
  },
  paths: {
    app: 'src'
  },
  packages: {
    app: {
      main: 'app-component.ts',
      defaultExtension: 'ts',
    }
  }
});

Теперь в нашем файле компонента App-Component.ts мы можем кодировать его угловым 2 способом, как показано ниже.

import {Component,  bootstrap} from 'ng-forward';

@Component({
    selector: 'my-angular2-app',
    template: '{{heading}}
{{paragraph}}`
})
class AppComponent { 
    heading = "Welcome to Angular 2.0 framework";
    paragraph = "Hello World!";
}
bootstrap(AppComponent);

На данный момент мы все настроены на использование угловых 2 функций в существующем приложении Angular 1.3.

Использование подхода NGUPGRADE.

Используя NgForward Подход, мы можем написать код в угловой 2.0 путь сверху существующих приложений Angular 1.x. Тем не менее, этот подход может быть не комфортно для некоторых опасений за его ремонтопригодность, а обратная совместимость с будущими угловыми версиями может быть проблемой. NgForward Подход определенно приведет к проблемам для громоздких угловых приложений 1.x в долгосрочной перспективе. Эта проблема была прибита в значительной степени с использованием NGUPGRADE подход. NGUPGRADE Подход имеет комплексную документацию, которая может быть получена от официального углового Сайт Отказ

Заключение

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

Авторское био.

Aparajita Jain – старший разработчик Java и технический писатель с более чем 6-летним опытом. У нее есть экспертиза в Java, PHP и Python. Она любит преподавание и делиться знаниями. В настоящее время работают полный рабочий день как разработчик Java в одном из ведущих банков в Канаде.