Исходное сообщение в блоге - http://codevampires.com/2017/11/16/migrate-angular-1-x-angular-2-0/

Это мой первый пост в angular 2.0, и я продвигаюсь вперед с последними технологиями, такими как angular 2.0. Хотя я люблю кодировать с angular 1.x.

Я читаю много блогов и собираю гораздо больше информации об angular2, и я хочу поделиться всеми своими знаниями о переходе с angular1.x на angular2.0.

Мы уже знаем об angular 1.x. Это базовый фреймворк во многих крупных компаниях, а в angular 2.0 он представляет собой отличный мощный веб-фреймворк, для которого еще нет больших мощных приложений.

Я хочу описать общую картину angular 2.0. Как вы можете писать с его помощью приложения и как ваши навыки работы с angular 1.x на этом преобразуются.

Как написать Angular 2.0

Мы можем использовать ES5, ES2015 или TypeScript для написания angular2.0.

Почему мы изучаем Angular2.0

  • Это быстрее, чем angular1.x, как это реализовано в соответствии с современными стандартами веб-технологий.
  • Это мощный, angular2.0, структурный фреймворк JavaScript с открытым исходным кодом для динамических веб-приложений.
  • Он пишет чистую структуру кода и поддерживает менее угловатую конструкцию. Например, один только синтаксис шаблонов angular2 удаляет менее важную функцию angular1.x.
  • Написание angular2 намного проще, чем angular1.x.

Что нового и что изменилось в Angular2

Angular2.0 - это пользовательский интерфейс на основе компонентов. Если мы сравним с ним angular1.x, то наиболее важной концепцией angular1.x является контроллер, и мы можем сравнить его с компонентами в angular2.0.

Контроллер или директива Angular1.x преобразует его в новый компонент angular2. Итак, в angular2 нет контроллера и директивы.

Давайте преобразуем простой контроллер из angular1.x в его компонент angular2.0.

В Angular1.x

<body ng-controller=”MyStory”>
  <h3>{{story.name}}</h3>
  <h3 ng-bind=”story.name”></h3>
</body>

Контроллер,

(function(){
var app = angular.module(“app”, []);
var MyStory = function($scope) {
$scope.story = { id: 1, name:’Afroza’};
};
app.controller(“MyStory”, MyStory);
}());

В Angular 2.0. В angular2.0 что-то очень похоже на angular 1.x, давайте посмотрим,

HTML-код,

<my-story></my-story>

Создать компонент,

import { Component } from ‘angular2/core’;
@Component ({
 selector: ‘my-story’,
 template: ‘<h3> {{story.name}}</h3>’
})
export class MyStory {
 story = { id: 1, name: ‘Afroza’ };
}

В следующем примере используется машинописный текст. Это надмножество стандартов JavaScript для ES6. Он определяет класс MyStory, который совпадает с именем контроллера angular1.x. И декоратор @Component, описывающий шаблон, показывающий HTML-тег h3 и имя селектора, содержащего элемент html, - это my-story. Итак, мы можем использовать этот компонент как просто ‹my-story› ‹/my-story› на странице html. Я думаю, это похоже на директиву angular1.x.

Итак, это все о вводной части angular2.0. Здесь я пытаюсь охватить всю часть angular2.0 для перехода с angular1.x.

Добрый день :)

Первоначально опубликовано на angularjs-2.quora.com.