Позвольте мне в предисловии сказать, что я полагаю, что вы и все, кто будет читать это, уже комфортно с Angular 1 ( теперь называется AngularJS , а не просто Angular для более новых версий). При этом давайте рассмотрим некоторые дополнения и ключевые отличия в Angular 2+.
- Они добавили угловой
cli.
Вы можете начать новый проект, запустив ng new [app name]. Вы можете обслуживать свой проект, запустив ng serve
дополнительную информацию здесь: https://github.com/angular/angular-cli
- Ваш угловой код написан на 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 используется для определения или экспорта файлов проекта
Дополнительная информация:
совет Pro: вы можете запускать 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>
В 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 Краткое руководство