Сейчас мы готовимся писать приложение AngularJS - PhoneCat. На этом этапе (шаг 0) вы будете знакомы с важными файлами исходного кода, научитесь запустить среду разработки, содержащую AngularJs Seed Projects, и запустить приложение на стороне браузера.
Введите каталог Angular-PhoneCat и запустите следующую команду:
Кода -копия выглядит следующим образом:
git cakeout -f step -0
Эта команда сбросит рабочий каталог проекта PhoneCat. Рекомендуется запустить эту команду на каждом этапе обучения, изменить число в команде на номер, соответствующий шагу обучения, и команда очистит любые изменения, которые вы внесли в рабочем каталоге.
Запустите следующую команду:
Кода -копия выглядит следующим образом:
Узел Scripts/Web-server.js
Чтобы запустить сервер, терминал командной строки будет предлагать HTTP -сервер, работающий по адресу http: // localhost: 8000. Пожалуйста, не закрывайте терминал. Закрыть терминал закроет сервер. Введите http: // localhost: 8000/app/index.html в свой браузер, чтобы получить доступ к нашему приложению Phonecat.
Теперь, в браузере, вы должны были увидеть наше первоначальное приложение, которое просто, но это означает, что наш проект готов к запуску.
«Ничего здесь ничего здесь!» Отображается в приложении из следующего HTML -кода, который содержит ключевые элементы AngularJS, что именно то, что нам нужно изучить.
app/index.html
Кода -копия выглядит следующим образом:
<! Doctype html>
<html lang = "en" ng-app>
<голова>
<meta charset = "utf-8">
<title> мой html -файл </title>
<link rel = "styleSheet" href = "css/app.css">
<link rel = "styleSheet" href = "css/bootstrap.css">
<script src = "lib/angular/angular.js"> </script>
</head>
<тело>
<p> Здесь ничего {{'' etfo ' +'! '}} </p>
</body>
</html>
Что делает код?
Директива NG-APP:
Кода -копия выглядит следующим образом:
<html lang = "en" ng-app>
Директива NG-APP отмечает сценарий сценария AngularJS. Добавление атрибута ng-app в <html> означает, что весь <html>-это область сценария Angularjs. Разработчики также могут использовать директивы NG-APP на местном уровне, такие как <viv ng-app>, а сценарии AngularJS работают только в этом <div>.
Тег сценария AngularJS:
Кода -копия выглядит следующим образом:
<script src = "lib/angular/angular.js"> </script>
Эта строка кода загружается в сценарий Angular.js. Когда браузер загружает всю страницу HTML, будет выполнен сценарий angular.js. После того, как сценарий Angular.js будет запущен, он будет искать тег HTML, содержащий директиву NG-APP. Этот тег определяет область приложения AngularJS.
Двойные скобки связаны выражение:
Кода -копия выглядит следующим образом:
<p> Здесь ничего {{'' etfo ' +'! '}} </p>
Эта строка кода демонстрирует основную функцию шаблона AngularJS - привязка, которая состоит из двойных скобок {{}} и выражения 'еще' + '!'.
Это связывание говорит AngularJS, что ему нужно вычислить выражения и вставить результат в DOM. На следующих шагах мы увидим, что DOM может быть обновлен в режиме реального времени по мере изменения результатов операции выражения.
AngularJs Expersing Angular Expression-это JavaScript Fronipt, AngularJs Expressions только в рамках AngularJS, а не во всем DOM.
Загрузите приложение AngularJS
Автоматическое загрузка приложений AngularJS через директивы NGAPP - это краткий способ удовлетворения большинства ситуаций. В расширенной разработке, такой как использование сценариев для загрузки приложения, вы также можете использовать Bootstrap для приложений вручную загрузку AngularJS.
В процессе загрузки приложений есть три важных момента:
1. Инжектор будет использовать для создания впрыска зависимостей для этого приложения;
2. Инжектор создаст корневую область в качестве объема нашей модели приложения;
3. AngularJS будет связывать DOM в корневом прицеле, начиная с HTML -тегов, отмеченных NGAPP, и постепенно справляясь с директивами и привязками в DOM.
После того, как приложение AngularJS будет загружено, оно продолжит прослушать события запуска HTML браузера, такие как события щелчка мыши, события нажатия клавиш, входящие ответы HTTP и т. Д., Которые изменяют модель DOM. Как только такие события произойдут, AngularJS автоматически обнаружит изменения и сделает соответствующую обработку и обновления.
Структура вышеупомянутого приложения очень проста. Пакет шаблонов содержит только одну директиву и одну статическую привязку, а модель также пуста. Далее, давайте попробуем немного более сложное приложение!
Что делают эти файлы в моем рабочем каталоге?
Вышеуказанное приложение поступает из проекта AngularJs Seed, мы обычно можем использовать проект AngularJs Seed для создания новых проектов. Проект SEED включает в себя новейшую базу кода AngularJS, библиотеку тестирования, сценарии и простой пример приложения, который содержит базовую конфигурацию, необходимую для разработки типичного веб -приложения.
Для этого урока мы внесли следующие изменения в проект AngularJs Seed:
1. Удалите применение образца;
2. Добавить изображения мобильных телефонов в приложение/IMG/телефоны/;
3. Добавьте файл данных мобильного телефона (JSON) в приложение/телефоны/;
4. Добавьте файлы Bootstrap Twitter в App/CSS/и App/IMG/.
упражняться
Попробуйте добавить новое выражение о математических операциях в index.html:
Кода -копия выглядит следующим образом:
<p> 1 + 2 = {{1 + 2}} </p>
Суммировать
Теперь давайте перейдем к шагу 1 и добавим некоторый контент в веб -приложение.