Я смотрел видео об angularjs. Видеоконтент объясняет, как создать спа -салон в форме списка TODO (простое приложение страницы). Чтобы улучшить понимание, статья написана ниже для рассмотрения и консолидации.
Подготовить
Angularjs скачать
Это называется загрузка, но на самом деле, если вы можете ссылаться на AngularJS на нашей странице. Там может быть следующий метод.
CDN ускорение
Также возможно использовать внутренние услуги ускорения CDN.
Скопируйте код следующим образом: <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
Метод NPM
Также довольно удобно использовать инструмент управления пакетами Nodejs, в основном он может быть сделан в двух шагах.
Во -первых, введите папку, где мы собираемся написать код.
• Установить AngularJS: NPM Установите Angular
• Представлено для использования на странице:
<!-Этот адрес SRC зависит от вашей собственной ситуации->
<script src = "node_modules/angular/angular.js"> </script>
Обычный путь
Обычный метод состоит в том, чтобы вручную загрузить соответствующие файлы, а затем вручную представить их, потому что он довольно громоздкий. Здесь больше нет повествования.
Загрузка начальной загрузки
Как очень популярная и современная фронтальная рамка, Bootstrap-хит. Скачать адрес
Запас знаний
MVC Архитектура
Core AngularJS принимает архитектуру MVC и приложения, управляемые событиями. Я просто новичок в этом, поэтому я не очень хорошо это понимаю. Если есть какая -либо ошибка, я надеюсь, что блоггер укажет на это.
ng-app
Как дворецкий со всей одной страницы, приложение означает приложение и значение приложения. Наша одностраничная служба действует как приложение.
Вообще говоря, NG-APP должен быть вложенным в качестве родительского контейнера NG-контроллера. В противном случае ожидаемые результаты могут не появиться
NG-Controller
Контроллер, правый человек, применяемый на странице, и существование контроллера упрощает связь между модулями, что делает написание кода более стандартизированным и простым.
нг-модель
Во время обработки модели он обычно связывает и выводится с элементами страницы для достижения эффекта страниц без обновления.
Основа события
ng-click
В нашем одностраничном приложении элементы, которые объявляют об этом атрибуте, имеют функцию событий клика. Что касается того, какую часть функций, которые называются, они фактически связаны с контейнером, где находится элемент.
То есть функция, соответствующая событию Click, представляет собой код, записанный в соответствующем контроллере для выполнения конкретной функции.
Полный код
Подробный код для этого примера размещен ниже
main.js
(function (window) {// зарегистрировать основной модуль приложения var toDoApp = window.angular.module ('todoApp', []); // Зарегистрировать контроллер // window.angular.module ('todoapp') todopp.controller ('maincontroller', ['$ upport ($ function ($ function) В текстовом поле $ scope.text = '' '; $ scope.text.trim (); $ scope.todolist.splice (index, 1); //, чтобы удалить его} // Получить количество завершенных событий и реализовать его в соответствии с выбором флажка // Поскольку страница динамически изменена, вам необходимо использовать функции или просто использовать модель, но это будет немного проблематично $ scope.donecount = function () {/ filater для реализации vare vare = vare vare = vare = vare = vare = vare = vare varc $ scope.todolist.filter (function (item) {return item.done; // return true, чтобы указать, что текущие данные соответствуют условиям, и событие было завершено});Todolist.html
<! Doctype html> <html> <head> <meta charset = "UTF-8"> <Title> AngularJS интегрируйте список задач реализации Bootstrap </title> <!-Введение Bootstrap-> <Link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/couts. rel = "styleSheet"> <style> .container {max-width: 720px; } .done {color: #cca; } .CHECKBOX {MARGIN-RIGHT: 12PX; маржинальный бат: 0; } .done> .checkbox> label> span {text-decoration: line-through; } </style> <script src = "node_modules/angular/angular.js"> </script> <script src = "myjs/app.js"> </script> </head> <body> <div ng-app = "todoApp"> <header> <h1> todo list </h1> <hr> <//hame-(Header> <h1> todo </h1> <hr> </hab> </haf> </haf> </hab> </hab> </hab> ng-controller = "maincontroller"> <!-Для достижения красивого интерфейса используется элемент управления формой-> <form> <input type = "text" ng-model = "text" name = ""> <pan> <button ng-click = "add ()"> add </button> </span> </form> <ul style = " ng-class = "{'dode': item.done}" ng-repeat = "item in todolist"> <button Type = "кнопка" aria-label = "close" ng-click = "delete (item)"> <span aria-hidden = "true"> × </span> <span> close </span> </button> <div> <div> <lab ng-model = "item.done"> <pan> {{item.text}} </span> </label> </div> </li> </ul> <p> Всего <strong> {{todolist.length}} </strong> были выполнены </strong> </p> </spect> </div> </worty> </ht> </ht> </ht> </ht> </ht> </ht>Эффект страницы
Подробное объяснение кода
Самый внешний уровень кода в коде может иметь хороший эффект в качестве временного пространства и предотвратить загрязнение пространства имен.
(function (window) {// что -то сделать}) (окно)Обратите внимание, что последнее (окно) необходимо.
Создайте приложение
// зарегистрировать основной модуль приложения
var todoApp = window.angular.module ('todoApp', []);
Создать контроллер
todoapp.controller ('maincontroller' // $ scope здесь также играет роль контейнера и объявляет видимый диапазон переменной. Вручную добавить строку списков $ scope.todolist = [{text: 'angularjs', dode: false}, {text: 'bootstrap', dode: false}];Улучшить функции функций
// Добавить функцию, чтобы ответить на взаимодействие $ scope.add = function () {var text = $ scope.text.trim (); if (text) {$ scope.todolist.push ({text: text, dode: false}); $ scope.text = ''; }} // Нажмите на событие ответа $ scope.delete = function (todo) {var index = $ scope.todolist.indexof (todo) $ scope.todolist.splice (index, 1); // Удалить его} // Получить число выполненных событий и реализовать его в соответствии с выбором. Собственность. будет немного неприятным $ scope.donecount = function () {// Использовать фильтр для реализации var temp = $ scope.todolist.filter (function (item) {return item.done; // return true, чтобы указать, что текущие данные соответствуют условиям, и событие было завершено}); возврат temp.length; }Суммировать
Там не так много кодов и глубоких мыслей.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.