Ладно, ладно, я слышал, как ты говоришь.
Давай займемся этим,
покажи мне код.
Действительно, мы начнем с создания
нашего углового приложения в этом самом первом упражнении.
Мы будем использовать интерфейс угловой командной строки,
Угловой CLI для строительных лесов нашего углового приложения в этом упражнении.
Затем, когда мы проходим через остальные упражнения в этом курсе,
мы построим наше угловое приложение шаг за шагом.
Угловой CLI - очень удобный способ создания углового приложения.
Угловое приложение, созданное угловым CLI, следует стилю
руководства, предложенные разработчиками Angular faramework.
Мы можем использовать Угловой CLI для выручки
многие части нашего углового приложения, включая компоненты,
услуги нашего углового приложения.
Угловой CLI также поставляется со своим собственным встроенным сервером,
, который мы можем использовать для обслуживания углового приложения, как мы создаем его,
, а затем просмотреть наше угловое приложение в
браузер в качестве предварительного просмотра нашего приложения.
Как и когда мы вносим изменения,
изменения будут отражены сразу в браузере.
Вот почему я решил использовать угловой CLI как
подход для построения нашего углового приложения в этом курсе.
Для начала перейдите в удобное расположение на
своего компьютера и создайте папку с именем Angular.
Итак, я собираюсь начать переходить в папку с документами Coursera.
Вот где я храню все мои файлы для моего курса Coursera,
, а затем я создаю папку
с именем Angular, а затем перейду в папку Angular.
Теперь мы собираемся создать наше угловое приложение в этой папке.
Первым шагом, который мы делаем в этом упражнении, является установка углового интерфейса командной строки.
Итак, в подсказке
тип npm install -g @angular /cli @ 6.2.1.
Теперь, когда я устанавливаю модуль NPM,
я также буду указывать точную версию модуля NPM, который я устанавливаю.
Я настоятельно призываю вас установить
ту же версию модуля NPM, чтобы вы могли пройти
остальные упражнения без каких-либо проблем с упражнениями.
Итак, в этом случае я устанавливаю версию 6.2.1 Angular CLI.
Теперь, если вы делаете это на Mac или Linux,
не забудьте sudo перед установкой npm.
Установка займет некоторое время.
Таким образом, как только он будет завершен,
, тогда Angular CLI будет доступен в вашей командной строке.
После завершения установки
вы можете проверить и увидеть, что установлен угловой интерфейс командной строки.
После установки,
может потребоваться перезапустить терминал, чтобы
для инструментов Angular CLI были доступны в запросе.
Угловой интерфейс командной строки доступен, набрав ng в строке
, а затем набор дополнительных инструкций.
Итак, первая команда, которую мы попробуем, это ng help,
и это будет список всех других команд
, что Угловой CLI позволяет нам выполнить.
Ng, как вы видите, будет префиксом для
всех команд углового интерфейса командной строки, которые вы будете использовать в этом курсе.
Это перечисляет набор всех опций, которые предоставляет нам Угловой интерфейс командной строки.
Мы узнаем много из этих команд, как мы пройдем через оставшуюся часть этого курса.
Чтобы создать новое угловое приложение,
я собираюсь создать это приложение в
Угловая папка в подпапке с именем conFusion.
Если вы прошли предыдущий курс на Bootstrap четыре,
вы поймете, почему я называю это приложение как conFusion.
Итак, в подсказке,
введите ng new conFusion,
, а затем я бы использовал sass как
фреймворк стилей CSS для моего углового приложения.
Итак, я указываю минус стиль, равный SCSS,
и нажимаю Return, и потребуется некоторое время для
углового приложения, чтобы создать в текущей папке.
Как только ваше приложение будет установлено,
давайте использовать встроенный сервер из
Angular CLI, чтобы скомпилировать наше угловое приложение и начать обслуживать его.
Перейдите в папку conFusion,
и в подсказке введите ng serve,
и дождитесь, пока сервер Angular Live Development запустит
и создайте наше угловое приложение и начните обслуживать приложение.
После завершения,
, то вы заметите, что это приложение будет доступно, набрав
a http://localhost:4200 в адресной строке нашего браузера.
Вы можете оставить сервер разработки работать непрерывно.
Когда вы вносите изменения в угловое приложение,
сервер автоматически перекомпилирует изменения, а затем
начнет обслуживать обновленное приложение Angular в вашем браузере.
Таким образом, это был бы очень хороший способ смотреть вживую изменения, которые вы делаете
в своем угловом приложении, сразу отражаясь
в браузере, где вы просматриваете свое угловое приложение.
Если вы заходите в браузер и получите доступ к угловому приложению на localhost:4200,
вы увидите, что приложение начинает работать,
и он будет обслуживать этот набор слов в наш браузер.
Итак, это очень простое приложение, которое голые кости Угловое приложение
вы начали с разработки вашего углового приложения.
Мы собираемся построить поверх этого приложения с лесом Angular CLI,
, внедрив различные функции в рамках этого курса.
Если вы планируете использовать Git для своего Angular приложения для управления версиями,
, тогда на этом этапе
может быть хорошей идеей инициализировать ваш репозиторий Git.
Угловой CLI автоматически выполняет инициализацию вашего репозитория Git,
и, таким образом, первую фиксацию с первоначальным сообщением в репозиторий Git.
Давайте проверим статус нашего репозитория Git.
Позволяет проверить, набрав git log
одну строку, и вы увидите, что
первоначальная настройка была зафиксирована в нашем репозитории Git.
Теперь мы можем начать работу над нашим угловым приложением, которое мы
выложены в эту папку здесь.
Если вы решите синхронизировать свой репозиторий Git с онлайн-репозиторием,
, пожалуйста, убедитесь, что ваш онлайн-репозиторий является частным репозиторием.
Bitbucket позволяет создавать бесплатные частные репозитории.
Итак, продолжайте и настройте свой репозиторий Git на Bitbucket.
С этим мы завершаем наше упражнение.
В этом первом упражнении
мы установили угловой интерфейс командной строки.
Затем мы выстроили наше угловое приложение, над которым мы собираемся работать
для дальнейшего развития в рамках остальных упражнений в этом курсе.