Мы будем использовать Angularjs и начальную загрузку для разработки примера фронтального приложения. Благодаря этой простой практике проекта мы приведем всех во дворец фронтального развития AngularJS и представим вам некоторые знания:
1. MVC Основы, посредством примеров проектов, позвольте каждому иметь предварительное понимание применения модели проектирования MVC.
2. Создайте наше первое приложение AngularJS. Благодаря разработке практического варианта использования каждый может получить определенное восприятие понимания фронтального развития.
3. Предварительное понимание трех наиболее важных компонентов AngularJS, а именно модели, представления и контроллера.
4. Предварительное понимание использования объектов AngularJS.
Основное введение в режим MVC:
MVC - это модель архитектуры пользовательского интерфейса. Его цель состоит в том, чтобы разложить функции приложений на специальные модули, реализовать повторную способность модулей, уменьшить связь между модулями и повысить надежность системы. Режим MVC в основном разделен на три части:
Модель: используется для хранения системных данных
Просмотр: используется для реализации интерфейса пользовательского интерфейса системы
Контроллер: используется для подключения модели и просмотра.
На мой взгляд, лучший способ учиться - это практика. Мы разработаем пример приложения фронта. В этом примере, с одной стороны, мы можем углубить наше понимание структуры AngularJS, и в то же время мы также можем почувствовать, как модель MVC встроена в процесс разработки.
Введение приложения (путь кода: http://xiazai.vevb.com/201608/yuanma/bootstrap-mooc(vevb.com).rar)
Мы сделаем веб -приложение, которое угадывает номера, с интерфейсом следующим образом:
Фон приложения будет случайным образом генерировать случайное число с диапазоном от 1 до 1000. Пользователь входит в угаданный номер в текстовом поле. Если ввод правильный, приложение появится в рамках зеленой подсказки ниже. Если это неправильно, например, входной номер больше или меньше, чем число, сгенерированное фоном, приложение будет всплыть соответствующую подсказку, например:
Числа, показанные внизу, указывают на то, сколько раз мы догадались.
Структура каталога кода всего приложения заключается в следующем:
Поскольку в настоящее время мы работаем над простым примером приложения, мы собираем код каждого модуля вместе. В будущем, когда мы создаем крупномасштабные фронтальные приложения, мы будем очень осторожны, чтобы организовать структуру каталогов кода всего проекта.
В композиции файла, показанном на рисунке выше, Angular.js - это фреймворк -файл, на котором мы полагаемся на разработку приложений, Bootstrap.min.css - это файл библиотеки интерфейсов, используемый для разработки интерфейса пользовательского интерфейса, и NumberGuessing.html будет основным файлом приложения, который мы хотим разработать. Далее мы добавим код в numbergessing.html шаг за шагом и постепенно увеличим функции приложения.
Прежде всего, нам нужно сделать простой шаблон HTML. На этом шаблоне мы можем медленно добавлять функции. Код шаблона выглядит следующим образом:
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> угадайте номер! src = "angular.js"> </script> </body> </html>
В приведенном выше коде шаблона обратите внимание, что существует строка "Meta ... charset =" utf = 8 "
Цель этой линии - позволить браузеру правильно отображать китайский. Если эта линия недоступна, браузер будет отображать китайский. В шаблоне мы сначала представляем код Framework и код библиотеки интерфейса пользовательского интерфейса, которые будут использоваться позже. После того, как это сделано, мы загружаем его в браузер, чтобы увидеть, есть ли ошибки. Если это правильно, то, что мы сейчас видим, является пустым:
Далее мы разработаем код фонового логики приложения, и сначала мы определим несколько переменных для использования:
OriginalVal, используемый для хранения сгенерированных случайных чисел
USERGUESS, храните предполагаемый номер, введенный в настоящее время пользователем
numoftries, записывайте, сколько раз пользователь пробовал
Отклонение: Запишите разницу между номером, введенным пользователем, и фоновым случайным числом. Если номер, введенный пользователем, велик, то определение> 0; Ввод небольшой, определение <0; Если ввод правильный, то определение == 0
Реализация модуля контроллера
Контроллер используется для подключения двух модулей модели и представления, а бизнес -логика системы также реализована в контроллере. Когда пользователь выполняет некоторые операции на интерфейсе, такие как нажатие кнопки и ввод содержимого, контроллер получает соответствующую информацию со стороны просмотра, а затем контроллер запускает соответствующую логику обработки событий. Например, пользователь вводит число в интерфейсе и нажимает кнопку OK, контроллер получает входное значение из представления, а затем извлекает случайное число, сгенерированное приложением из модели, сравнивает его с двумя хэтчбеком и возвращает результат сравнения с представлением. В представлении отображаются соответствующие изменения интерфейса на основе возвращаемого значения отклонения. Посмотрим, как реализовано логическое тело контроллера:
Функция ugportHeNumberController ($ scope) {$ scope.verifyguess = function () {$ scope.deviation = $ scope.originalval - $ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializegame = function () {$ scope.numoftries = 0; $ scope.originalval = math.floor ((math.random () * 1000) + 1); $ scope.userguess = null; $ scope.deviation = null; } $ scope.initializegame (); }Функция wagingTherController устанавливает числовые свойства объекта модели. Значение этих значений было упомянуто ранее. В то же время эта функция контроллера также получает два интерфейсных вызова, один из них является проверкой. Когда кнопка подтверждения в интерфейсе нажимается, модуль просмотра позвонит в интерфейс, чтобы определить, правильны ли данные, введенные пользователем. В то же время вызов будет обновлять значения двух атрибутов, отклонений и числа.
Инициализация Game используется для инициализации всего системного приложения, сначала генерируя случайные числа, а затем инициализацию некоторых переменных для пустых.
В нашей функции корпуса контроллера передается параметр $. Это в основном эквивалентно М в режиме MVC, который является моделью. Это похоже на базу данных, специально используемой для хранения данных приложений и логического кода. Как вы можете видеть, в вызове инициализации Game контроллер помещает NumOftries, OriginalVal и другие данные в объект $ Scope. В вызове VerifyGuess он получает эти данные от $ Scope для расчета и модификации.
После того, как приведенный выше код контроллера добавлен к нашему шаблонному номеру файла gunguessing.html, результат заключается в следующем:
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> угадайте номер! src = "angular.js"> </script> <script type = "text/javascript"> function uargThenBercontroller ($ scope) {$ scope.verifyguess = function () {$ scope.deviation = $ scope.originalval - $ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializegame = function () {$ scope.numoftries = 0; $ scope.originalval = math.floor ((math.random () * 1000) + 1); $ scope.userguess = null; $ scope.deviation = null; } $ scope.initializegame (); } </script> </body> </html>Приложение Просмотр приложения дизайн интерфейса
View, то есть представление в MVC, на самом деле отображает данные в модели через графический интерфейс. Наше текущее приложение является простым и основываясь на принципе простоты, пользовательский опыт дизайна интерфейса может быть не очень хорошим, но этого достаточно, чтобы быстро понять, как использовать Angularjs и начальную загрузку, чтобы быстро создать интерфейс переднего интерфейса для программы.
Давайте посмотрим на конструкцию интерфейса и интегрируем логику контроллера и интерфейса:
<body ng-app = "app"> <div ng-controller = "vageThenumberController"> <h2> угадайте число! ng-click = "verifyguess ()"> Подтвердить </button> <button ng-click = "initiazegame ()"> return </button> <p> <p ng-she-shef = "deviation <0"> MR., Вы станете слишком высоко! </p> <p ng-shef = "deviation> 0"> My Man, если у вас меньше, добавьте больше очков, добавьте больше очков.
C в MVC, то есть контроллер, представляет собой мост между интерфейсом (представление) и данными (модель). Чтобы связать эти три, нам нужно внедрить всех их в рамки AngularJS, а затем полагаться на структуру AngularJS для достижения взаимосвязи между тремя.
Чтобы встроить представление в AngularJS, приведенный выше оператор кода:
<body ng-app = "app">
NG-APP Это свойство говорит о том, что HTML-код в теге тела будет встроен в качестве части представления в структуру AngulaJS, а «приложение» используется в качестве значения свойства NG-APP для информирования платформы AngularJS для загрузки модуля с именем «приложение». Этот модуль эквивалентен складу хранения. Мы разбиваем различные функции фронтального применения на различные единицы. Эти единицы хранятся в модуле под названием App. Контроллер и модель также являются функциональными единицами. Позже мы увидим, что они будут добавлены в модуль под названием App. Структура AngularJS выберет два единицы контроллера и модели из этого модуля для использования.
Далее мы сначала поместили этот модуль, называемый APP, в рамку AngularJS, код заключается в следующем:
<script type = "text/javascript"> angular.module ('app', []) function ugporthenumberController ($ scope) {....} <Script>Таким образом, у нас есть модуль, называемый APP в рамках AngularJS, и мы связываем модуль с интерфейсом через ng-app = "app". Далее нам нужно поместить блок контроллера в модуль приложения, код заключается в следующем:
<script type = "text/javascript"> angular.module ('app', []) .controller ('ugegyThenUmberController', ugportHenumberController); Функция ugporthenemberController ($ scope) {....} </script>Функция Angular.Module генерирует и возвращает объект модуля. Этот объект содержит интерфейс, называемый контроллером. Благодаря этому интерфейсу функциональный блок контроллера, который мы разработали, может быть помещен в модуль. Из приведенного выше кода мы видим, что мы помещаем контроллер в модуле. Название этого блока - предположение, что является первым входным параметром функции контроллера. Второй входной параметр - это функциональная логическая корпус блока контроллера, которая является функцией wargithenmerbontroller, которую мы разработали ранее.
После завершения вышеуказанных шагов наше приложение разработано. В настоящее время наш HTML может быть загружен из браузера, так что вы можете увидеть конкретный эффект.
Перед концом давайте углубимся в код, чтобы увидеть, как AngularJS интегрирует различные модули, чтобы сформировать полное фронтальное приложение. В коде есть некоторые специальные символы и атрибуты, специальные символы, такие как: {{}}, и специальные атрибуты, такие как: ng-app, ng-controller и т. Д. В угловом контексте, {{и}} объединяются вместе, называются интерполяционными символами, а свойства в форме Ng-* называются угловые инструкции. Угловой преобразование переменных, зажатых в {{и}} в значения, соответствующие переменным, например, следующий фрагмент кода:
<p> количество раз, как вы уже догадались: <pan> {{numoftries}} </span> <p>
NumOftries означает, сколько раз пользователь пытался угадать. Если значение Numoftries равно 0, AngularJs выберет вышеуказанный код как:
<p> количество раз, как вы догадались: <pan> 0 </span> <p>
Браузер сделает интерфейс к следующей ситуации:
Директива AngularJS является сложной технической точкой знания. В последующем обсуждении мы обсудим это подробно. Здесь мы кратко вводим роль директивы AngularJS, которая в основном расширяет синтаксисную функцию HTML. Директивы являются самыми мощными частями в рамках AngularJS. Давайте кратко представим директиву AngularJS, используемой в коде.
NG-Controller: эта директива соединяет контроллер и представление, представленное HTML. Только с этой директивой может быть доступ к переменным и интерфейсам, установленным контроллером. Вы можете попытаться поместить его в код.
ng-model = ng-controller = ”OvershyTherController»
Удалите это предложение и посмотрите, каков результат.
NG-модель: двунаправленное связывание переменных в модели с элементами управления, например:
<input type = "number" ng-model = "userguess"/>
Этот оператор связывает переменную userguess в модели с входным текстовым полем в интерфейсе. Когда значение в текстовом поле меняется, соответствующее значение USERGUES также меняется. Напротив, если значение предположения изменяется в фоновом режиме, содержание в текстовом поле также меняется соответственно.
ng-click: подключите события щелчка, сгенерированные интерфейсом с логикой обработки контроллера, например:
<Кнопка ng-click = "veserifyguess ()"> Подтвердить </button>
Приведенный выше код подключает кнопку «ОК», нажимая событие с функцией verifyguess () контроллера. Как только кнопка нажата, функция будет выполнена.
NG-SHOW: используется для управления, используется ли элемент управления для управления представлением для отображения. Если значение соответствующего выражения NG-Show верно, будет отображаться элемент управления. Если это ложь, элемент управления не будет отображаться. Например:
<p ng-shef = "отклонение <0"> MR., Ваша ставка слишком высока! </p>
Функция приведенного выше кода заключается в том, что когда значение определения переменной меньше 0, содержимое элемента параграфа будет отображаться на интерфейсе.
AngularJS-это мощная, но относительно сложная фронтальная структура развития. Роль нашего примера заключается только в том, чтобы помочь всем понять мощные функции AngularJS и сначала получить определенное понимание восприятия, чтобы заложить на нас прочную основу для рационального анализа и освоения всей технологии фронтального развития AngularJS в будущем.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.