Учебник по пользовательским директивам Angularjs: пример кода приложения Quiz

Введение в приложение викторины и соответствующие пользовательские директивы

Цель приложения викторины — дать возможность создателям викторин создавать быстрые приложения викторины , сосредоточившись на вопросах и ответах, а не на мелочах веб-разработки при создании каждого приложения. Мне удалось создать два набора вопросов за 10 минут.

Для достижения вышеуказанной цели были разработаны следующие директивы:

• Вопрос : эта директива помогает определить вопросы в простейшей форме.
• iscorecard : эта директива отображает результаты теста.

Вот как вопросы и ответы будут написаны с использованием пользовательской директивы, iquestion. В следующей директиве есть атрибут, называемый «текст». Этот атрибут используется для сбора вариантов вопросов и ответов вместе с правильным ответом. В тексте ниже параметры вопроса и ответа разделены «::», а параметры ответа — «;». Правильный ответ начинается с префикса «__».

<iquestion text = ”Кого иногда называют Отцом AngularJS? :: Брэд; Игорь Минор; __ Миско Хевери; Брайан Форд”> </ iquestion>

<iquestion text = ”Только одна угловая программа может быть автоматически загружена на HTML-странице. Другие должны быть вручную загружены? :: __ True; False ”> </ iquestion>

Следующая директива может быть использована для отображения оценочной карты:

<Iscorecard> </ iscorecard>

Концепция ключевых директив продемонстрирована с приложением викторины

Ниже приведены ключевые понятия, связанные с директивами, которые были продемонстрированы при создании пользовательских директив, iquestion и iscorecard.

• Шаблоны : Пользовательские директивы используют следующие два шаблона. Ключевой момент, на который следует обратить внимание, заключается в том, что использование шаблонов позволяет использовать их повторно, поскольку обновление шаблона будет обновлять все страницы, использующие этот шаблон. При этом не требуется трогать / обновлять существующие HTML-страницы, содержащие информацию о вопросах. Шаблоны сохраняются в отдельных файлах и доступны в пользовательских директивах с помощью свойства templateUrl.
• Restrict: With restrict property, the directives have been restricted to be used as element only. Note that ‘E’ is being used in the directives code. Other possible ways in which directives can be used are attributes (A), comment (M) and class (C). The reason why the directives, iquestion and iscorecard, have been restricted to “Element” is that these are the key directives of this app and are not intended to decorate existing elements. It also makes it extensible based on the fact that new attribute could be defined to associate additional functionality.
• Isolating Scope: The directives have got their own scope which, in turn, defines custom properties that could be used to retrieve the data from HTML page. It also makes the directives reusable. Take a look at the  code to find more about the isolate scope.
• Accessing the parent scope: One could access the parent scope properties and methods from within directive using code such as $scope.$parent.<propertyname> or $scope.$parent.<methodname>
• Parent controller scope as a bridge for directives inter-communication:  The parent controller scope acts as a bridge for communication between two directives, iquestion and iscorecard. As a result of score changing due to options chosen by the user, the scorecard changes and the watch from “iscorecard” directive updates it template appropriately.
• Controller within Directive definition: Controllers within directive are used to capture user interactions with the directive.
• Manipulate DOM: As the “Show Answers” is clicked in scorecard, the directive controller updates the parent scope property, displayAnswers. The “iquestion” updates the style on the right answer appropriately due to the fact that it is watching the parent scope property, “displayAnswers”.

How to use these Quiz Directives

I shall be putting these directives code in github. However, if would like to try these directives or extend these directives for your usage, do the following:

• Directive code: http://hello-angularjs.appspot.com/assets/js/quizapp.js
• Template code for iquestion from following link (using view-source): http://hello-angularjs.appspot.com/assets/templates/question.html
• Template code for iscorecard from following link (using view-source): http://hello-angularjs.appspot.com/assets/templates/scorecard.html

Following is the sample HTML page using the above directives:

<!DOCTYPE html>
<html ng-app="quizApp">
<head>
<title>AngularJS Job Interview Questions - Set 2</title>
<link rel="stylesheet"
	href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="QuizCtrl">
<div class="container">
<div class="page-header">
	<h1>AngularJS Interview Questions - Set 2</h1>
</div>
<table class="col-md-12">
    <tr>
	<td class="col-md-9" style="vertical-align: top">
		<table class="table">
			<tr>
			    <td><iquestion text="What are various possible prefixes such as 'ng-' using which Angular directives (for example, ng-app) can be defined?::'ng-', 'data-ng-', 'ng:';'ng-';__'ng-', 'data-ng-', 'ng:', 'x-ng-';'ng-', 'data-ng-','x-ng-'"></iquestion></td>
			</tr>
			<tr>
			    <td><iquestion text="What are various possible ways in which angular application can be initialized?::On an element, one could either put simply the attribute such as (ng-app, data-ng-app, ng:app, x-ng-app);Put the named attribute such as (ng-app='demoApp');__Both of the above"></iquestion></td>
			</tr>						
		</table>
	</td>
	<td style="vertical-align: top"><iscorecard></iscorecard></td>
    </tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-sanitize.min.js"></script>
<script src="assets/js/ui-bootstrap-tpls-0.9.0.min.js"></script>
<script src="assets/js/quizapp.js"></script>
</body>
</html>

Please feel free to suggest or comment as I have been doing AngularJS from quite sometime but do not consider myself as an expert or something link that. The idea behind this article is to demonstrate the power of AngularJS directives. I am sure it could be extended or made in a better manner.