Ответ 1
Позвольте мне в предисловии сказать, что я предполагаю, что вы и все, кто будет читать это, уже комфортно с Angular 1 (теперь называется AngularJS, а не просто Angular для более новых версий). При этом давайте рассмотрим некоторые дополнения и ключевые отличия в Angular 2+.
- Они добавили angular
cli.
Вы можете начать новый проект, запустив ng new [app name].
Вы можете обслуживать свой проект, запустив ng serve
узнать больше здесь: https://github.com/angular/angular-cli
- Ваш angular код написан на ES6 Typescript и компилируется во время выполнения в Javascript в браузере.
Чтобы получить полное представление об этом, я рекомендую проверить список ресурсов, который у меня есть в нижней части моего ответа.
- Структура проекта
В базовой структуре у вас будет папка 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 используется для определения или экспорта файлов проекта
Дополнительная информация:
Совет для профессионалов: вы можете запустить ng generate [option] [name] для создания новых сервисов, компонентов, каналов и т.д.
Также важен файл tsconfig.json, так как он определяет правила компиляции TS для вашего проекта.
Если вы думаете, что мне нужно выучить совершенно новый язык?... Э-э... вроде, TypeScript - это расширенный набор JavaScript. Не пугайтесь; это там, чтобы сделать ваше развитие проще. Я почувствовал, что уже через несколько часов поиграл с этим, и через 3 дня все закончилось.
- Вы привязываете к своему 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>
В версии 1 это будет выглядеть примерно так:
JS
angular.module('controller', [])
.controller('myCtrl', function( $scope) {
$scope.hello = "Hello World!"
})
Это то, что мне действительно нравится в v2. Я обнаружил, что директива была крутой кривой обучения для меня в v1, и даже когда я их выяснил, у меня часто был рендеринг CSS не так, как я планировал. Я считаю, что это намного проще.
V2 обеспечивает более легкую масштабируемость вашего приложения, так как вы можете разбить свое приложение проще, чем в v1. Мне нравится такой подход, так как все ваши рабочие части могут быть в одном файле, а не в angular v1.
Как насчет преобразования вашего проекта из v1 в v2?
Из того, что я слышал от команды разработчиков, если вы хотите обновить проект v1 до v2, вы просто удалите устаревшие большие двоичные объекты и замените $scope на selector. Я нашел это видео полезным. Это с некоторыми из команды Ionic, которые работают бок о бок с командой angular, так как v2 больше фокусируется на мобильных устройствах https://youtu.be/OZg4M_nWuIk Надеюсь, это поможет.
ОБНОВЛЕНИЕ: Я обновился, добавив примеры, когда появились официальные реализации Angular 2.
ОБНОВЛЕНИЕ 2: Это все еще кажется популярным вопросом, поэтому я просто подумал, что я нашел какой-то ресурс, который мне очень пригодился, когда я начал работать с angular 2.
Полезные ресурсы:
Для получения дополнительной информации о ES6 я рекомендую ознакомиться с учебниками по новым функциям в Бостоне ECMAScript 6/ES6 - плейлист YouTube
Чтобы написать функции Typescript и посмотреть, как они компилируются в Javascript, ознакомьтесь с игровой площадкой на языке Typescript
Чтобы увидеть разбивку функций по эквивалентности Angular 1 в Angular 2, см. Angular.io - Cookbook -A1 A2. Краткое руководство