AngularJS. Пагинация в AngularJS. Часть 2


Содержание материала:

Stepan Suvorov Blog

Release 2.0

С чего начать изучение AngularJS. Часть2 – Шаблоны оживают.

В первой части мы разобрали как развернуть проект, его структуру, MVC компоненты и как это все тестировать с помощью testacular.

В этой части мы уделим больше внимания шаблонам и директивам.

Итак, что из себя представляют шаблоны AngularJs? Это HTML дополненный переменными, выражениями и директивами.

Переменные

Определяются через двойные фигурные скобки в тексте HTML:

либо без кавычек, если указываются в директиве:

Выражения(expression)

Уже разбиралось в первой части, интеграция такая же как и у переменных:

В выражении мы так же можем вызвать методы из $scope:

Важно помнить, выражение – это еще не полный JavaScript, поэтому объекты типа Math работать не будут, если конечно мы их предварительно не свяжем через контроллер.

Директивы

Вот тут начинается самое интересное.

Директива – это что-то типа вспомогательного элемента для отрисовки представления. Может быть встроена в HTML следующими способами:

тип общий вид пример
В виде атрибута тега
Значением атрибута class
Отдельным тегом
комметарием

Все директивы можно условно разделить на 2 типа: встроенные(которые уже присутсвуют во фремворке) и кастомные(написаные нами)

Встроенные директивы начинаются с префикса ng- либо ng: (разработчки фреймворка допускают использование обоих вариантов)

Основные встроенные директивы:

Определяющие назначение блока:

  • ngApp – определяет корневой элемент для приложения(обычно это html либо body, но могут быть и другие вариаты)
  • ngController – задает имя контроллера(метод) для блока
  • ngForm – связывает элементы формы
  • ngClassEven/ngClassOdd – когда мы хотим что-то сделать для четных/нечетных элементов в списке( используется совместно с ngRepeat)
  • ngHide/ngShow – прячет либо показывает элемент в зависимости от значения
  • ngInclude – позволяет подключать отдельные файлы
  • ngTransclude – используется внутри кастомных директив для вывода контента заданного снаружи при объявлении директивы
  • ngRepeat – что-то типа встроенного цикла
  • ngModel – связывание состояния/значения элемента с моделью/объектом

Если же наши потребности не удовлетворяют встроенные директивы – тогда мы можем написать свою. Как это делается? Все директивы создаются с помощью метода модуля – directive(), который имеет следующий синтаксис:

  • directiveName – имя нашей директивы
  • directiveFactory – фабрика, для создания директивы

Фабрика может возвращать как функцию(простая нотация), так и объект с методами и свойствами(сложная нотация).

Синтаксис простой нотации:

Синтакс сложной нотации:

Подробно о каждом параметре

Параметр Описание Пример
priority приоретива выполения(для случая когда на одном элементе несколько директив) 1
template шаблон HTML
templateUrl ссылка на файл шаблона ./views/alert.html
replace если true – то шаблон директивы заменит элемент, false – произойдет append true
transclude компилирует контект элемента и делает возможные его вставку внутрь шаблона (по средством ngTransclude ) false
restrict задает способ встраивания(смотри выше):

  • E – тэг(имя элемента)
  • A – атрибут
  • C – класс
  • M – комментарий
E
scope Определяет способ передачи scope в директиву true
controller метод(либо ссылка на метод) где описано поведение(логика) dialogDirectiveController
compile метод(либо ссылка на метод) с инструкциями по компиляции шаблона function(tElement, tAttrs, transclude)
link основной параметр фабрики – метод(либо ссылка на метод) по связыванию директивы с приложением function(scope, iElement, iAttrs)

Опции compile и link

Функция компиляции compile (используется довольно редко) трансформирует HTML шаблон. После чего фукнция линковки link регистрирует обработчики событий на DOM обновленного HTML.

Опция controller

Необходима в случае, когда логика директивы выходит за пределы одного метода и нам уже необходимма группа методов. Такую группу методов мы можем объединить в функцию-контроллер. Это будет специальный тип контроллера “связанный с директивой”, которые должен взаимодействать только с данной директивой .

Опция scope

В зависимости от типа переданного параметра ведет себя по разному:

  • (boolean)true – создается новый scope конкретно для этой директивы
  • (object hash)<> – задается конкретный изолированный scope – т.е. scope не унаследованный от родительского

По умолчанию эта опция выставлена в false (используется scope ближайшего контроллера).

Изолированный scope может влючать в себе ссылки на элементы родительского scope при использовании нетривиального синтаксиса(специальный префикс символ (@, =, & )перед имеем метода/переменой):

  • @ – переменную локального scope со значением DOM аттрибута
  • = – двустороннее связывание значения атрибута и переменной
  • & – позволяет выполнять выражения из аттрибута в рамках родительского scope

В примере с официального сайта мы видим задания scope для директивы следующим образом:

Т.е., будет создан изолированый scope со ссылкой на title, которая будет связана с атрибутом zippy-title ( Внимание! именно такая нотация для связывания с атрибутом, не zippyTitle, а zippy-title ).

Попробуем его максимально упростить…

Я надеюсь вот этот пример (оставлена только суть) позволит разобраться в вопросе связывания переменных изолированного scope с родительским.

Также прошу обратить внимание на проблему которая возникает: при попытке изменения модели дочернего scope – мы теряем связь с родительской.

Думаю будет еще как минимум один пост на структуру scope в Angular, так что для это статьи пока все.

Команда Angular выпустила инструменты, упрощающие переход с AngularJS на Angular

Команда разработчиков JS-фреймворка AngularJS выпустила два пользовательских «помощника» — ngMigration Assistant и Forum. Инструменты позволяют узнать, какой переход с AngularJS на Angular является верным, как максимально упростить процесс и избежать ошибок.

ngMigration Assistant

ngMigration Assistant — инструмент командной строки, который анализирует любое, независимо от размера, приложение AngularJS и рекомендует оптимальный путь миграции. В помощь пользователю предлагается статистика, рассказывающая о сложности, размере, содержании и шаблоне приложения. На основе этих данных программа предлагает список понятных рекомендаций, упрощающих переход с AngularJS на Angular, с учётом размера и сложности кода.

Ниже — пример использования ngMigration Assistant для приложения AngularJS phone catalog. С помощью команды ngma , прописанной в директории, выполняется анализ и прописываются рекомендации.

Вначале инструмент показывает статистику имеющихся данных, а после — этапы подготовки к миграции на Angular.

ngMigration Forum

В новом сообществе ngMigration Forum собрана актуальная информация о путях миграции и инструментах, обеспечивающих переход с AngularJS на Angular. ngMigration Forum — место для обмена опытом, решения проблем и вопросов фреймворк-экспертам.

Последнее обновление Angular 6.1 вышло в конце июля 2020 года. В Angular была добавлена поддержка TypeScript 2.8 и 2.9, а также возможность настройки роутера на запоминание и восстановление положения прокрутки.

Изучаем AngularJS на пяти практических примерах

Скачать рабочие материалы к данной статье

Вы, наверное, слышали уже о AngularJS – JS-фреймворке с открытым исходным кодом, разработанном специалистами Google, который реально меняет представление о веб-приложениях. О нем уже много было написано, но до сих пор в Сети очень трудно найти что-то действительно ориентированное на разработчиков.

Где бы лаконично и конкретно, на практических примерах были описаны принципы работы AngularJS. Цель этой статьи – изменить подобное положение вещей. Ниже приводится описание основных составляющих элементов Angular: Модели,Представления, Контроллеры, Сервисы и Фильтры, созданное на основе пяти конкретных примеров.

Если вы предпочитаете редактировать код через ваш любимый редактор, скачайте ZIP-архив по ссылке выше.

Что такое AngularJS?

По большому счету AngularJS является основой, которая связывает HTML-код (который генерируется для просмотра страницы в окне браузера) с JavaScript объектов /моделей. Когда изменяется один из объектов, автоматически обновляется и генерируемая страница. Верно и обратное — модели связаны с текстовым полем (контентом страницы). Когда изменяется контент, это вызывает изменения и в коде сайта.

AngularJS связывает коды в единую систему, и вам не нужно больше обновлять HTML вручную или инспектировать элементы, как в случае, если вы используете JQuery. В самом деле, ни в одном из примеров, приведенных здесь, даже не упоминается JQuery!

Для использования AngularJS вы должны добавить его в код своей страницы. Для этого в тэг нужно прописать соответствующие параметры. Google’s CDN для более быстрой загрузки рекомендую еще такой код:

AngularJS включает в себя большое количество директив , которые позволяют связать HTML-элементы моделей. Они представляют из себя атрибуты, начинающиеся с префикса ng-, их можно добавлять к любому элементу. Самым важным атрибутом, который, если вы хотите использовать Angular, нужно включить во все страницы сайта является ng- приложений:

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

Но довольно теории. Давайте рассмотрим непосредственно некоторые коды.

Меню навигации

В качестве первого примера мы создадим меню навигации, в котором выделяется активный элемент. В примере задействованы только директивы AngularJS, это самое простейшее приложение, использующее фреймворк.
Код выглядит следующим образом:

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

Если вы использовали шаблоны JavaScript раньше, то вы знакомы с синтаксисом команды <>. Когда фреймворк видит такую строку, он заменяет содержимое переменной. Эта операция повторяется каждый раз, когда изменяется переменная.

Встроенный редактор

Для второго примера, мы создадим простой встроенный редактор – при нажатии пункта меню всплывает небольшое текстовое поле с подсказкой. Мы используем контроллер, который будет инициализировать модели и задавать два разных метода отображения подсказки. Контроллеры являются стандартными функциями JavaScript, которые автоматически выполняются фреймворком Angular. Они связаны с кодом отображения страницы вашего сайта через директивы ng-controller .

Когда функция контроллера запускается на исполнение, для нее в качестве параметра задается специальный объект $scope. Он отвечает за ввод текста в текстовый редактор. Для того, чтобы вывести его на экран, нужно прописать дополнительные свойства и функции, которые описывают отображение его элементов. С помощью NG-моделей осуществляется связь кода сайта с текстом, который вводится в рабочее поле редактора. При вводе текста Angular задает соответствующие изменения переменных.

Форма заказа

В этом примере мы рассмотрим код формы заказы, в которой автоматически выводится общая сумма. Здесь использована еще одна полезная функция AngularJS — фильтры . Фильтры позволяют вносить изменения в модели, а также объединять их с помощью символа «|». В приведенном ниже примере, используется фильтр валюты , чтобы перевести числовое значение в корректный формат цены — с разделением долларов и центов. Когда вы рассмотрите пример № 4, вы сможете с легкостью задавать свои собственные фильтры.

Связка ng-repeat ( описание ) – это еще один полезный элемент Angular. Она позволяет запустить цикл обработки массива элементов, а также задать разметку для каждого из них. Она автоматически обновляет код, если один из элементов был изменен или удален.

Функция поиска

В этом примере приводится функция, позволяющая фильтровать список элементов по определенному критерию. Это еще одно направление, где с успехом может применяться AngularJS.

Фреймворк является идеальным инструментом для создания пользовательских фильтров. Для этого сперва мы должны сформировать специальный модуль для нашего приложения.

Модули представляют собой форму организации приложений JavaScript в автономные компоненты, которые можно связывать между собою в разных вариантах и последовательностях. Angular также использует этот метод группировки кодов. Потому прежде, чем создавать фильтр, нужно сначала создать модули для разных приложений.

Для того, чтобы создать модуль приложения, нужно выполнить всего два действия:

  1. Использовать функцию angular.module(«name»,[]) при вызове JS. Это установит границы нового модуля;
  2. Задать имя модуля в качестве значения директивы ng-app.

После этого фильтр создается очень просто функцией filter(). Также просто потом вызвать его через обращение к соответствующему модулю angular.module(«name», []).

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

Функция переключения режима вывода элементов на странице

Еще одна популярная функция – переключение по выбору пользователя различных режимов вывода элементов на странице (список или плитка). Через Angular это делается очень просто.

Кроме того, в этом примере описывается еще один важный элемент фреймворка – сервисы. Это объекты, которые могут быть использованы приложениями для взаимодействия с сервером, API или другими источниками данных. В нашем случае, мы напишем сервис, который взаимодействует с Instagram’s API и выводит массив с самыми популярными на текущий момент фотографиями.

Обратите внимание, что для работы этого кода, нам потребуется использовать на странице дополнительный файл Angular.js:

Для оптимизации работы с AJAX API здесь используется модуль ngResource (в коде модуля задействована переменная $resource).

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

Например, во время тестирования, вы можете предпочесть выводить данные из четко заданного массива фотографий (без фильтров и обработки), что ускорит отладку всей системы.

Дополнительная литература

Если вы все же добрались до конца этой статьи, то у вас уже должно сложиться общее представление о базовых принципах работы с фреймворком AngularJS. Тем не менее, если вы хотите стать настоящим профи в данном вопросе, есть много источников, по которым вы можете изучить эту тему глубже. Вот список ресурсов, которые помогут вам этом:

Сайт AngularJS
Руководство по AngularJS
Официальное пособие по AngularJS
Список сайтов, где представлено еще много информации по теме, видео и учебники

Данная публикация представляет собой перевод статьи « Learn AngularJS With These 5 Practical Examples » , подготовленной дружной командой проекта Интернет-технологии.ру

Running AngularJS 1.6 in Angular 5 (side by side)

At Spatial Vision, We’ve got a number of AngularJS (1.2.x

1.6.x) apps in production which are built around 2012

2015. Their main tech stack:

  1. Angular 1.x
  2. Bootstrap 3.x
  3. Leaflet
  4. OpenLayer
  5. LocalStorage (ngstorage)
  6. Font Awsome
  7. Moment JS (Date/time)
  8. Grunt for build
  9. Docker for build process

Many apps are stable and there is no reason to migrate/upgrade (commercially) for Angular 5 (6 is coming soon). However some apps have on-going enhancement works and require new libraries for new features.

Problem

When you need a new library or external capabilities, most libraries (Angular wrapper etc.) are now only targeting Angular 2+.

Data Farming Mapping Website is a good example that they now want to add a shopping cart capability including eWay integration. While it is entirely possible to stay in 1.6, there is a risk of adapting an external capabilities that are no longer maintained.

ngUpgrade: Run AngularJS and Angular s >This topic is not new and a lot of materials have been published over the last couple of years (Since Angular 2). We learned everything through a number of blogs and official documentation, which are a kind of outdated as Angular is evolving so quickly even since early 2020 and things are slightly different as of March 2020.

Must read

It is still a good idea to go through the history of the migration process as well as reading the official documentation:

AngularJS app overview

We’ve selected the Data Farming app as a migration candidate as we’re about to implement some new features including an e-commerce capability using eWay and a custom shopping cart for downloadable shape files.

The app was originally created in order to demonstrate the API capability, however it was quickly evolved to an app used by farmers and consultants directly. Technically speaking, it has the following characteristics:

  1. AngularJS 1.6 + Angular Material, Grunt base and a few libraries including Auth0, OpenLayer 3, jsPDF and introJS
  2. The app is relatively small (Login; List Farms; Draw paddocks in map; Upload KML/Shape files; View NDVI images for paddocs and print PDF)
  3. Building a new feature which requires a new library (eWay) and new UX (shopping cart, purchase history etc.)
  4. The existing code base needs to be reviewed prior to extending as it was built for a simple prototype

Migration step summary

The following are the steps we took after a lot of readings. There are different migration strategies available in the official documentation, however our preference is running side by side with Angular 5 being the main application.

  1. Create Angular 5 application using Angular CLI (1.7.3)
  2. Copy an existing Angular JS app (should be 1.6.x and refactored so the structure of the code is feature based and each file has a single impl)
  3. Migrate JS dependencies (Switch npm or copy bower_components)
  4. Fix template paths in both JS and HTML
  5. Migrate scss files and fix import paths
  6. Fix API proxy path from Grunt to Angular CLI
  7. Fix minor CSS issues caused by an itroduction of view-container and view-frame
  8. Regression test (It seems all working at this stage, have a good test by QA)
  9. Add Angular Routing and introduce a new page
  10. Switch between AngularJS page and Angular page

Migration steps

Create Angular 5 application using Angular CLI (1.7.3)

Firstly, create an Angular 5 app using Angular CLI. (Used Node 8.10.0 LTS)

Copy an existing Angular JS app into src/ng1

The app is s Grunt based Angular JS 1.6 app using Bower for web dependencies, NodeJS for the build process and SCSS for css processing.

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53223879ac584e16 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Angularjs pagination с использованием смарт-таблицы

Используя angular интеллектуальную таблицу, как мне получить результат, используя значение смещения. Например, у меня есть 100 записей в базе данных

  • Сначала мне нужно получить 20 записей из базы данных и отобразить только 10 элементов на странице.
  • После нажатия третьей страницы необходимо запросить базу данных (вызов службы) и получить еще 20 записей..etc(но не вызов сервера для 2-й страницы)

Я использую плагин smart table pipe/ajax для отображения записей.

Шпаргалка по AngularJS

Эта статья позволит быстро освоить основы JavaScript-фреймворка AngularJS.

Другие статьи по AngularJS:

С чего начать

    1. Подключаем скрипты фреймворка на страничку (взять можно здесь), как минимум, Вам потребуются: angular.js, angular-route.js, angular-locale_ru-ru.js. В рассматриваемом здесь приложении мы используем анимацию, поэтому добавим еще и angular-animate.js.
    2. Создаем app.js — это будет «точка входа» в приложение angular. Внутри объявляем корневой модуль приложения и его зависимости, конфигурируем роуты; если нужно, определяем функцию, которая выполнится при старте приложения, и оборачиваем все это в вызов анонимной функции, «чтобы наружу не торчало ничего»:

    Рассмотрим код подробнее.
    Конструктор модуля принимает два аргумента — имя модуля и массив имен модулей, от которых он зависит.
    Функция config выполняется в момент старта приложения, здесь, во-первых, задается роутинг, а во-вторых, конфигурируются сервисы, предоставляемые провайдерами… ок, мы еще вернемся к этому.
    При конфигурации маршрутов мы задаем url шаблона, который нужно использовать для рендеринга (также можно прямо на месте строкой передать inline-шаблон, только не в templateUrl , а template , но лучше так не делать вообще никогда). Часто здесь же параметром controller обычно задается контроллер (сюрприз!), который будет использоваться для взаимодействия с шаблоном, но мы этого делать не будем, позже объясню почему.
    Функция run выполняется после загрузки всех модулей, нам нечего делать на этом этапе, поэтому мы ничего не делаем в ней (то есть ее можно было вообще не передавать в .run()). Но, к примеру, здесь можно получить текущего пользователя из сессии и сохранить его $rootScope.
    А что за $rootScope ? Для начала стоить сказать, что такое $scope . Скоуп — это модель, «клей» между логикой и шаблонами. Скоупы компонуются и наследуются, образуя древовидную структуру, в контексте скоупов выполняются выражения в шаблонах, скоуп может следить ( $watch ) за выражениями (а также функциями, коллекциями, переменными) и бросать события. Все, что есть в скоупе — доступно в связанном с ним шаблоне и в его дочерних скоупах. На самом деле, я сейчас просто пересказал вступление к статье по скоупам из официальной документации, поэтому советую все же заглянуть в первоисточник.
    Теперь, когда мы разобрались (разобрались же?), что такое скоуп, можно пояснить, что такое $rootScope — это, как не трудно догадаться, родительский скоуп всех скоупов в приложении. Ключевые моменты:

    • Одна штука на приложение
    • Доступен из любого места приложения, достаточно внедрить $rootScope
    • Ловит все события
    • Соответственно, события, брошенные им, дойдут до любого дочернего скоупа
    • Превращается в помойку при злоупотреблении
  1. На страничке приложения в тэг html или body добавляем директиву ng-app=»dummy» тем самым заявляя, что внутри этого тэга будет работать angular-приложение dummy, точка входа в которое описана в одноименном модуле.
  2. Где-то внутри body добавляем блок с директивой ng-view — здесь будут рендериться наши шаблоны в соотстветствии с текущим роутом.

Это основные приготовления для angular-приложения. Теперь, прежде чем начать штамповать контроллеры и сервисы, замолвим слово про структуру приложения.

Структура приложения

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

Корневая директория называется по имени самого приложения, в ней лежат: контроллер верхнего уровня (app-controller.js), базовые стили приложения (app.css), дефолтный шаблон (app.html) и главный модуль приложения (app.js).

  • разделы приложения (foo и bar), каждый со своими контроллером, шаблоном и стилями;
  • компоненты: здесь храним директивы, сервисы и т.д., которые разделяются по функционалу/сущностям, к которым они относятся (например, все, что имеет дело с message, лежит в одной директории), каждая директива лежит отдельно от другой;
  • конфигурация — здесь, соответственно все constant и value сервисы (url-config.js) и модуль (config.js), в котором все это содержится.

Предлагаемая структура — иерархическая, например, если раздел foo у нас сильно усложнится и мы решим разбить его на части, то файлы дочерних разделов уже будут храниться в поддиректориях foofoo/customer«, «foo/supplier«).

Структура модулей соответствует файловой, то есть сервисы MessageManagerFactory и MessageService содержатся в модуле dummy.message , директива MessageList — в модуле dummy.message.messageList , директива MessagePoster — в модуле dummy.message.messagePoster (да, каждая директива хранится в собственном модуле).

Контроллер

Контроллер — это функция-конструктор, которая используется для «оживления» шаблона. Типичный сценарий использования: шаблон привязывают к контроллеру на этапе конфигурации, в контроллер передают $scope , набивают его под завязку всеми данными и логикой, которые используются на странице, а потом пытаются совладать с 600-строчным чудовищем. Так делать не надо.
Во-первых, $scope нужно использовать только тогда, когда без него не обойтись вообще никак, то есть вызов $watch , $emit , $broadcast и т.д. Все функции, объекты и поля лучше держать в экземпляре контроллера:

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

Убирая код, работающий с сообщениями в MessageManager , мы не только уменьшаем количество кода в контроллере (что само по себе хорошо), но и избавляемся от зависимостей, которые этот код может за собой тащить. (Да, конкретно для данного случая — это overkill, MessageManager всего-то умеет дергать сервис для отправки/получения/удаления сообщений и выполняет простые callback’и, но идея, думаю, ясна).

$scope же здесь используется только для задания обработчика события message.new.local (мы ждем, что один из дочерних контроллеров или директив может создать новое сообщение).

В шаблоне все это используется так:

AppController объявлен как «главный» контроллер приложения, поэтому он будет доступен везде как appCtrl . Это удобно, но так же, как и с $rootScope этим лучше не злоупотреблять. В данном приложении мы используем эту возможность для доступа к списку сообщений в дочерних контроллерах.

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

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

В самом шаблоне, все достаточно просто: показываем «приветствие» из поля greeting , которое меняется по клику на кнопку «Say Hi». Далее у нас подключена директива messageList для вывода списка сообщений. Для запросов к серверу для получения, отправки и удаления сообщений служат три кнопки «Save new», «Get all», «Delete all», а статус выполнения запроса выводится чуть ниже.

Директивы

Директива — это независимый компонент, предназначенный для многократного использования. Стоит заострить на этом внимание, т.к. не нужно создавать директиву на каждую форму приложения — если форма специфична для конкретной страницы, и вы сомневаетесь, что она может понадобиться где-то еще — не надо делать из нее директиву. Если нужно разгрузить шаблон и контроллер — просто вынесите код в частичный шаблон и напишите для него отдельный контроллер.

Директивы можно разделить на два типа: изменяющие поведение элемента (draggable, collapsable и т.д.) и кастомные ui-компоненты (контрол для пагинации, календарь, модальное окно).

Директива должна делать одну и только одну вещь, не нужно собирать мега-комбайны, делающие все на свете.

Рассмотрим код простой директивы, оборачивающей элемент в «гармошку» — collapsable:

Для создания директивы нужно вызвать метод directive() у модуля, передав туда имя директивы и массив с внедряемыми зависимостями и, собственно, с конфигурационной функцией, определяющей поведение директивы. В данном случае зависимостей нет, поэтому в массиве всего один элемент — функция.

Для данной директивы нам потребовалось задать всего четыре параметра:

1) restrict — определяет, в качестве чего можно использовать директиву, возможные варианты: A — атрибут, E — элемент, и, с недавних пор, С — класс.

2) link — основная функция для «поведенческих» директив, здесь мы имеем доступ к $scope , jqueryLite-обертке элемента, к которому директива применена, и его атрибутам (в виде хэша). link выполняется после того, как манипуляция с DOM (для этой директивы) была завершена.

3) transclude — с этим все не так просто. Если установлен в true , изменяет скоуп директивы так, что его содержимое замещается содержимым родительского скоупа. Таким образом, если и в скоупе директивы, и в скоупе контроллера задать одноименные поля, в шаблоне директивы использоваться будет поле из скоупа контроллера. Этот параметр следует использовать только вместе c директивой ng-transclude , для подстановки фрагмента DOM извне в «тело» директивы — вставленный фрагмент шаблона не потеряет доступ к переменным в родительском $scope, если он их использовал, и нам не придется передавать их в качестве параметра (ну и если не выставить trancslude в true , у вас вылетит Error: orphane ng-transclude directive ). В данном случае, список сообщений (message-list) будет «подставлен» внутрь блока div в шаблоне директивы с атрибутом ng-transclude (при этом все текущее содержимое div’a будет удалено).

4) templateUrl — url, по которому будет запрошен шаблон для директивы.

Теперь рассмотрим директиву с изолированным скоупом — messageList :

Здесь в конфиге директивы три новых параметра:

  1. scope — если сюда передать хэш (даже пустой), у директивы будет изолированный скоуп (неизолированный скоуп прототипически наследует родительский). Заполняется этот хэш таким образом, что ключ — это название свойства у скоупа, а значение — имя атрибута, значение которого будет связано с этим свойством. На то, как именно будут «забиндены» значения атрибутов на свойства в скоупе, влияют префиксы перед именем атрибута:
    • @ — значение из атрибута будет передано в свойство скоупа директивы строкой.
    • & — свойство директивы будет функцией, интепретирующей выражение, содержащееся в атрибуте. Именно этот префикс используется здесь. Таким образом, вызов $scope.getMessages() вызовет appCtrl.getMessages() и вернет массив сообщений.
    • = — свойство скоупа директивы будет «забиндено» на объект, имя которого указано в атрибуте, т.е. будет создана двухсторонняя связь.
    • ? — флаг необязательности наличия значения, используется в дополнение к другим.
  2. controller — имя контроллера, который будет прикреплен к шаблону директивы.
  3. replace — если установлен в true, блок директивы будет заменен контентом шаблона директивы.

В контроллере директивы можно также увидеть использование функции $watchCollection — angular будет следить за состоянием массива или хэша, если его состояние изменится, будет вызвана callback функция с двумя параметрами — newValue и oldValue .

В шаблоне мы выводим список сообщений в messages с помощью ng-repeat , при этом выполняется сортировка по полю, имя которого хранится в sortBy , sortBy при этом задается из select’a.

Для каждого сообщения мы выводим дату, при этом форматирование выполняется с помощью фильтра angular’a date .

Сервисы

Видов сервисов в angular — пять штук:

Неизменяемый объект или примитив. Может быть использован на этапе конфигурации.

  • value — изменяемый объект или примитив. Не может быть использован на этапе конфигурации.
  • factory — сервис, возвращающий какой-либо объект (неважно какой). Приведем фрагмент фабрики MessageManagerFactory :

    В фабрике определена функция-конструктор объектов MessageManager , заданы методы прототипа MessageManager , приватные функции вынесены в хэш _private , и объявлена «статическая» приватная функция _filterNew (статическая в том смысле, что не обращается к членам экземпляра MessageManager ). На выходе фабрики — литерал объекта с единственным методом — make .
    service — отличается от фабрики тем, что при первом использовании функция будет использована как конструктор объекта. Приведем код нашего сервиса сообщений:

    В сервисе определяется конструктор объектов Message (возможно, не самое лучшее решение, да); url для вызова api сервера берется из constant сервиса urlConfig ; для экземпляра самого сервиса определены методы для вызова сервера ( post , delete , get ), метод для создания экземпляра Message и метод для конвертации из json, пришедшего с сервера, в объект Message (все сообщения с сервера конвертируются, таким образом, все наши сообщения в angular-приложении — экземпляры Message ).
    provider — сервис, который можно использовать, если требуется некая конфигурация при старте приложения. В таком сервисе должна быть определена функция $get() , результат выполнения которой будет предоставлен клиенту сервиса. В сам провайдер можно добавить какие-либо функции для его конфигурации:

    Создав таким образом провайдер, мы можем использовать его в функции configure на старте приложения и задать значение параметра someConfigurableParam .

    Подробнее о наследовании $scope

    Скоупы в большинстве случаев ( ng-include , ng-switch , ng-controller , ng-transcluded , директивы с параметром scope: true ) наследуются прототипически (не уверен, что есть такое слово), из чего следует:

    • Изменение примитива в дочернем скоупе создает новое поле в нем, не оказывая эффекта на этот примитив в родительском скоупе.
    • Изменение поля в объекте в дочернем скоупе изменяет это поле в соответствующем объекте в родительском скоупе.
    • Изменение ссылки на объект в дочернем скоупе создает новую ссылку в нем, ссылка в родительском скоупе не изменяется.

    Стоит отметить, что ng-repeat создает новый скоуп для каждой итерации, значения полей которого копируются из соответствующего элемента итерируемой коллекции родительского скоупа. Поэтому не стоит использовать массивы примитивов в ng-repeat , разве что только для read-only.

    Скоупы не наследуются прототипически в следующих случаях:

    1. Создание директивы с параметром scope: false (по умолчанию). В данном случае, директива использует родительский скоуп как свой собственный, что естественно нежелательно использовать, т.к. может привести к трудноуловимым багам.
    2. Создание директивы с параметром scope: <> . Как уже говорилось выше, создает изолированный скоуп. Поля такого скоупа никак не связаны с родительскими, однако доступ к его полям (родителя) можно получить через атрибуты-параметры директивы (используя биндинги ‘@’, ‘&’ и ‘=’).

    Доступ к родительскому, соседнему или дочерним скоупам можно получить с помощью следующих свойств: $scope : $parent , $$nextSibling , $$childTail и $$childHead .

    Подробнее обо всей этой кухне можно почитать здесь.

    О применении $scope.$apply()

    Вызов этой функции заставляет angular обновить состояние шаблона в соответствии c актуальным состоянием шаблона, однако, если вам пришлось использовать это — скорее всего, вы сделали что-то неправильно: использовали setTimeout вместо $timeout , setInterval вместо $interval , element.on(‘click’) вместо ng-click и т.д. В редких случаях использование $apply оправдано — необходимо изменить модель извне angular -приложения, но мне пока не приходилось с таким сталкиваться. В таких случаях использовать $apply нужно следующим образом (украдено отсюда):

    И далее вызываем safeApply() везде, где нам требуется вызов $apply() .

    Ссылка на репозиторий демо-приложения на гитхабе: ng-help.

    Введение в Angular

    Что такое Angular. Начало работы с фреймворком

    Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

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

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

    Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

    Последняя версия Angular — Angular 8 вышла в мае 2020 года. Официальный репозиторий фреймворка на гитхабе: https://github.com/angular/angular. Там вы можете найти сами исходные файлы, а также некоторую дополнительную информацию.

    Начало работы c Angular

    Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm , если они отсутствуют на рабочей машине. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm. При этом особого какого-то знания для работы с NodeJS и npm не требуется.

    После установки необходимых инструментов создадим простейшее приложение. Для этого определим на жестком диске папку приложения. Путь она будет называться helloapp . В этой папке создадим новый файл package.json со следующим содержимым:

    Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для сборки приложения в один файл с помощью сборщика webpack.

    Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:

    И затем выполним команду npm install , которая установит все необходимые модули:

    После выполнения этой команды в папке проекта должна появиться подпапка node_modules , которая содержит все используемые зависимости и пакеты.

    Затем создадим в папке проекта подпапку, которую назовем src — она будет содержать все исходные файлы. И далее в папке src создадим подкаталог app .

    Создание компонента Angular

    Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:

    В начале файла определяется директива import , которая импортирует функциональность модуля angular/core , предоставляя доступ к функции декоратора @Component .

    Далее собственно идет функция-декоратор @Component , которая ассоциирует метаданные с классом компонента AppComponent. В этой функции, во-первых, определяется параметр selector или селектор css для HTML-элемента, который будет представлять компонент. Во-вторых, здесь определяется параметр template или шаблон, который указывает, как надо визуализировать компонент. В этом шаблоне задана двусторонняя привязка с помощью выражений [(ngModel)]=»name» и <> к некоторой модели name.

    И в конце собственно экспортируется класс компонента AppComponent, в котором как раз определяется переменная name — в данном случае это пустая строка.

    Создание модуля приложения

    Приложение Angular состоит из модулей. Модульная структура позволяет легко подгружать и задействовать только те модули, которые непосредственно необходимы. И каждое приложение имеет как минимум один корневой модуль. Поэтому создадим в папке src/app новый файл, который назовем app.module.ts со следующим содержимым:

    Этот модуль, который в данном случае называется AppModule, будет входной точкой в приложение.

    С помощью директив import здесь импортируется ряд нужных нам модулей. Прежде всего, это модуль NgModule. Для работы с браузером также требуется модуль BrowserModule. Так как наш компонент использует элемент input или элемент формы, то также подключаем модуль FormsModule. И далее импортируется созданный ранее компонент.

    Запуск приложения

    Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположены файлы app.component.ts и app.module.ts) файл main.ts со следующим содержимым:

    Этот код инициализирует платформу, которая запускает приложение, и затем использует эту платформу для загрузки модуля AppModule.

    Также в папке src определим еще один файл, который назовем polyfills.ts со следующим кодом:

    Данный файл определяет полифилы — инструменты, которые необходимы для поддержки приложения на Angular различными браузерами.

    Определение конфигурации

    Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :

    Данный файл определяет настройки для компилятора TypeScript. Опция «compilerOptions» устанавливает параметры компиляции. А опция «exclude» исключает из компиляции папку node_modules, которая содержит все загруженные пакеты.

    Если мы используем TypeScript для работы с Angular, то эти два файла фактически будут присутствовать в каждом проекте. И их можно переносить из проекта в проект с минимальными изменениями. Например, в файле package.json можно будет задать какие-то другие версии пакетов, если предыдущие версии устарели. Можно будет изменить название проекта, версию. Можно подправить настройки TypeScript, но в целом общая организация будет той же.

    Поскольку наше приложение будет разбито на несколько отдельных файлов, то для их сборки будем использовать популярняй сборщик webpack . Поэтому также определим в корневой папке проекта еще один файл webpack.config.js :

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

    В данном случае я не буду подробно разбирать конфигурацию webpack, так как она более подробно разбирается в соответствующей теме. Отмечу только основные моменты. В секции entry определяются входные файлы для компиляции и имена сборок. В данном случае для файла «src/polyfills.ts» будет создаваться сборка «polyfills», а из файла «src/main.ts» (который в свою очередь подтягивает другие файлы приложения) будет комилироваться сборка «app».

    В секции output определяется, что сборки будут находиться в каталоге public, и для них будут созданы файлы с названиями сборок. Плейсхолдер [name] будет передать название сборки, то есть polyfills или app.

    В секции resolve указываются расширения, которые будут применяться к модулям в файлах typescript.

    Секция module.rules определяет загрузчики файлов typescript, которые будут использоваться для сборки проекта. По умолчанию Webpack понимает только файлы javascript, поэтому для файлов ts необходимы специальные инструменты — загрузчики. Здесь для загрузки файлов typescript применяются загрузчики awesome-typescript-loader и angular2-template-loader .

    Последняя часть файла — секция plugins определяет плагины — вспомогательные инструменты, которые применяются при сборке. В частности, плагин webpack.ContextReplacementPlugin позволяет управлять путями к файлам вне зависимости используем мы Windows или Linux.

    Создание главной страницы

    В конце определим главную страницу index.html в корневой папке проекта:

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

    Далее подгружаются скомпилированные и собранные с помощью TypeScript и Webpack сборки — polyfills.js и app.js.

    В итоге у нас получится следующая структура проекта:

    И теперь, когда все готово, мы можем собрать проект и запустить приложение. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду npm run dev :

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

    Введем в текстовое поле какое-нибудь имя, и оно тут же отобразится в заголовке.

    Нужен ли мне vue, react, angular?

    Этот вопрос меня преследует уже год. Никак не могу понять нужен ли мне vue. Обновлять дом? Да, в некоторой степени это удобно, но и накладывает некоторые ограничения. Бесят эти v-onclick, я привык навешивать события не в тегах, а сразу на множество элементов по селекторам в jquery. Вся html разметка в бесконечных v-if v-html. Ну да, это здорово, меняешь 1 свойство и весь шаблон сказочно перерисовывается. Но чем больше я погружаюсь в vue, тем больше времени я трачу на решение поисков ответов на элементарные вопросы как сделать нечто по философии vue, не используя костыли.

    Также пробовал ангяляр, хорошо все получалось, писал контролеры, растыкивал также как и в vue по всей разметке ng*, но и он не прижился в моем миру. Приходилось больше гуглить и искать также ответы на элементарные вопросы, чем делать

    Меньше пробовал react, уже не стал эксперементировать, посмотрел, такое же vue собственно, реактивность, шаблонны

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

    Наверное я просто не вник в эти инструменты достаточно и у меня ничего не выходитс ними или использую устаревшую концерцию генерации шаблонов на сервере. Я просто не понимаю для чего нужен vue

    Миграция с AngularJS на Angular 8

    Всем добра. Занялся миграцией проекта с AngularJS на Angular 8. При попытке импортировать следующие модули

    [JS]import < UIRouterUpgradeModule >from ‘@uirouter/angular-hybrid’; import < UpgradeModule >from ‘@angular/upgrade/static’;[/JS]

    Возникает ошибка Error: ENOENT: no such file or directory (можно скачать?)

    Может кто-то занимался подобным или есть еще способы переноса? Или же нужно просто разбирать код AngularJS и переносить вручную?

    AngularJs добавление отдельного скрипта

    Есть код с со всеми известного AngularJS Phonecat В который я бы хотел добавить свой код:

    И он не видит форму которая из phone-list.template.html Запускается через npm start Выдаёт ошибку

    Подскажите, что я делаю не так и как это исправить. Спасибо

    Поясните по jQuery/AngularJS

    Суть такова. Я нуб и не претендую на правоту, но заметил вот такой момент уже в нескольких проектах, и мне начинает казаться, что это тенденция, а не случайность. Я с вебом сталкиваюсь очень давно, ещё когда в ходу был jQuery версии 1.x, я что-то простенькое периодически лабал, а спустя какое-то время сталкивался с несколькими проектами на AngularJS. Именно на AngularJS. может в современном Angular или Vue или чём-то ещё ситуация лучше, судить не могу. Проекты на jQuery напоминали лапшу и содержали много кода, который было тяжело поддерживать, и, видимо, это подтолкнуло к разработке новых фреймворков. Но уже в нескольких проектах я сталкиваюсь с тем, что кода стало меньше, всё стало организованнее, но вылезают такие ошибки, которые можно обойти только мощными костылями и часть из них вообще не обходятся, а продолжают висеть в баг трекере, потому что их решать тупо нецелесообразно. Там, где под jQuery можно было написать вручную нужный код под любую дурь, в ангуляре возникают ситуации в которых компонент в компоненте через компонент на компоненте и это всё обильно обмазано всяким биндингом и этот сраный внутренний компонент не хочет липнуть к правому боку экрана, хоть ты усрись. И это не мой код, написанный моими кривыми руками, а код других разработчиков. И я вот сталкиваюсь то тут то там с такой ситуацией. Сегодня вот вечер убил на то, чтобы вот такой контрол правильно прилепить сбоку и чтобы он реагировал на позиционирование рядом лежащих компонентов. В jQuery, насколько я помню, писалось говно, в т.ч. с поддержкой какого-нибудь IE6, но никогда на такие плёвые задачи столько времени не убивалось. Может я загоняюсь или ситуация действительно не оч?

    Junior Frontend \ Fullstack разработчик (new). Москва или удаленка

    Мы приглашаем начинающего программиста для участия в разработке системы документооборота для крупной государственной компании, а также других проектах, используя такие технологии, как Angular.js, React (во всех проектах используется REST backend, написанный на JAVA). Нуждаемся в активном и ответственном человеке, который сумел бы взять на себя часть задач по разработке систем в команде с другими разработчиками. Гарантируем постепенный и комфортный вход в проект, а также обучение специалистами с большим опытом. Для работы достаточно уверенного базового знания Angular.js или React, возможен неполный график, рассмотрим предложения по удаленной работе. Рассмотрим кандидатов, знающих другие языки и области программирования и желающих перейти во frontend разработку. Знание HTML, CSS, JS на базовом уровне обязательно. Наш офис и рабочее место располагается в 4-х минутах ходьбы от м. Преображенская Площадь.

    Обязанности: — выполнение задач по разработке системы на Angular.js / React (в зависимости от проекта); — совместная работа с разработчиками;

    Требования: — хорошее знание HTML, CSS, Javascript; — базовое знание Angular.js или React — понимание RESTful взаимодействия frontend — backend — активность, ответственность и желание обучаться;

    Плюсами будут: — знание JAVA; — умение работать с Photoshop — опыт работы с git, mercurial;

    Условия работы: — заработная плата в районе 60 000 (в зависимости от квалификации и опыта); — офис рядом с метро Преображенская Площадь; — возможность работы с гибким графиком; — регулярное повышение заработной платы;

    Преимущества — возможность выбора графика работы при постоянной занятости: с 10:00 до 19:00, с 11:00 до 20:00, с 12:00 до 21:00 и другие варианты. Возможность гибкого графика; — у нас разработчик — это разработчик (не аналитик, не тестировщик); — возможность быстрого карьерного роста, молодой коллектив; — получение новых знаний у коллег с большим опытом работы в сфере, возможность знакомства на практике с широким стеком современных технологий;

    Дополнительные инструкции Если вам интересно наше предложение — присылайте резюме и способ как с вами связаться (телефон, скайп) на job@codemark.ru

    Full-Stack JavaScript developer удаленно, 5500-6000$

    Израильский проект Luminati (https://luminati.io) ищет Full-Stack разработчиков. Компания разрабатывает несколько продуктов, в том числе p2p vpn, видео cdn нового поколения http://holaspark.com/

    — Knowledge in Node JS framework: ExpressJS, Promise — Experience with MongoDB — Creating RESTful web services/API’s using Node.js with or without framework assistance — JavaScript-based unit testing tools — Client-side browser technologies including JavaScript, CSS, and HTML — 1 year development experience in Node JS with a solid working knowledge of frameworks and architecture — 2+ year’s overall development experience using JavaScript and open web technologies — английский язык на уровне понимать, что от вас хотят

    — работа удаленная, 7-9 часов в день (по желанию)

    — зарплата от 30$/час (+фиксированный бонус 250$ ежемесячно), через полгода повышается

    — на заключение контракта выезд в офис, отель и перелет за счет компании, можно взять с собой семью

    — по желанию можно переехать жить в Израиль и ходить в офис. При работе в офисе: личный повар, такси до офиса за счет компании, оплата жилья.

    — каждый сотрудник получает опцион компании

    Full-Stack JavaScript developer удаленно, 5500-6000$

    Мы продали наш проект Luminati за 200 млн.$. https://www.emkcapital.com/emk-acquires-luminati-worlds-largest-ip-proxy-netw. Сотрудники получили выплату по опционам.

    Компания разрабатывает несколько продуктов, в том числе p2p vpn, видео cdn нового поколения http://holaspark.com/

    — Knowledge in Node JS framework: ExpressJS, Promise — Experience with MongoDB — Creating RESTful web services/API’s using Node.js with or without framework assistance — JavaScript-based unit testing tools — Client-side browser technologies including JavaScript, CSS, and HTML — 1 year development experience in Node JS with a solid working knowledge of frameworks and architecture — 2+ year’s overall development experience using JavaScript and open web technologies — английский язык на уровне понимать, что от вас хотят

    — работа удаленная, 7-9 часов в день (по желанию)

    — зарплата от 30$/час (+фиксированный бонус 250$ ежемесячно), через полгода повышается

    — на заключение контракта выезд в офис, отель и перелет за счет компании, можно взять с собой семью

    — по желанию можно переехать жить в Израиль и ходить в офис. При работе в офисе: личный повар, такси до офиса за счет компании, оплата жилья.

    — каждый сотрудник получает опцион компании

    AngularJS вызвать инициализацию DOM элементов

    Правлю один сайт, написан он очень криво, но переписывать все не выгодно и геморно.

    Суть вороса (пожалуйста не говорите, что это хрень полная, но просто воспримите это как «задачу»).

    Есть контроллер на ангуляре:

    Этот код в шаблоне. Есть страница с этим контроллером, в нее добавляются DOM элементы, при клике на кнопку удалить, вызывается $scope.removeImage(. ) и все работает.

    НО. Где-то на этой странице, еще кто-то хз кто, реализовал UPLOAD картинки на jQuery и все работает, действительно хорого. После загрузки изображения, создается динамически DOM элемент в котором есть так-же атрибут ng-click=«$scope.removeImage(. )» НО, т.к. он добавился через jQuery, ангуляр про него ничего не знает, соответственно функция уже не сработает, пока не перезагрузить страницу.

    Как заставить AngularJS перечитать ng-click’и элементов.

    пробовал добавить такой трюк:

    Асинхронность $http/AngularJS (тот самый, который версии 1.6)

    Нашлепал такой код:

    Т.е. хочу получить данные из разных запросов, и ожидаю, что запросы выполнятся параллельно — ХРЕН. В логах сервера — последовательные запросы. Консоль разработчика в браузере показывает параллельную обработку запросов.

    Пробовал через $q.all(. ).then(. ) — один ХРЕН.

    Почитал в интернетах — люди наоборот не могут добиться простой синхронности запросов, а асинхронность, мол, заложена изначально.

    Это предсказуемое поведение или это поведение самого браузера/движкаJS или я ЛОХ?

    П.С. асинхронность на стороне сервера могу, но хорошо бы на клиенте.

    AngularJS и как с этим жить.

    Волею судеб, дали проект, набросанный на коленке, в котором используется частично AngularJS (тот самый, который версии 1.6), но частично — ничерта не соблюдается даже его идеология и некоторые моменты написаны через задницу императивщину, а данные с сервера обновляются по таймеру. Всё это вызывает у меня дикую боль ниже пояса. И пока проект не вырос, с этим нужно что-то делать, иначе это может привести в итоге к краху. Собственно, вопрос, что делать?

    Angular поиск элемента в списке

    Доброго времени суток. Такой вопрос — есть диалог, в который загружается пачка элементов, допустим штук 20-30. Хочу добавить поисковую форму, похожую на md-autocomplete , но так, чтобы все элементы были видны, а если начинаешь набирать текст, то оставались только те, которые совпадают по фильтру. Сам md-autocomplete , насколько я понял, мне не подходит, т.к. он не показывает то, что загрузил, а только по мере набора.

    Вот пример view, который сейчас:

    Разместил файлы Angular-2 на хостинге не работает http://localhost (json server)

    Разместил проект по Angular 2 на сайте. Репозиторий проекта на GitHub: https://github.com/freestyle2020/angular-ivan

    На localhost все прекрасно отрабатывает Json Server. После выполнения команды «ng build» программа генерирует файлы в папку dist, которые можно залить на сайт.

    ———————————- На самом хостинге Get запрос отрабатывает поскольку несколько изменил код: 1.

    Большая просьба, подскажите, как сделать, чтобы на хостинге отработал Json Server?

    angularjs development и browser cache

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

    Как трейсить ангуляр?

    Всем привет. Есть сайт на AngularJS. В JS я вообще почти ничего не понимаю, а когда попытался понять откуда на сайте одна берётся переменная, то почти сломал голову. В общем, сам вопрос — как можно трейсить ангуляр? Запустил отладку, сделал пару кликов, что-то там изменилось, остановил, смотришь как что и к чему пришло. Когда посмотрел на все эти ng-* то стало плохо. Буду очень благодарен за помощь такому незнающему нынешний веб человеку. Спасибо.

    Full-Stack JavaScript developer удаленно, 5500-6000$

    Мы снова ищем разработчиков. Мое старое объявление Senior JavaScript developer, удаленно, 5500-6000$

    Что изменилось за год: мы продали наш проект Luminati за 200 млн.$. https://www.emkcapital.com/emk-acquires-luminati-worlds-largest-ip-proxy-netw. Сотрудникам делают выплату по опционам.

    Компания разрабатывает несколько продуктов, в том числе p2p vpn, видео cdn нового поколения http://holaspark.com/

    — Knowledge in Node JS framework: ExpressJS, Promise — Experience with MongoDB — Creating RESTful web services/API’s using Node.js with or without framework assistance — JavaScript-based unit testing tools — Client-side browser technologies including JavaScript, CSS, and HTML — 1 year development experience in Node JS with a solid working knowledge of frameworks and architecture — 2+ year’s overall development experience using JavaScript and open web technologies — английский язык на уровне понимать, что от вас хотят

    — работа удаленная, 7-9 часов в день (по желанию)

    — зарплата от 30$/час (+фиксированный бонус 250$ ежемесячно), через полгода повышается

    — на заключение контракта выезд в офис, отель и перелет за счет компании, можно взять с собой семью

    — по желанию можно переехать жить в Израиль и ходить в офис. При работе в офисе: личный повар, такси до офиса за счет компании, оплата жилья.

    — каждый сотрудник получает опцион компании

    Junior Frontend разработчик (Москва или удаленка)

    Мы приглашаем начинающего frontend программиста для участия в разработке системы документооборота для крупной государственной компании, а также других проектах, используя такие технологии, как Angular.js, React (во всех проектах используется REST backend, написанный на JAVA). Нуждаемся в активном и ответственном человеке, который сумел бы взять на себя часть задач по разработке систем в команде с другими разработчиками. Гарантируем постепенный и комфортный вход в проект, а также обучение специалистами с большим опытом. Для работы достаточно уверенного базового знания Angular.js или React, возможен неполный график, рассмотрим предложения по удаленной работе. Рассмотрим кандидатов, знающих другие языки и области программирования и желающих перейти во frontend разработку. Знание HTML, CSS, JS на базовом уровне обязательно. Наш офис и рабочее место располагается в самом в 4-х минутах ходьбы от м. Преображенская Площадь.

    Обязанности: — выполнение задач по разработке системы на Angular.js / React (в зависимости от проекта); — совместная работа с разработчиками;

    Требования: — хорошее знание HTML, CSS, Javascript; — базовое знание Angular.js или React — понимание RESTful взаимодействия frontend — backend — активность, ответственность и желание обучаться;

    Плюсами будут: — знание JAVA; — умение работать с Photoshop — опыт работы с git, mercurial;

    Условия работы: — заработная плата до 60 000 (в зависимости от квалификации и опыта); — офис рядом с метро Преображенская Площадь; — возможность работы с гибким графиком; — премии по результатам работы; — регулярное повышение заработной платы;

    Преимущества — возможность выбора графика работы при постоянной занятости: с 10:00 до 19:00, с 11:00 до 20:00, с 12:00 до 21:00 и другие варианты. Возможность гибкого графика; — у нас разработчик — это разработчик (не аналитик, не тестировщик); — возможность быстрого карьерного роста в перспективной IT компании, молодой коллектив; — получение новых знаний у коллег с большим опытом работы в сфере, возможность знакомства на практике с широким стеком современных технологий; — премии по результатам работы; регулярное повышение заработной платы;

    Дополнительные инструкции Если вам интересно наше предложение — присылайте резюме и способ как с вами связаться (телефон, скайп) на job@codemark.ru

    МСК, AngularJS, от 110 000 руб

    Обязанности:
    — AngularJS, Ruby on rails

    Основные требования:
    — AngularJS
    — HTML5, CSS / LESS / SASS, JS, jQuery
    — Git
    — Умение разбираться в чужом коде

    Желательно:
    — Ruby on rails
    — Сoffescript
    — Знание ОС, Linux

    Приветствуется:
    — Ruby, MongoDB, Redis
    — React.js, Nodejs, Socket.io

    Личные качества:
    — Ответственность, самостоятельность, увлечённость профессией

    Условия:
    — Полный рабочий день
    — Полная занятость
    — Офис расположен рядом с метро Шаболовская
    — Оформление согласна ТК РФ
    — Стартовая зарплата в зависимости от квалификации
    — Испытательный срок месяц
    — Перспективные проекты, которые окажут прямое влияние на Ваш карьерный рост
    — Гибкий подход к организации рабочего дня ( всегда можно договориться )

    Ждём вопросы и ваши резюме на е-мейл: relsoftmonitor+work@gmail.com
    Оплата от 110 000 руб

    Angular.js разработчик

    Аутсорсинговая компания Z-Wolves Development находится в поиске опытного Angular.js разработчика для работы над французским проектом. Нам нужен ответственный человек, который сможет работать удаленно 8 часов в день (постоянная занятость) в гибком графике.

    • Разработка и сопровождение высоконагруженных проектов
    • Angular.js (опыт работы от 2 — х лет в production)
    • JavaScript, JQuery, Html5, CSS/SCSS
    • Английский не ниже уровня Intermediate
    • Возможность гибкого графика
    • Возможность работать удаленно
    • Опыт прямого сотрудничества с крупными международными компаниями
    • Интересные и разнообразные проекты
    • Почасовая оплата, привязанная к Доллару США, по договору (от

    • skype: yuliyakhomich
    • e-mail: yhomich@zwolves.com
    • web-site: zwolves.com

    vuestrap vs. ui.bootstrap (angular 1.x wins)

    Добрый вечер.
    Скорее не вопрос, а поныть.
    Решил глянуть этот ваш vue.js с bootstrap биндингами.
    На старом фаерфоксе 29 аккордеоны лагают как сто чертей, например. Я понимаю, что это старый хлам, но. На первый взгляд, vue тормознее и всё такое! Зачем тогда его использовать?

    Software Developer (F/m), IBM, Germany

    ищу людей в свою команду, описание вакансии ниже

    Для откликов (прямой ссылки нет):

    • зайдите на http://www-05.ibm.com/employment/de-de/
    • нажмите на “Jobs für Professionals”
    • в поле location укажите “Kassel”
    • появится вакансия “Software Developer”

    Ready to change the way the world works?

    This is your chance to develop innovative new technology products as well as your career — with one of the world’s largest and innovative technology companies! Hone your expertise alongside fellow talented professionals, where you’ll develop some of the most exciting software solutions on the market. At IBM Security you’ll contribute to keeping the world safe and making a difference in millions of people’s lives — every day.

    As an IBM Software Developer you’ll use the latest tools and technologies available to deliver state-of-the-art software. Working in an Agile and DevOps environment, you’ll be responsible for ensuring that software components are expertly designed, developed and deployed integration in a continuous delivery cycle.

    The Content Security Solutions department delivers the technology powering the AntiSpam and AntiMalware capabilities of IBM Verse, IBM SmartCloud and multiple Enterprise products. Working as part of this team you will help build effective micro services, cloud-ready components and engage in end-to-end delivery of the solutions.

    We are looking for people with a background in both Linux C++ and service development as well as new technologies such as Node.js, Docker and Angular. Results-based, quality-oriented thinking as well as a passion to engage in continuous learning is a must. Also the ability to connect and collaborate closely with your teammates and colleagues is a key success factor.

    We’re not hiring you solely for the skills you have now, but for your potential to grow, evolve and inspire.

    Interested? Apply now with your complete set of documents.

    Feel free to apply in German or in English.

    Basics of AngularJs – Part 2

    Join the DZone community and get the full member experience.

    I have explained introduction of AngularJS in my previous article and now we will discuss the basic concept of AngularJS and why we need to use AngularJS and its features.

    Basics of AngularJS

    You can also read this article to my blog here

    What is AngularJS?

    AngularJS is a javascript framework for created to build a structured and dynamic web application.

    • It is a lightweight platform and open source
    • We can use many ways to structure a web application at client s >Features of AngularJS

    • Data Binding: Two-Way Data Binding
    • Directives
    • MVC design pattern
    • Dependency Injection
    • Testing
    • Routing
    • Templates
    • Models
    • Controllers
    • Val > DataBinding

    Data binding is automatic updating the changes of data between the model and view. When the model changes, the view reflect the changes and vice versa.

    Directive

    Directive can be used in element name, attributes, class names as well as comments.

    MVC

    It is contains a business logic with an application functionality and notify view changes.

    It is render the model data and send user request to controller.

    It is contains an application behaviour and maps user action to model, select view for response.

    DependencyInjection

    Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.

    Filters

    We can use filter format data for display to the user.

    This article helps you to understand the basics of AngularJS and its features.

    Thank you for reading my articles. Please kindly share your valuable comments and suggestion with me.

    Топ-пост этого месяца:  15 декабря наблюдались «неопознанные» изменения в выдаче Google
  • Добавить комментарий