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

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

Позвольте мне в предисловии сказать, что я полагаю, что вы и все, кто будет читать это, уже комфортно с Angular 1 ( теперь называется AngularJS , а не просто Angular для более новых версий). При этом давайте рассмотрим некоторые дополнения и ключевые отличия в Angular 2+.

1. Они добавили угловой cli.

Вы можете начать новый проект, запустив ng new [app name]. Вы можете обслуживать свой проект, запустив ng serve дополнительную информацию здесь: https://github.com/angular/angular-cli

2. Ваш угловой код написан на ES6 Typescript и компилируется во время выполнения в Javascript в браузере.

Чтобы получить полное представление об этом, я рекомендую проверить список ресурсов, который у меня есть в нижней части моего ответа.

3. Структура проекта

В базовой структуре у вас будет app/tsпапка, в которой вы будете выполнять большую часть своей работы, и app/jsвы найдете в app/jsпапке файлы с .js.mapрасширением. Они "сопоставляют" ваши ".ts" файлы с вашим браузером для отладки, так как ваш браузер не может читать машинописный текст.

Обновление : это не бета. Структура проекта немного изменилась, в большинстве случаев, и если вы используете угловое ограничение, вы будете работать в src/app/папке. В стартовом проекте у вас будет следующее.

app.component.css 
app.component.html
app.component.spec.ts
app.component.ts 
app.module.ts
index.ts

app.component.css : файл CSS, который вы должны использовать специально дляcomponent.html

app.component.html : представление (переменная, объявленная в app.component.js)

app.component.spec.ts : используется для тестированияapp.component.ts

app.component.ts : ваш код, который привязывается кapp.component.html

app.module.ts : это то, что запускает ваше приложение и где вы определяете все плагины, компоненты, сервисы и т. д. Это эквивалентно app.jsв Angular 1

index.ts используется для определения или экспорта файлов проекта

Дополнительная информация:
совет Pro: вы можете запускать ng generate [option] [name]для создания новых сервисов, компонентов, каналов и т. Д.

Также tsconfig.jsonфайл важен, так как он определяет правила компиляции TS для вашего проекта.

Если вы думаете, я должен выучить совершенно новый язык? ... эээ ... вроде, TypeScript - это расширенный набор JavaScript. Не пугайтесь; это должно сделать ваше развитие легче. Я чувствовал, что у меня есть хорошее представление об этом после всего лишь нескольких часов игры с ним, и у меня все было плохо через 3 дня.

4. Вы привязываете к своему HTML так же, как если бы это было в директиве Angular 1. Так переменная, как $scopeи $rootScopeбыли объявлены устаревшими.

Это тот, который вы могли подразумевать. Angular 2 по-прежнему является MV *, но вы будете использовать « компоненты » как способ привязки кода к вашим шаблонам, например, возьмите следующее

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

    @Component({
         selector:'my-app',
         template: '<h1> Hello World! </h1>'
    })

    export class AppComponent {}

Здесь думайте об этом importутверждении как о внедрении зависимости в контроллере v1. Вы используете importдля импорта своих пакетов, где import {Component}говорится, что вы будете делать componentто, что вы хотите привязать к вашему HTML.

Обратите внимание на @Componentдекоратор у вас есть selectorи template. Здесь представьте selectorсебе, $scopeчто вы используете, как вы используете v1, directivesгде имя - selectorэто то, что вы используете для привязки к вашему HTML, вот так

<my-app> </my-app>

Где <my-app>имя вашего пользовательского тега, который вы будете использовать, который будет заполнять то, что объявлено в вашем шаблоне. то есть) <h1> Hello World! </h1>. Принимая во внимание, что это будет выглядеть следующим образом в v1:

HTML

<h1>{{hello}}</h1>

JS

$scope.hello = "Hello World!"

Также вы можете добавить что-то между этими тегами для генерации сообщения о загрузке, например так:

<my-app> Loading... </my-app> 

Затем в качестве сообщения о загрузке будет отображаться « Загрузка ... ».

Обратите внимание, что в объявлении templateуказан путь или необработанный HTML-код, который вы будете использовать HTMLв своем selectorтеге.

Более полная реализация Angular 1 будет выглядеть примерно так:

HTML

<h1 ng-controller="myCtrl">{{hello}}</h1>

В v1 это будет выглядеть примерно так

JS

angular.module('controller', [])



.controller('myCtrl', function( $scope) {
    $scope.hello = "Hello World!"
})

Это то, что мне действительно нравится в v2. Я обнаружил, что директива была крутой кривой обучения для меня в v1, и даже когда я их выяснил, я часто делал CSSрендеринг не так, как планировал. Я считаю, что это намного проще.

V2 обеспечивает более легкую масштабируемость вашего приложения, поскольку вы можете разбить свое приложение проще, чем в v1. Мне нравится этот подход, так как все ваши рабочие части могут быть в одном файле, а не в угловых v1.

Как насчет преобразования вашего проекта из v1 в v2?

Из того, что я слышал от команды разработчиков, если вы хотите обновить свой проект v1 до v2, вы просто удалите устаревшие большие двоичные объекты и замените свои $scopes на selectors. Я нашел это видео полезным. Это с некоторыми из команды Ionic, которые работают бок о бок с командой angular, так как v2 уделяет больше внимания мобильным https://youtu.be/OZg4M_nWuIk Надеюсь, это поможет.

ОБНОВЛЕНИЕ: я обновил, добавив примеры, как появились официальные реализации Angular 2.

ОБНОВЛЕНИЕ 2: Это все еще кажется популярным вопросом, поэтому я просто подумал, что нашел какой-то ресурс, который я нашел очень полезным, когда начал работать с angular 2.

Полезные ресурсы:

Для получения дополнительной информации о ES6 я рекомендую ознакомиться с новыми учебными пособиями по новым функциям ECMAScript 6 / ES6 для New Boston - YouTube Playlist

Чтобы написать функции Typescript и посмотреть, как они компилируются в Javascript, посмотрите площадку языка Typescript.

Чтобы увидеть функцию по разбивке функций на эквивалентность Angular 1 в Angular 2, см. Angular.io - Cookbook -A1 A2 Краткое руководство

Это может помочь вам понять сравнение Angular 1 против Angular 2.

У Angular 2 оказалось много преимуществ по сравнению с Angular 1:

• Он полностью основан на компонентах.
• Лучшее обнаружение изменений
• Ahead of Time compilation (AOT) улучшает скорость рендеринга.
• TypeScript в основном используется для разработки приложений Angular 2.
• Angular 2 имеет лучшую производительность по сравнению с Angular 1.
• Angular 2 имеет более мощную систему шаблонов, чем Angular 1.
• В Angular 2 более простые API, ленивая загрузка, более простая отладка.
• Angular 2 гораздо более тестируем, чем Angular 1.
• Angular 2 предоставляет вложенные компоненты.
• Angular 2 предоставляет возможность выполнять более двух систем одновременно.
• И так далее...

Angular 2 и Angular 1 - это в основном разные фреймворки с одинаковыми именами.

Angular 2 более готов к текущему состоянию веб-стандартов и будущему состоянию сети (ES6 \ 7, неизменность, компоненты, теневой DOM, сервисные работники, совместимость с мобильными устройствами, модули, машинопись и т. д. и т. д.)

angular 2 убил много основных функций в angular 1 like - контроллеры, $ scope, директивы (заменены аннотациями @component), определение модуля и многое другое, даже такие простые вещи, как ng-repeat, не оставили прежних.

В любом случае, изменения хороши, у angular 1.x есть недостатки, и angular 2 более готов к будущим веб-требованиям.

Подводя итог - я не рекомендую вам начинать проект angular 1.x сейчас - это, вероятно, самое плохое время для этого, поскольку вам придется перейти позже на angular 2, то есть вы решаете о angular, чем выбираете angular 2, Google уже запустил проект с Angular 2, и к тому времени, как вы закончите проект, Angular 2 уже должен быть в центре внимания. если вам нужно что-то более стабильное, вы можете подумать о реагировании \ elm, flux и redux как о JS-фреймворках.

Angular 2 будет потрясающим, это без сомнения.

Нет рамки идеально подходит. Вы можете прочитать о недостатках в Angular 1 здесь и здесь . Но это не значит, что это плохо. Вопрос в том, какую проблему вы решаете. Если вы хотите быстро развернуть простое, легковесное приложение с ограниченным использованием привязки данных, продолжайте использовать Angular 1. Angular 1 был создан 6 лет назад для решения задач быстрого прототипирования, что довольно неплохо. Даже если ваш вариант использования сложен, вы все равно можете использовать Angular 1, но тогда вам следует знать о нюансах и лучших практиках создания сложного веб-приложения. Если вы разрабатываете приложение для целей обучения, я бы посоветовал перейти на Angular 2, поскольку именно там будущее Angular.

Отличительной особенностью Angular v2, а также ReactJ является то, что они оба приняли новую архитектуру разработки Web-компонентов. Это означает, что теперь мы можем создавать независимые веб-компоненты и подключать их к любому веб-сайту в мире, имеющему тот же технологический стек, что и этот веб-компонент. Прохладно! да очень круто :)

Другим наиболее заметным изменением в Angular v2 является то, что его основной язык разработки - не что иное, как TypeScript. Хотя TypeScript принадлежит Microsoft и представляет собой расширенный набор JavaScript 2015 года (или ECMAScript6 / ES6), но он обладает некоторыми очень перспективными функциями. Я бы порекомендовал читателям ознакомиться с TypeScript немного подробнее (что, конечно, забавно) после прочтения этого урока.

Здесь я бы сказал, что парни, пытающиеся связать Angular v1 и Angular v2, еще больше сбивают с толку читателей, и, по моему скромному мнению, Angular v1 и Angular v2 следует рассматривать как две разные структуры. В Angular v2 у нас есть концепция веб-компонентов для разработки веб-приложений, в то время как в Angular v1 нам приходится играть с контроллерами, и (к сожалению или к счастью) в Angular v2 нет контроллеров.

Стоит заметить, что angular2 использует машинопись.

Я сделал angular1 с cordova в моем интернате, и теперь я делаю angular 2. Я думаю, что angular2 будет тенденцией, так как, на мой взгляд, она более структурирована, но минусы в том, что у вас мало ресурсов, на которые можно сослаться, когда у вас есть проблемы или трудности. Angular 1.x имеет множество персонализированных директив, которые могут быть очень просты в использовании.

Надеюсь, поможет.

Angular 2 намного лучше, чем 1, по крайней мере в том, что он предлагает: поддержка веб-компонентов, использование машинописи, производительность и общая простота интерфейса - вот причина, по которой я решил начать проект с использованием Angular 2. Однако с самого начала Я понял, что есть проблемы в Angular 2 (например, маршрутизация с Apache), для которых очень мало или вообще нет документации, поэтому документация и сообщество Angular 2 - самая большая ловушка для Angular 2, так как она недостаточно разработана.

Я бы сказал, если вам нужно быстро поднять сайт за короткий срок, используйте хорошо известный угловой 1, если вы работаете в более длинном проекте и можете позволить себе время для изучения новых проблем (с которыми вы можете столкнуться первыми , что может быть бонусом, если вы думаете о вкладе, который вы могли бы внести в сообщество angular 2), а не использовать angular 2.