Создайте свое первое приложение 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>

Код из этого сообщения в блоге