Исходное сообщение в блоге - 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.