как установить angular на windows
Как установить angular-cli для windows 7
Здесь вы можете увидеть, что я установил angular-cli с помощью предоставленной команды и что любое использование регистров команд и ошибок:
И здесь вы можете увидеть пустую папку без папок с угловыми клипами или что-нибудь в этом роде:
ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ. Я очень новичок в cmd и угловат, и я действительно не знаю, какие шаги здесь предпринять.
Ответов: 5
Установка NodeJs, npm, TypeScript, AngularJS, @ angular / cli на Windows 7 Professional SP 1 64-бит:
Так как я нашел много ценных подсказок, разбросанных по различным сообщениям только после «болезненного» поиска, вот компактная компиляция (а не мои идеи, но мой опыт). Надеюсь, поможет.
установить Node.js установщик Windows 64-бит: https://nodejs.org/en/download/ node-v6.11.0-x64.msi
Если у вас есть (company-) proxy (установка за брандмауэром): настройте npm против прокси-сервера company: open cmd (не повышенное, обычно вы должны быть пользователем входа)
npm config set proxy http://Proxy.Company.com:Port (замените Proxy.Company.com:Port с настройками прокси-сервера)
npm config set https-proxy http://Proxy.Company.com:Port (замените Proxy.Company.com:Port с настройками прокси-сервера)
Подсказки: оба параметра необходимы, спросите своих администраторов за правильным URL. Если вам необходимо развернуть пользователя / пароль, используйте следующий синтаксис:
Установите каталог npm для пакетов (npm 3.10.10 поставляется с Node.js, но мы обновим его позже):
Обновите npm до последней версии:
Остерегайтесь: обновление npm работает только с HTTPS-вариантом (реестр https://registry.npmjs.org/ ). С настройкой HTTP (см. Ниже) вы получаете «shasum check failed».
Установите каталог npm для пакетов в не-HTTPS-вариант:
Причина: https-вариант, необходимый для обновления самой npm, не работает для всех пакетов, например, @ angular / cli @ latest или angular-cli или typescript @ latest.
npm установка угловой (моя версия: 1.6.5)
Проверьте версии (в окне cmd, мои версии ниже):
Установите дополнительный установщик пакетов для Visual Studio (см. Также раздел «Ссылки» ниже): https://marketplace.visualstudio.com/items?itemName=MadsKristensen.PackageInstaller (. Downloads Package Installer v2.0.101.vsix)
Если что-то пошло не так, перезапустите с помощью следующих шагов:
Ссылки:
Последние версии Node.js и Angular CLI можно настроить на Windows 7 несколькими простыми шагами:
Шаг 1: Загрузите Node.js
Шаг 2: Установите Node.js для Windows.
Шаг 3: Проверьте установку Node.js
Введите следующие команды, чтобы проверить версии Node.js и NPM
Шаг 4: Установите Угловую CLI
После этой установки к инструменту CLI можно получить доступ с помощью ng-команд.
Шаг 5: Проверка Угловой CLI
Я также сделал все эти шаги в своем блоге: Setup Node.js и Angular CLI
Чтобы узнать, установлен ли узел, введите приведенное выше в командной строке.
Чтобы добавить этот пакет npm на ваш локальный компьютер, введите приведенное выше в командной строке. Вы заметите, что в корневом каталоге, где установлен пакет, отображается каталог node_modules.
Если у вас возникли проблемы с установкой пакетов, ознакомьтесь с полезными документами для локального размещения пакетов npm
Обратите внимание, что NG.cmd устанавливается нормально:
. где Administrator может быть имя пользователя.
Шаг 1: Загрузите Node.js
Загрузите последнюю версию Node.js с: страницы загрузки Nodejs. Я загрузил Node.js для Windows 64-bit и имя файла: node-v8.9.3-x64.msi
Шаг 2: Установите Node.js для Windows.
Шаг 3: Проверьте установку Node.js
Введите следующие команды, чтобы проверить версии Node.js и NPM
Шаг 4: Установите Угловую CLI
Загрузите последнюю версию Node.js с: страницы загрузки Nodejs. Я загрузил Node.js для Windows 64-bit и имя файла: node-v8.9.3-x64.msi
Шаг 2: Установите Node.js для Windows.
Шаг 3: Проверьте установку Node.js
Введите следующие команды, чтобы проверить версии Node.js и NPM
Шаг 4: Установка Углового CLI Эта команда установит последнюю версию угловой командной строки.
Введение в Angular CLI
В этом посте мы узнаем об Angular CLI и увидим, как использовать его для инициализации нового Angular проекта.
Что такое Angular CLI?
Как и большинство современных инструментов веб-интерфейса, Angular CLI построен на основе Node.js.
Тем не менее, если вы создаете полнофункциональное веб-приложение с Angular, вам может понадобиться Node.js для создания серверной части, если вы хотите использовать JavaScript для интерфейса и серверной части.
В этом случае Node.js используется для создания серверной части вашего приложения и может быть заменен любой серверной технологией, которую вы хотите, например, PHP, Ruby или Python. Но Angular не зависит от Node.js, за исключением его инструмента CLI и установки пакетов из npm.
NPM означает Node Package Manager. Это реестр для размещения пакетов Node. В последние годы он также использовался для публикации внешних пакетов и библиотек, таких как Angular, React, Vue.js и даже Bootstrap.
Установка Angular CLI
Во-первых, вам нужно установить Node и npm на вашем компьютере для разработки. Есть много способов сделать это:
Давайте будем проще и используем официальный сайт. Просто зайдите на страницу загрузки и скачайте файлы установки для Windows, затем следуйте указаниям мастера установки.
Вы можете убедиться, что Node установлен в вашей системе, выполнив в командной строке следующую команду, которая должна отобразить установленную версию Node:
Затем выполните следующую команду для установки Angular CLI:
На момент написания этой статьи будет установлен Angular 8.3.
Если вы хотите установить Angular 9, просто добавьте тег next следующим образом:
После успешного завершения команды у вас должен быть установлен Angular CLI.
Краткое руководство по Angular CLI
После установки Angular CLI вы можете запустить много команд. Начнем с проверки версии установленного CLI:
CLI предоставляет следующие команды:
add : Добавляет поддержку внешней библиотеки в ваш проект.
build (b) : Компилирует приложение Angular в каталог с именем dist/ по указанному пути. Должен выполняться из каталога рабочей области.
config : Извлекает или устанавливает значения Angular конфигурации.
doc (d) : Открывает официальную документацию Angular (angular.io) в браузере и выполняет поиск по заданному ключевому слову.
e2e (e) : Создает и обслуживает приложение Angular, затем запускает сквозные тесты с использованием Protractor.
generate (g) : Генерирует и / или изменяет файлы на основе схемы.
help : Список доступных команд и их краткое описание.
lint (l) : Запускает инструменты проверки кода приложения Angular в данной папке проекта.
new (n) : Создает новое рабочее пространство и начальное приложение Angular.
run : Запускает пользовательскую цель, определенную в вашем проекте.
serve (s) : Создает и обслуживает ваше приложение, перестраивая изменения файла.
test (t) : Запуск модульных тестов в проекте.
update : Обновляет ваше приложение и его зависимости. Подробнее смотрите https://update.angular.io/
version (v) : Вывод Angular версии CLI.
xi18n : Извлекает i18n из исходного кода.
Генерация проекта
Вы можете использовать CLI для быстрой генерации вашего Angular проекта, выполнив следующую команду в интерфейсе командной строки:
Как упоминалось ранее, CLI спросит вас, хотите ли вы добавить Angular Routing и вы можете ответить, введя y (Да) или n (Нет), что является вариантом по умолчанию. Он также спросит вас о формате таблицы стилей, который вы хотите использовать (например, CSS). Выберите ваши варианты и нажмите, Enter чтобы продолжить.
После этого ваш проект будет создан со структурой каталогов и набором конфигураций и файлов кода. Это будет в основном в форматах TypeScript и JSON. Давайте посмотрим роль каждого файла:
Обслуживание вашего проекта
Сначала перейдите в папку вашего проекта и выполните следующие команды:
Теперь вы можете перейти по адресу http://localhost:4200/, чтобы начать играть с вашим frontend приложением. Страница автоматически обновится, если вы измените какой-либо исходный файл.
Генерация Angular артефактов
Если вы хотите добавить свой компонент, директиву или пайп к другому модулю (кроме основного модуля приложения app.module.ts ), вы можете просто поставить перед именем компонента компонент с именем модуля и косой чертой:
my-module это имя существующего модуля.
Вывод
В этом посте мы увидели, как установить Angular CLI на нашу машину для разработки, и мы использовали его для инициализации нового Angular-проекта с нуля.
Мы также видели различные команды, которые вы можете использовать во время разработки вашего проекта для генерации Angular артефактов, таких как модули, компоненты и сервисы.
Как установить Angular на Windows 7
Привет, это должно быть довольно просто, но я застрял. Я установил buildbot (0.9.06b) на свой компьютер с Windows 7. Мне удалось запустить его, однако, когда я пытаюсь отобразить веб-страницу (IE8), я получаю сообщение об ошибке Angular not defined. Это была совершенно новая оконная коробка, и я не был слишком удивлен. Я загрузил исполняемый файл NodeJS и запустил его на компьютере, чтобы установить Node. Затем я перешел на веб-сайт Angular, загрузив zip-файл, но я не уверен, что делать дальше? Я старался
И несколько вариантов, например, указание версии, разархивирование файла. Но все равно не могу установить. Моя машина защищена брандмауэром, поэтому она не может просто выйти в Интернет и получить больше информации. Все должно работать локально. Как мне установить Angular? Как я могу проверить, что Angular установлен?
2 ответа
TL; DR
Ознакомьтесь с этим репозиторием github для примера работающего приложения, использующего Node, Angular, Express и Bower.
Причина, по которой вы получаете сообщение Angular not defined, заключается в том, что вы не обслуживаете Angular со своего веб-сервера для клиента.
Вот пример того, как обслуживать Angular из Node.js
В этом примере используются только Node.js, Express, EJS (для рендеринга Express View Engine), Bower и Angular.
Структура каталога
Для того, чтобы это работало, вам действительно нужно иметь запущенный веб-сервер, который будет обслуживать файлы, которые вы ищете, когда вы их вызываете. Вы можете сделать это с помощью Express.
Теперь все, что вам нужно сделать, это node server.js и посетить ваш сайт по адресу localhost или в другом месте, которое вы указали, и вы должны быть готовы к работе.
Вы можете легко установить angular, используя следующие шаги:
1> Angular требует Node.js версии 8.x или 10.x., проверьте версию node.js по-
2 & gt; Установите node.js, перейдите на nodejs.org.
5> Хотите добавить маршрутизацию Angular? Нет
6> Какой формат таблицы стилей вы хотите использовать? CSS
7> Перейти в папку рабочего пространства
9 & gt; открывает в браузере страницу http: // localhost: 4200 /.
Данный материал является частью цикла статей «Frontend приложение на Angular». Не забудьте посмотреть другие статьи по этой теме 🙂
Установка Angular CLI и запуск нового проекта
После завершения установки мы собираемся создать новый проект.
Откройте код Visual Studio и в окне терминала ( CTRL+
) перейдите по пути, по которому вы хотите разместить свой проект, и выполните команду:
Создание проекта займет некоторое время. После завершения процесса создания мы собираемся открыть папку проекта внутри нашего редактора:
Сторонние библиотеки как часть подготовки проекта Angular
Мы собираемся использовать библиотеку начальной загрузки для стилизации, поэтому давайте установим ее с помощью команды:
После установки библиотеки начальной загрузки мы собираемся установить для нее определения типов. Для установки введите эту команду:
Сразу после этого давайте импортируем это определение типа в файл tsconfig.app.json :
Чтобы установить библиотеку JQuery, введите следующую команду:
Для типов JQuery мы должны выполнить:
Вот так должен выглядеть массив скриптов в файле angular.json:
И измените импорт для типов:
Для установки JQueryUI выполните:
а для типов выполнить:
Вот так должны выглядеть стили и массив скриптов:
Импорт для типов должен выглядеть так:
На этом установка зависимостей завершается.
Теперь все библиотеки установлены и импортированы в нужные файлы.
Следующим шагом будет добавление наших компонентов в проект.
Компоненты в Angular
Загляните в файл app.component.ts:
В этом файле мы собираемся импортировать необходимые модули, компоненты и сервисы. Мы собираемся использовать массив объявлений для импорта наших компонентов и массив imports для импорта наших модулей. Также мы собираемся использовать массив провайдеров для регистрации наших сервисов.
Создание нового компонента
Чтобы создать новый компонент с именем Home, давайте выполним следующую команду:
Теперь мы можем проверить Home component :
Подробнее про App.Module
Итак, как мы видим, Angular CLI создает все это за нас.
Хотя одного модуля достаточно для всего приложения, мы все равно хотим создать больше модулей.
Модули проще поддерживать, а также большее количество модулей дает нам преимущество в виде отложенной загрузки контента. Это означает, что наше приложение будет загружать только контент, связанный с этим конкретным модулем, на который мы указываем, а не все приложение.
Дополнительный контент в компоненте Home
Давайте изменим файл компонента Home:
Затем добавим новый класс в файл home.component.css :
Чтобы продолжить, изменим файл home.component.html :
Заключение
Прямо сейчас у нас есть рабочий компонент и приложение Angular, которое вы можете запустить в своем браузере. Но это только начало. У нас впереди долгий путь, потому что есть еще много важных функций Angular, которые нужно ввести в проект.
Прочитав этот пост, вы узнали:
Спасибо за чтение и надеюсь, что вы нашли в нем что-то полезное.
В следующей статье, мы покажем вам, как создать навигацию в проекте, а также как использовать маршрутизацию.
Первое приложение на Angular¶
В предыдущей теме были рассмотрены начальная информация об Angular и установка необходимых инструментов и настройка конфигурации для работы с фреймворком. Теперь же создадим первое приложение.
Для написания приложений нам потребуется обычный текстовый редактор, хотя можно использовать специальные среды программирования, как Visual Studio, Netbeans, WebStorm и другие.
Кроме того, для запуска приложения Angular потребуется веб-сервер. В качестве веб-сервера опять же можно использовать множество различных серверов — Apache, IIS, NodeJS и т.д. В данном случае мы будем опираться на NodeJS.
Также добавим в папку проекта новый файл tsconfig.json :
Как было уже описано в прошлой теме, файл package.json устанавливает пакеты и зависимости, которые будут использоваться проектом.
Файл tsconfig.json устанавливает конфигурацию для компилятора TypeScript.
Для сборки проекта будем использовать сборщик Webpack, поэтому также определим в папке проекта файл webpack.config.js :
После создания этих трех файлов в папке проекта откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd :
В каталог src/app добавим новый файл, который назовем app.component.ts и который будет иметь следующий код:
В самом классе компонента определяется начальный список покупок, который будет выводиться на страницу:
И также в классе определен метод добавления в этот список:
Для вывода покупок здесь определен большой шаблон. Вообще подобные большие шаблоны стоит выносить в отдельные файлы, чтобы сделать код компонента проще. Но в нашем случае пусть все пока будет определено в самом компоненте.
В самом шаблоне для вывода данных из массива items в таблицу предусмотрена директива:
Чтобы задействовать этот компонент, добавим в каталог src/app файл модуля app.module.ts :
Уровнем выше в каталоге src определим файл main.ts для запуска проекта:
В конце определим главную страницу index.html в корневой папке проекта:
В итоге у нас получится следующая структура проекта:
Теперь запустим проект. Для этого в командной строке (терминале) перейдем к папке проекта и затем выполним команду npm run dev :
После этого в веб-браузере будет отображена таблица с покупками и форма для добавлени новой покупки: