Средний
10 уроков
(1 час 24 минуты)
Курс
Основы Angular.js
AngularJS — JavaScript-фреймворк с открытым исходным кодом. Данный видеокурс предназначен как для тех, кто совсем не знаком c AngularJS, так и для тех, кто уже знаком с этим фреймворком.

#1 — Установка и основы.

На этом видеоуроке мы с вами начнем установку PhoneCat приложения для дальнейшего освоения фреймворка и рассмотрим самые основные понятия в AngularJs.

Начнем с подготовительной части.

Закачка angular-phonecat

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

Для этого воспользуемся командой:

И зайдем теперь в сам проект при помощи команды:

Установка Node.js

Для работы с нашим будущим приложением нам также потребуется Node.js v0.10+

Можете скачать Node.js установщик с их сайта http://nodejs.org/download/.

После проверить версию можно командой:

Если версия нас удовлетворяет, то нужно поставить пакетный менеджер при помощи соответствующей команды

Запуск Web Server

После запуск нашего сервера будет производиться командой:

И наше приложение будет доступно по адресу: http://localhost:8000/app/index.html.

Сброс приложения на 0 шаг

После того как мы наигрались с будущим нашим приложением, его нужно сбросить на 0 шаг, чтобы мы могли начать с самого начала

P.S. Дополнительные уроки, которые могут быть полезны для лучшего понимания данного видеоурока

Bower twitter — пакетный менеджер для веба — пакетный менеджер NPM, который нам может понадобиться для работы с PhoneCat-приложением.

Bower twitter — пакетный менеджер для веба — здесь видео для работы с Git Bash, о котором рассказывается на этом видеоуроке.

Материалы к уроку:
Делись:

Оставь комментарий!

16 thoughts on “#1 — Установка и основы.

  1. isiv:

    Пожалуйста, в слове «КаталОг» ударение на О.

    1. )) Хорошо, послежу за этим))

  2. Андрей:

    Не подскажете, у меня нет папки bower_components, как бы я понимаю что это подключение беблиотеки но на каждом уроке подключать вручную как то не удобно :((

    1. Ну во-первых, мы только один раз подключим нужные нам компоненты, и будем с ними работать на протяжении всего курса.)
      Ну а во-вторых, Вы можете попробовать выкачать полную версию с гита
      git clone git://github.com/angular/angular-phonecat.git
      Но после того как Вы её скачали, Вы заходите в терминале в эту папку и запускаете npm install иначе bower_components вы не увидите!
      Если вы по какой-то причини не сделали npm install то и папки этой не будет.
      Надеюсь смог вам помочь.)

      1. Денис Олещенко:

        npm install выдает кучу ерроров…
        и говорит что нету доступа к bower
        как быть?

        1. Денис Олещенко:

          в общем я не знаю как,но путем магических и на 40% не понятных мне команд в консоле у меня на убунту все заработало и команда
          npm install сработала без ошибок

  3. Игорь:

    Супер! =))) Спасибо, ждем продолжения!))

  4. Не могу запустить npm start
    заваливает ошибками
    ОС: Ubuntu 15 x32bit
    а на видео все так просто
    npm nodejs bower установлены последних стабильных доступных версий

  5. Aleksei Privezentcev:

    Ребят, объясните, что это, пожалуйста. Вроде те модули, что требовались, установились. Ну, по крайней мере, я вижу папки этих модулей в нашем проекте. Но в чем все же ошибка? Почему столько ероров и варнингов? Заранее спасибо!

  6. Nevelim:

    Привет Ребят кидаю debug помогите!
    Проблема такая все делаю по курсу но что то пошло не так!
    При выполнений npm start происходит такая вещь!

    0 info it worked if it ends with ok
    1 verbose cli [ ‘C:\\Program Files\\nodejs\\node.exe’,
    1 verbose cli ‘C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js’,
    1 verbose cli ‘start’ ]
    2 info using npm@3.6.0
    3 info using node@v5.6.0
    4 verbose run-script [ ‘prestart’, ‘start’, ‘poststart’ ]
    5 info lifecycle angular-phonecat@0.0.0~prestart: angular-phonecat@0.0.0
    6 verbose lifecycle angular-phonecat@0.0.0~prestart: unsafe-perm in lifecycle true
    7 verbose lifecycle angular-phonecat@0.0.0~prestart: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\angular\angular-phonecat\node_modules\.bin;C:\Users\Ivanoff\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\local\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\Ivanoff\bin;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\AMD\ATI.ACE\Core-Static;C:\Program Files (x86)\Skype\Phone;C:\Program Files\nodejs;C:\Users\Ivanoff\AppData\Roaming\npm;C:\Program Files\Git\usr\bin\vendor_perl;C:\Program Files\Git\usr\bin\core_perl
    8 verbose lifecycle angular-phonecat@0.0.0~prestart: CWD: C:\angular\angular-phonecat
    9 silly lifecycle angular-phonecat@0.0.0~prestart: Args: [ ‘/d /s /c’, ‘npm install’ ]
    10 silly lifecycle angular-phonecat@0.0.0~prestart: Returned: code: 0 signal: null
    11 info lifecycle angular-phonecat@0.0.0~start: angular-phonecat@0.0.0
    12 verbose lifecycle angular-phonecat@0.0.0~start: unsafe-perm in lifecycle true
    13 verbose lifecycle angular-phonecat@0.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\angular\angular-phonecat\node_modules\.bin;C:\Users\Ivanoff\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\local\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\Ivanoff\bin;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\AMD\ATI.ACE\Core-Static;C:\Program Files (x86)\Skype\Phone;C:\Program Files\nodejs;C:\Users\Ivanoff\AppData\Roaming\npm;C:\Program Files\Git\usr\bin\vendor_perl;C:\Program Files\Git\usr\bin\core_perl
    14 verbose lifecycle angular-phonecat@0.0.0~start: CWD: C:\angular\angular-phonecat
    15 silly lifecycle angular-phonecat@0.0.0~start: Args: [ ‘/d /s /c’, ‘http-server -a 0.0.0.0 -p 8000’ ]
    16 silly lifecycle angular-phonecat@0.0.0~start: Returned: code: 1 signal: null
    17 info lifecycle angular-phonecat@0.0.0~start: Failed to exec start script
    18 verbose stack Error: angular-phonecat@0.0.0 start: http-server -a 0.0.0.0 -p 8000
    18 verbose stack Exit status 1
    18 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:232:16)
    18 verbose stack at emitTwo (events.js:100:13)
    18 verbose stack at EventEmitter.emit (events.js:185:7)
    18 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
    18 verbose stack at emitTwo (events.js:100:13)
    18 verbose stack at ChildProcess.emit (events.js:185:7)
    18 verbose stack at maybeClose (internal/child_process.js:827:16)
    18 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
    19 verbose pkgid angular-phonecat@0.0.0
    20 verbose cwd C:\angular\angular-phonecat
    21 error Windows_NT 6.1.7601
    22 error argv «C:\\Program Files\\nodejs\\node.exe» «C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js» «start»
    23 error node v5.6.0
    24 error npm v3.6.0
    25 error code ELIFECYCLE
    26 error angular-phonecat@0.0.0 start: http-server -a 0.0.0.0 -p 8000
    26 error Exit status 1
    27 error Failed at the angular-phonecat@0.0.0 start script ‘http-server -a 0.0.0.0 -p 8000’.
    27 error Make sure you have the latest version of node.js and npm installed.
    27 error If you do, this is most likely a problem with the angular-phonecat package,
    27 error not with npm itself.
    27 error Tell the author that this fails on your system:
    27 error http-server -a 0.0.0.0 -p 8000
    27 error You can get information on how to open an issue for this project with:
    27 error npm bugs angular-phonecat
    27 error Or if that isn’t available, you can get their info via:
    27 error npm owner ls angular-phonecat
    27 error There is likely additional logging output above.
    28 verbose exit [ 1, true ]

  7. Denisochekk:

    у меня та же проблема…помогите!

    1. A_Steb:

      Зарегался только чтобы попытаться помочь)
      Вообщем сам просидел с это проблемой сейчас, на данный момент осознал что проблема в karma и http-server. С karma не удалось пока решить проблему, и я выпилил из package.json эти пакеты. Смирился с тем что тестировать пока не удастся. С сервером проблема решается вводом команды «npm install http-server -D». И не уверен что помогло оно, но поставил питон 2.7 вместо третей версии.
      А к автору просьба обновить репозиторий до последних версий пакетов)

  8. Fallen Soul:

    Касательно errors которые выдает консоль после команды npm start:
    1. В файле package.json , в разделе devDependencies, необходимо изменить версию с «http-server»: «^0.6.1», на «http-server»: «^0.9.0»,.
    2. Из папки angular-phonecat удалить папку node-modules. Я удалял прямо в sublime text.
    3. Выполнить команду «npm start», после которой npm установит все модули по новой в папку с проектом. И далее можно смело открывать http://localhost:8000/app/index.html
    У меня все последующие старты были пока без errors.

  9. Fallen Soul:

    Было бы здорово, если бы комментарии выводились наооборот, т.е. актуальные ответы чтоб были сверху. Возможно кто-то не смог решить проблему, не дочитав все комменты до конца.
    Зару большой респект за записи по AngularJs.

Добавить комментарий

Рекомендуемые курсы