Создайте свое первое приложение Angular.js в этом руководстве. Узнайте о контроллерах, прицеле и многом другом!
Прочтите статью или посмотрите видео!
Angular.js - это структурный каркас для динамических веб-приложений. Если это сбивает с толку, не волнуйтесь! По сути, это означает, что мы можем расширить синтаксис HTML, чтобы более полно выразить компоненты приложения. Для начала создадим документ index.html и папку js.
Затем мы импортируем фреймворк Angular.js, как мы это делали для Bootstrap и jQuery. В этом руководстве мы будем использовать Angular 1.
В этом руководстве мы создадим приложение со списком дел. Для этого мы создадим файл app.js внутри нашей папки js и напишем строку кода, которая инициализирует наше приложение (также называемое модулем ) для нас.
Чтобы связать наш файл app.js с HTML-кодом, мы свяжем его в index.html. Обычно мы помещаем этот тип импорта ближе к концу тела.
Хотя наш app.js импортирован, еще многое предстоит сделать (без слов). Нам нужно подключить наш модуль ToDoList к нашему HTML-коду. Для этого мы запишем ng-app = ”ToDoList” как атрибут тела. Это означает, что все в теле будет частью приложения ToDoList. Кроме того, этот атрибут называется атрибутом angular, потому что он является частью angular, а не простого HTML.
Затем мы создадим наш контроллер, который будет обрабатывать данные для нашего приложения. Для этого мы создадим папку контроллеров внутри нашей папки js и добавим файл MainController.js.
Теперь мы можем написать код для нашего MainController.
Как и большинство наших файлов, мы импортируем его в наш index.html и помещаем прямо перед закрывающим тегом body.
Теперь, возвращаясь к MainController, мы можем установить некоторые значения в объекте области. На данный момент мы можем думать об объекте области как о чем-то, с чем может взаимодействовать все в нашей программе. view, также известный как index.html, может видеть, что находится в области действия, а наш контроллер может установить, что находится в области действия . Вот как два файла обмениваются данными и могут передавать информацию друг другу - через объект области видимости! Думая таким образом, мы напишем несколько пунктов «списка дел» и поместим их в область действия нашего контроллера.
Здесь мы добавили атрибут списка в область видимости и установили значение этого атрибута в массив, содержащий «Убери мою комнату», «Иди в магазин» и «Изучение взлома интервью по кодированию». Теперь, как наше представление (наш index.html) знает об этом контроллере? Конечно, файл импортирован, но нам нужно сделать еще кое-что. Нам нужно прикрепить его к элементу в HTML-коде. Мы присоединим его, создав div, получив доступ к его атрибуту контроллера ng-controller и присвоив ему значение MainController.
Чтобы получить доступ к элементам списка дел в области, мы можем написать еще код.
фигурные скобки называются манипуляторами, и они указывают на то, что эти элементы поступают из объекта области видимости. Без них наши элементы списка имели бы буквальный текст list [0], list [1] вместо наших фактических элементов списка дел. Обновляя страницу, мы видим элементы в нашем списке!
Однако, оглядываясь на наш код, можно сказать, что это несколько неэффективно и работает только в том случае, если у нас есть ровно три элемента в списке. Вместо этого мы можем использовать угловую директиву под названием ng-repeat для перебора элементов в списке. Мы узнаем больше о директивах позже, а пока просто думайте о них как об инструменте, который помогает сделать наш код более модульным и лаконичным. Мы создадим еще один div и добавим ng-repeat в качестве атрибута.
Здесь мы называем каждую вещь в списке элементом и для каждого элемента помещаем его в тег li. Опять же, мы получаем доступ к атрибуту списка из объекта области, который был установлен в контроллере. Атрибут list имеет значение массива, в котором находятся наши дела. Мы используем директиву ng-repeat, чтобы перебирать элементы и помещать каждый в свой собственный тег li.
И последнее, прежде чем мы уйдем! Мы также можем добавить поле ввода в наш HTML-код, чтобы мы могли добавлять вещи в наш список дел с веб-страницы. Для этого мы напишем еще немного кода в нашем index.html.
При этом создается поле ввода, а ng-model (другая директива angular) привязывает ввод к переменной addToDo. Этот addToDo является атрибутом объекта области действия контроллера, поэтому к нему можно снова получить доступ в файле index.html и в MainController. Мы также создадим кнопку, чтобы при нажатии кнопки элемент ввода добавлялся в список.
Когда мы нажимаем кнопку, запускается функция addItem (), но этой функции еще не существует! Возвращаясь к нашему MainController.js, мы добавим еще немного кода.
Здесь мы добавляем новый атрибут в нашу область действия, addItem, и присваиваем ему значение функции. Внутри функции мы получаем доступ к нашему списку и нажимаем на переменную addToDo, которая имеет значение поля ввода из index.html. Теперь, если мы обновим нашу страницу и попробуем добавить задачу… мы сможем!
Однако, когда мы обновим страницу, наши добавленные данные исчезнут, потому что мы их нигде не сохранили. Что-то думать о. В учебнике на следующей неделе мы поговорим больше о angular.js и перейдем к директивам, службам, маршрутизации и доступу к конечной точке из вашего кода! Увидимся в следующий раз.
То, что нужно запомнить:
<!-- How to Import Angular.js --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<!-- How to How to Initialize a Module --> var app = angular.module('ModuleName', []);
<!-- How to Create a Controller --> app.controller('ControllerName', ['$scope', function($scope) { $scope.text = "Value for Text Attribute in Scope" $scope.method = function() { /* body of function */ } }]);
<!-- What You Need To Import --> 1. angular framework 2. app.js (modules) 3. controller files
<!-- What You Need To Attach in index.html --> 1. application with ng-app 2. controller with ng-controller
Некоторые встроенные директивы:
<!-- ng-repeat --> // loop through a collection / array <div ng-repeat= "color in colors"> <li> ""color"" </li> // except with handlebars instead of quotes </div>
<!-- ng-click --> // execute a method or expression when element is clicked <button ng-click="changeBackgroundColor()"></button>
<!-- ng-src --> // use angular to set a source path for an image <img ng-src="http://www.myblog.com/article/images/">
<!-- ng-href --> // use angular to set the source for a link <a ng-href="http://www.myblog.com/article">click here!</a>
<!-- ng-model --> // bind input elements to scope attributes <input ng-model="name"></input>
Код из этого сообщения в блоге