Iis скрыть версий js framework angular

Обновлено: 03.07.2024

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

Необходимые условия:	Понимание основ HTML, CSS, и JavaScript, знание терминала/командной строки.
Цель:	Настроить локальную среду разработки Angular, создать стартовое приложение, и понять основные принципы работы.

Что такое Angular?

Angular — это платформа для разработки, написанная на TypeScript. Как платформа Angular включает:

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

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

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

ng build	Компилирует Angular-приложение в выходной каталог.
ng serve	Собирает и запускает ваше приложение, пересобирая его при изменении файлов.
ng generate	Генерирует или изменяет файлы на основе схематиков
ng test	Запускает модульные тесты для заданного проекта.
ng e2e	Собирает и запускает Angular-приложение, запуская затем сквозные тесты.

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

Что вы создадите

Эта серия руководств проведёт вас через создание приложения со списком дел (to-do list). С помощью этого приложения вы узнаете, как использовать Angular для управления, редактирования, добавления, удаления и фильтрации элементов.

Необходимые условия

Чтобы установить Angular в вашей локальной системе, вам понадобится следующее:

Node.js

Angular требует текущую, последнюю LTS, или поддерживаемую LTS версию Node.js. Для получения информации о конкретных требованиях к версии смотрите ключ engines в package.json файле.

пакетный менеджер npm

Angular, Angular CLI, Angular приложения зависят от npm пакетов которые обеспечивают множество функций. Для загрузки и установки npm пакетов, вам необходим пакетный менеджер npm. Это руководство использует npm через интерфейс командной строки, который устанавливается с Node.js по умолчанию. Для того, чтобы узнать какая версия npm установлена, запустите npm -v в терминале.

Настройка приложения

Вы можете использовать Angular CLI, запуская команды в терминале для генерации, сборки, тестирования, и развертывания приложений на Angular. Для установки Angular CLI, запустите следующие команды в терминале:

Команды Angular CLI начинаются с ng , за которым следует то, что вы хотите CLI сделал. В рабочей директории (например, Desktop) выполните команду ng new , чтобы создать новое приложение под названием todo :

В текущей директории команда ng new создаст необходимое для работы маленькое Angular-приложение. Дополнительные флаги, --routing и --style , определяют, как обрабатывать навигацию и стили в приложении. В этом руководстве эти функции будут описаны позже.

Если вам будет предложено применить строгую проверку типов, вы можете ответить "yes".

Перейдите в ваш новый проект с помощью команды cd :

Запустите ваше приложение todo , выполнив команду ng serve :

Когда CLI спросить про аналитику, ответьте no .

Пока выполняется ng serve , запускать другие команды можно в новой вкладке или окне терминала. Если вы захотите остановить работу приложения, нажмите Ctrl+c в терминале, где оно было запущено.

Знакомство с вашим Angular приложением

Исходные файлы, на которых будет сосредоточено внимание в этом руководстве находится в src/app . Файлы, генерируемые CLI автоматически, на которые стоит обратить внимание:

Таким образом, с самого начала вы используете лучшие приёмы разработки.

Каждый раз, когда вы генерируете компонент, CLI создает эти четыре файла в каталоге с указанным вами именем.

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

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

Компоненты — это строительные блоки Angular-приложений. Компоненты включают TypeScript-класс, который имеет декоратор @Component() , HTML-шаблон и стили.

Класс

Компонент называется ItemComponent , и имеет селектор app-item . Вы можете использовать этот селектор как и обычные HTML-теги, помещая его в другие шаблоны. Когда селектор находится в компоненте, браузер отображает шаблон этого компонента. Это руководство поможет вам создать два компонента и использовать один в другом.

Компонентная модель Angular предлагает надежную инкапсуляцию и интуитивно понятную структуру приложения. Компоненты также упрощают модульное тестирование вашего приложения и могут улучшить общую читаемость кода.

HTML-шаблоны

У каждого компонента есть HTML-шаблон, в котором определяется то, что этот компонент будет отображать. Шаблон можно задать либо строкой, либо как путь к файлу.

Для ссылки на внешний HTML-файл, используется свойство templateUrl :

Чтобы указать напрямую HTML-код, используется свойство template с обратными кавычками:

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

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

Когда приложение загружает компонент и его шаблон, браузер видит следующее:

Стили

Компонент может наследовать общие стили приложения из файла styles.css или переопределять их собственными стилями. Вы можете писать стили для конкретных компонентов прямо в декораторе @Component() или указывая путь к CSS-файлу.

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

Обычно компонент использует стили определяемые в отельном файле, указанном в свойстве styleUrls :

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

Резюме

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

Проверка и установка Bower

Вначале проверим, установлен ли у нас Bower - пакетный менеджер для веб. Для этого в консоли выполним команду:

В случае, если Bower у вас не установлен, то выполните команду:

Подготовка к созданию проекта

Пакет @angular/cli предоставляет интерфейс командной строки, который упрощает процесс создания и работы с новым проектом Angular. Во время разработки код фреймворка компилируется, упаковывается и предоставляется браузеру используя webpack - распространенный инструмент для создания JavaScript-бандлов (JavaScript bundles), содержащие только код, необходимый для запуска проекта.

Начнем с того, что запустим консоль и установим пакет @angular/cli:

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

Создание проекта

Создание Angular части проекта

На первом шаге создадим новый проект Angular с использованием ранее установленного пакета @angular/cli. Для этого откроем окно консоли и перейдем в директорию, где хранятся ваши разрабатываемые проекты, и запустим команду:

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

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

Процесс выпуска (ejection process) обновляет файл package.json, который используется npm для отслеживания пакетов, используемых в проекте. В некоторых случаях процесс выпуска добавит дополнительные npm-пакеты в файл package.json, поэтому выполните команду, показанную ниже, чтобы убедиться, что новые пакеты загружены и установлены.

Этой командой мы обновляем пакеты npm.

Далее, выполните команду, показанную ниже в директории AngularTestApp, чтобы добавить NuGet-пакет, который является дополнением к npm-пакетам, установленными нами ранее. Этот NuGet-пакет используется для интеграции инструментов Angular в Visual Studio.

При желании, можно выполнить команду:

Эта команда загрузит необходимые пакеты. В принципе, для проекта под Visual Studio для этого нет необходимости, так как сама среда успешно загрузит указанные пакеты.

Настройка проекта

Запустите Visual Studio 2017 и выберите "Файл > Открыть Решение или проект", перейдите в директорию AngularTestApp и выберите файл AngularTestApp.csproj Далее, выберите "Файл > Сохранить все" и сохраните файл AngularTestApp.sln, который в дальнейшем можно использовать для открытия проекта. Затем выберите "Проект > Свойства", перейдите в раздел "Отладка" и убедитесь, что выбран IIS Express в поле "Запустить", как показано на изображении ниже.

Убедитесь, что отмечен чекбокс "Запустить браузер" и укажите http://localhost:5000 в поле "URL-адрес приложения", как показано на рисунке выше. Затем, при необходимости, добавьте переменную окружения ASPNETCORE_ENVIRONMENT со значением Development. Сохраните изменения и закройте окно свойств проекта.

Создание и редактирование файлов конфигурации

Добавьте файл TypeScript с именем boot.ts в директории AngularTestApp/ClientApp, который содержит следующий код:

Далее, откройте файл webpack.config.js в директории AngularTestApp, найдите строку module.exports, показанную в листинге ниже, и внесите изменения. Этот файл содержит много конфигурационных параметров, но тот блок, который необходимо найти, расположен ближе к началу файла.

Обновление пакета Bootstrap

Чтобы обновить версию пакета Bootstrap, что используется в проекте, создайте файл bower.json в директории AngularTestApp со следующим содержимым:

Сохраните файл. Visual Studio загрузит и установит указанные пакеты.

Некоторые файлы в проекте можно удалить. Ниже приведены эти файлы.

.editorconfig - этот файл содержит настройки текстового редактора, специфические для проекта и он используется Visual Studio для переопределения настроек, заданных в меню Средства ? Параметры, включая настройки размера табуляции в два пробела;
e2e - эта директория содержит тесты для Protractor, который осуществляет полное тестирование приложений на Angular;
protractor.conf.js - файл конфигурации Protractor;
README.md - файл содержит обзор инструментария @angular/cli.

Обновление контроллера, файла макета (Layout) и представления

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

Отредактируйте файл _Layout.cshtml в директории Views/Shared и замените его содержимое на следующее:

Отредактируйте файл Index.cshtml в директории Views/Home и замените его содержимое на следующее:

Элементы script в этом представлении включают бандлы (связки) файлов JavaScript, которые содержат фреймворк Angular и клиентский код приложения. Бандлы будут созданы автоматически инструментом webpack, когда файлы в Angular-части проекта будут изменены.

Элемент app-root будет заменен динамическим содержимым, созданным приложением Angular. Остальные элементы - это обычный HTML, стилизованный с помощью Bootstrap.

Запуск проекта

Если по каким-либо причинам у вас страница отличается от указанной, то вы можете, находясь в директории AngularTestApp, запустить веб-сервер из командной строки с помощью команды:

Создание нового приложения

Создайте из командной строки новый проект в пустом каталоге с помощью команды dotnet new angular . Например, следующие команды позволяют создать приложение в каталоге my-new-app и перейти к этому каталогу:

Откройте созданный файл проекта .csproj и запустите в нем приложение в обычном режиме.

В процессе сборки при первом запуске восстанавливаются зависимости npm. Это может занять несколько минут. Последующие сборки выполняются гораздо быстрее.

Убедитесь, что у вас существует переменная среда ASPNETCORE_ENVIRONMENT , которой соответствует значение Development . Запустите команду SET ASPNETCORE_ENVIRONMENT=Development в ОС Windows (в приглашениях, отличных от PowerShell). А в ОС Linux или macOS запустите команду export ASPNETCORE_ENVIRONMENT=Development .

Чтобы проверить наличие ошибок при создании приложения, запустите команду dotnet-build. При первом запуске процесса создания будут восстановлены зависимости npm, на что может потребоваться несколько минут. Последующие сборки выполняются гораздо быстрее.

Перейдите по этому URL-адресу в браузере.

Добавление страниц, изображений, стилей, модулей и т. д.

Каталог ClientApp содержит стандартное приложение Angular CLI. дополнительные сведения в официальной документации Angular.

Существуют небольшие различия между приложениями Angular, создаваемыми этим шаблоном и создаваемыми непосредственно Angular CLI (командой ng new ), однако возможности приложений одинаковые. Приложение, созданное с помощью шаблона, содержит основанный на Bootstrap макет и простой пример маршрутизации.

Выполнение команд ng

В командной строке перейдите в подкаталог ClientApp:

Если у вас не установлено средство ng , запустите вместо него npm run ng . Например, можно запустить npm run ng lint или npm run ng test .

Установка пакетов npm

Для установки npm-пакетов сторонних разработчиков используйте в командной строке подкаталог ClientApp. Пример:

Публикация и развертывание

В процессе разработки приложение запускается в режиме, оптимизированном для удобства разработчиков. Например, пакеты JavaScript включают сопоставления с исходным кодом (благодаря чему при отладке вы сможете видеть исходный код TypeScript). Приложение следит за изменениями файлов TypeScript, HTML и CSS на диске и при обнаружении изменений автоматически производит перекомпиляцию и перезагрузку страницы.

На рабочем этапе используйте версию приложения, оптимизированную для производительности. На нее уже настроено автоматическое переключение. При публикации конфигурация сборки выдает уменьшенные, предварительно скомпилированные (AoT) сборки клиентского кода. В отличие от сборки в режиме разработки, установка на сервере Node.js не требуется (если только не используется предварительная отрисовка на стороне сервера [SSR]).

Запуск "ng serve" отдельно

В командной строке перейдите в подкаталог ClientApp и запустите сервер разработки Angular CLI следующей командой:

Используйте npm start , а не ng serve для запуска сервера разработки Angular CLI, в результате чего будет учитываться конфигурация в файле package.json. Чтобы передать серверу Angular CLI дополнительные параметры, добавьте их в package.json в нужную строку scripts .

Недостатки SSR

Не все приложения получают преимущество от использования SSR. Основное преимущество — воспринимаемая производительность. При использовании вашего приложения посетители, у которых низкая скорость сетевого подключения или медленные мобильные устройства, быстро обнаруживают первоначальный пользовательский интерфейс, даже если для получения или анализа пакетов JavaScript требуется некоторое время. Тем не менее в основном многие одностраничные приложения (SPA) используются в быстрых внутренних сетях компании на быстрых компьютерах, где приложение появляется почти мгновенно.

Для SSR необходимо, чтобы на рабочих серверах был установлен Node.js. В некоторых сценариях это происходит автоматически (например, службы приложений Azure), а в других — нет (например, Azure Service Fabric).

Установка флага сборки BuildServerSideRenderer приведет к публикации каталога node_modules. В этой папке находятся более 20 000 файлов, что повлечет за собой увеличение времени развертывания.

Я не могу для жизни меня получить эту вещь настроить правильно, поэтому, когда я попал в веб-приложение, правильно обслуживает приложение узла. Думаю, моя проблема в сети.конфиг. Может кто-нибудь помогите мне написать правильный веб.config, чтобы это работало правильно? Текущая версия моей конфигурации будет сервер мне ответ узла, который говорит, что он не может получить ресурс по любому url-адресу, который я набираю.

вот текущая версия моего конфига:

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

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

поскольку существует не так много документации для этого конкретного сценария и доступных ресурсов, которые я нашел, только частично описано, как решить эту проблему. Вот учебник по как заставить все это работать. У меня лично есть несколько узлов.веб-службы js, реализующие REST API или сокет.io с помощью этой настройки.

Я настоятельно рекомендую использовать веб.шаблон config ниже, чтобы заставить это работать.

Iisnode Web.шаблон конфигурации

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

чтобы эта конфигурация работала, вам понадобится модуль перезаписи URL для IIS если вы еще не установили его.

Настройки По Умолчанию

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

Get Express для использования виртуального каталога

IISNode делает все ключи объявленными в вашем <appSettings> переменные среды. Мы можем использовать это в наших интересах, чтобы настроить наш виртуальный путь к каталогу и предоставить его нашему основному файлу. В шаблоне над нашим основным файлом находится app.js .

получить наш виртуальный каталог путь

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

это извлекает наш virtualDirPath из нашей сети.config и дать ему значение по умолчанию-пустая строка.

затем мы можем добавить virtualDirPath к нашим маршрутам, и если вы используете механизм просмотра, такой как Jade или EJS, мы можем передать наш виртуальный Путь к каталогу для гиперссылок и таких к представлению:

Статический Контент

мы можем служить это легко следующим образом:

то же самое, если вы используете Bower.Ио:

использование виртуальных каталогов с Express & Socket.Ио

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

На Стороне Сервера

нам нужно настроить наш сокет.io-сервер немного отличается от обычного.

в приведенном выше коде мы модифицируем наш сокет.io server для работы на нашем virtualDirpath, а не пути по умолчанию ( '/socket.io' - путь по умолчанию).

для того, чтобы IISNode правильно работал с сокетом.io нам также нужно добавить некоторые дополнительные перезаписи url и поменять наш обработчик. В течение файл конфигурации шаблона сверху мы можем видеть сокет.обработчик ввода-вывода в строке 57, он закомментирован в шаблоне.

тогда нам нужно добавить нашу переписывание url для сокета.пути ввода-вывода

На Стороне Клиента

на стороне клиента нам просто нужно указать путь, который сокет.io server прослушивает вместо своего пути по умолчанию.

все должно быть хорошо, чтобы пойти в этот момент с вашим сокетом.io приложение работает в виртуальном каталоге с IISNode.

Информация Об Окружающей Среде

приложения, которые используют эту конфигурацию, были построены с узлом.js, Express 4.12.3 и работает в IIS 7.5 с установленным IISNode. Кроме того, путем изменения обработчика в файле conifg, сокет.io также может использоваться в виртуальном каталоге. Розетка.версия io, используемая в приведенном выше примере, была 1.3.5

в конечном счете, то, что сработало, это исправление url-адреса запроса в моем приложении. Мы перешли от использования express к hapi, поэтому я преобразовал этот код из hapi обратно в express без тестирования его сначала, но он должен получить вас на стадионе.

для тех, кто не может обслуживать статические файлы, обязательно измените свой базовый url href на путь виртуального каталога перед выполнением сборки ng, а затем с сервера обслуживайте свои статические файлы.Надеюсь, это кому-то поможет.

Читайте также: