Создание компонентов в Angular 2 с Typescript и ES5

 import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
  selector: 'user-name'
})

Поскольку Angular 2 был построен поверх TypeScript, фреймворк распознает нашу аннотацию @Component Кроме того, он сообщает Angular, что мы хотим создавать экземпляр компонента всякий раз, когда он видит <user-name></user-name>

Как упоминалось выше, компонент состоит из двух вещей:

• Вид
• Немного логики

Поскольку компонент уже определен, нам нужно создать представление и логику.

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

 @View({
  template: '<h1>My name is Tom Greco</h1>'
})
class UserComponent { }

Теперь, когда я добавлю <user-name></user-name> При этом логическая часть нашего компонента пуста, так как наш класс UserComponent

В приведенном выше примере у меня просто пустой класс. Теперь, однако, я собираюсь создать переменную namename

 @View({
  template: '<h1>My name is {{ name }}</h1>'
})
class UserComponent {
  name: 'Tom Greco'
}
bootstrap(UserComponent);

Вы также увидите функцию начальной загрузки, о которой я говорил ранее. Хотя они имеют общее имя, эта функция используется для запуска или загрузки нашего приложения Angular и не имеет ничего общего с платформой Twitter BootStrap . Если мы забудем передать наш компонент в эту функцию, Angular не будет знать, как загрузить наш компонент.

Еще одна вещь, которую я хочу быстро отметить, это то, что наше приложение должно просматриваться с использованием какого-либо сервера, чтобы оно отображалось правильно. Если к нему обратиться напрямую, то System.js не сможет загрузить наш main

Те, кто использует репозиторий для этого примера, теперь могут запустить node app.js После запуска этой команды мы можем увидеть наш компонент в действии, посетив http: // localhost: 8000 . Надеюсь, это демонстрирует, насколько просто Angular делает добавление логики в компонент!

Перенос нашего компонента в ES5

Для тех, кто хочет использовать возможности 2.0 с ES5, команда Angular 2 создала версию фреймворка, которую можно просто добавить на веб-сайт. Это необходимо, потому что ES5 не имеет модульной системы, поэтому нам нужен какой-то самодельный пакет. Если вы проверили код для первого примера , вы увидите, что мне нужно было добавить три разных тега скрипта в приложение. В этом примере все, что нам нужно сделать, это добавить скрипт ниже.

 <script src="http://code.angularjs.org/2.0.0-alpha.30/angular2.sfx.dev.js"></script>

С помощью этого сценария разработчики могут использовать свои знания ES5, и им не нужно беспокоиться о том, чтобы пожертвовать какой-либо функциональностью платформы. Давайте посмотрим, как мы можем создать угловой компонент в ES5. Код для этого примера можно найти на ветке ES5 нашего репозитория GitHub . Тем не менее, давайте начнем!

Чтобы воссоздать компонент, используя ES5 вместо TypeScript, я собираюсь использовать несколько различных методов. По сути, это то же самое, что я делал в приведенном выше примере, однако вместо использования символа @ng Это показано в коде ниже:

 var UserComponent = ng.Component({
  selector: 'user-name'
})

Теперь мы можем продолжать добавлять функциональность в наш компонент, который будет отображаться каждый раз, когда наше приложение читает селектор <user-name>

Давайте воспользуемся методами ViewClass Внутри нашего метода View Поскольку классы не поддерживаются в ES5, мы собираемся имитировать их использование в нашем методе Classname

 .View({
  template: '<h1>My name is {{ name }}</h1>'
})
.Class({
  constructor: function(){
    this.name="Tom Greco";
  }
});

Мы упускаем одну вещь, хотя. В нашем примере TypeScript мы использовали функцию bootstrap Вот как мы можем сделать то же самое в ES5:

 <script>
  document.addEventListener('DOMContentLoaded', function () {
    angular.bootstrap(UserComponent);
  });
</script>

Это должно быть размещено ниже нашего пользовательского кода приложения. Это заставит Angular загрузить наше приложение и загрузить компонент после загрузки страницы. В отличие от нашего предыдущего примера (для которого требовался сервер), эту страницу можно просматривать прямо в браузере.

Как видите, команда Angular предоставила четкое решение для тех, кто хочет создавать приложения в 2.0 с использованием ES5. Если это то, что вас интересует, я настоятельно рекомендую вам воспользоваться библиотекой a.js , которая позволяет разработчикам создавать приложения Angular в ES5 с использованием синтаксиса, вдохновленного TypeScript.

Вывод

Надеюсь, это дало вам представление о различных аспектах Angular, которые появятся в следующей версии фреймворка. Если вы хотите пойти дальше и создать полноценное приложение, используя Angular 2 и TypeScript (в данном случае это доска объявлений), я рекомендую ознакомиться с этой статьей: Начало работы с Angular 2 с использованием TypeScript .

Я также хотел бы услышать о вашем опыте с Angular 2. Вы уже пробовали это? Вы создали что-то, чем хотели бы поделиться? Дай мне знать в комментариях.