The article presents a tutorial on how to create custom directives, using a sample quiz app and code examples. The quiz app demonstration could be found on following pages. Please excuse me for typos, if found.
Following will be discussed in this article:
The objective behind the quiz app is to enable the quiz creators create quick quiz apps by focusing on questions and answers rather than dealing with nitty gritty of web development for creating each app. I was able to create the two sets of questions in flat 10 minutes.
To achieve the above objective, following directives were created:
This is how questions & answers will be written using custom directive, iquestion. In the following directive, there is an attribute called as “text”. This attribute is used to gather the question and answer options along with right answer. In the text below, the question and answer options is separated by “::” and answer options are separated by “;”. The right answer is prefixed by “__”.
<iquestion text=”Who is sometimes called as Father of AngularJS?::Brad;Igor Minor;__Misko Hevery;Brian Ford”></iquestion>
<iquestion text=”Only one angular app can be automatically bootstrap in an HTML page. Others need to be manually bootstrap?::__True;False”></iquestion>
Following directive can be used to display the score card:
<iscorecard></iscorecard>
Following are key concepts related with directives that got demonstrated in creating the custom directives, iquestion and iscorecard.
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:
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.
[adsenseyu1]
In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…
Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…
With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…
Anxiety is a common mental health condition that affects millions of people around the world.…
In machine learning, confounder features or variables can significantly affect the accuracy and validity of…
Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…
View Comments
Hey Ajitesh
great article this!
I am following this 'tutorial' now and i see you bootstrap this using
var quizApp = angular.module( "QuizApp", ['ngSanitize', 'ui.bootstrap'] );
however I am using foundation so would I just need to replace 'bootstrap' with 'foundation' or is there another reason for using bootstrap like this?
hope to hear from you soon.
thanks
Wouter
Thanks for your feedback, Wouter. There is no specific reason for using Bootstrap. You could just replace ui.bootstrap with any other angular ui module. As Bootstrap provides great CSS, I made use of this.
Also, just open-sourced the QuizApp project. Do check out this link: http://eajitesh.github.io/QuizApp/
Please Send me Complete code link am unable to c download
Check out this link for source code and using the app in your pages.
http://eajitesh.github.io/QuizApp/
One of big feature that Show Answers does not work on IE10 and IE11.
Even, Two of demos does not work on IE11 when I test.
please reply me back, where should I change? or why?