В этой статье я хотел бы познакомить новичков с Angular-фреймворком. Эта статья будет служить только введением, а дальнейшие объяснения и концепции Angular будут опубликованы в моих следующих нескольких статьях.
Angular - это платформа для создания мобильных и веб-приложений на стороне клиента. Он отлично подходит для SPA (одностраничных приложений). Он использует модульный подход и отлично подходит для многократно используемого кода из-за компонентов.
Angular был впервые представлен как Angular Js в 2010 году. Позже, примерно в 2015 году, был выпущен Angular 2, в котором angular был больше ориентирован на машинописный текст, а не на javascript.
Angular против React:
Angular - это полноценная среда разработки программного обеспечения, которая обычно не требует никаких других библиотек. В то время как React - это библиотека для разработки пользовательского интерфейса. Ему нужны дополнительные библиотеки, такие как Redux, React Router и т. Д.
При запуске React считался более производительным, чем Angular, поскольку React использовал виртуальную DOM, из-за чего нагрузка на браузер была меньше. Но вскоре Angular догнала свои более поздние версии. Angular использует реальную DOM и двунаправленную привязку данных.
React использует JS ES6 в сочетании с JSX. Он использует babel для компиляции кода jsx в браузере. Angular, с другой стороны, может использовать либо javascript, либо машинописный текст. Typescript более компактен, чем Javascript, и предлагает несколько преимуществ.
AngularJs против Angular:
AngularJs был выпущен Google в 2010 году. Но с точки зрения производительности он стоял за React и Vue. Поэтому они решили полностью переписать angular с использованием машинописного текста, и таким образом был представлен Angular 2, который был сопоставим по производительности для реакции.
AngularJs использовал Javascript, но более поздние его версии (от Angular 2) использовали машинописный текст. TypeScript - это надмножество JavaScript, обеспечивающее статическую типизацию в процессе разработки. Статическая типизация не только повышает производительность, но и позволяет избежать многих ошибок времени выполнения, которые затрудняли использование AngularJS для больших и сложных приложений.
Angular также намного быстрее, чем AngularJs (почти в пять раз быстрее). Angular Js использовал двустороннюю привязку, что сказывалось на его производительности. Angular имеет потоковую архитектуру, в которой обнаружение изменений осуществляется посредством однонаправленного потока данных, что значительно ускоряет работу приложений.
Но у Angular крутая кривая обучения. Если у вас есть довольно простое и понятное приложение для разработки, AngularJS может ускорить и упростить разработку. Но если вы хотите разрабатывать сложные приложения, которые должны быть масштабируемыми, Angular должен быть вашим очевидным выбором.
Среда разработки:
Необходимо следующее:
- Узел
- npm
- Интерфейс командной строки Angular
- Текстовый редактор (код VS)
Сначала установите узел и npm. Вы можете просмотреть официальную документацию, и процесс прост.
Чтобы проверить, установлены ли они уже, перейдите в командную строку и запустите «node -v» и «npm -v». Если они установлены, они возвращают соответствующие версии.
Чтобы установить Angular CLI, выполните: «npm install -g @ angular / cli»
После установки используйте «ng - version», чтобы проверить версию. Если при проверке версии angular вы получите предупреждение о том, что вам нужна последняя версия node, перейдите на официальный веб-сайт node js, повторно загрузите и переустановите node js.
Создание базового приложения Hello world и понимание того, как работает код:
- В текстовом редакторе перейдите в папку, в которой вы хотите создать приложение, и запустите «ng new app-name». T он создаст папку, названную в честь указанного вами имени приложения.
- Зайдите в папку и запустите «ng serve».
- Откройте браузер и по адресу localhost: 4200 вы увидите свое первое приложение angular.
Как работает код?
- Прежде чем вдаваться в дальнейшие подробности, поймите, что когда вы запускаете «ng serve», t выполнение происходит внутри файла «main.ts».
- В файл main.ts загружен app.module.ts.
- Кроме того, в app.module.ts загружен файл app.component.ts.
Так происходит поток инструкций. Дальнейшее объяснение Angular Architecture и того, как работает каждая часть, будет сделано в следующих нескольких статьях.
