AngularJS Quiz App Tutorial (8/24) - Dependency Injection

Показать описание

The writeup for this video:

Part 1 of this series:

The Git Repo for this project:

Now that we have built the factory that will allow us to share the data across our controllers it is time to actually share the data. So in this part we will refactor our list controller to allow us to use the data stored on the factory object.

Support Me On Patreon

One Off Donations:

Bitcoin: 39iDX27ZSkYtRhUrH5r5YN128wEjwDmSYp
Ethereum: 0x38b3cBF8Ee3EeeeA33D1925bA0ce0e90c8EcFD46
Horizen (ZEN): znanBCHpWJecBwZZmft9r5QzbzRX4nQn6Dz

Check Out The Site!

SUBSCRIBE!

Join the Community!

Рекомендации по теме

Комментарии

i never seen such guy who responding to every single question, thank you so much to be so nice

mayankrajput

Simply Superb tutorial :) !!
I'm loving it so far!!

nssachin

angular
.module("ProgrammingFacts")
.factory("quizMetrics", function(){
var quizObj = {
quizActive: false,
changeState: function(state){
quizObj.quizActive = state;
}
};

return quizObj;
});

Can you please tell me why "quizObj" is needed in "quizObj.quizActive = state" line, since it is already an object. I am bit confused. Thanks..

surazzarus

When I inject my factory in controller my div after form which have all turtle details gets disappear.
and I i remove the syntax of inject than it again comes back.
please help me

ThePurvikpatel

hey my code is this in list controller

angular
.module('turtle')
.controller('listCtrl', ListController );
ListController.$inject = ['quizMatrics'];
function ListController($scope, quizMatrics){
$scope.data = turtlesData;
$scope.quizMatrics = quizMatrics;
$scope.modeldata={};
$scope.search = "";
$scope.changeActiveTurtle = changeActiveTurtle;
$scope.activateQuiz = activateQuiz;
console.log($scope);
console.log( $scope.quizMatrics);
function changeActiveTurtle(hell){
$scope.modeldata = hell;
}

function activateQuiz(){

}
}

but it is not showing my list, i am getting black page, but no ng-hide working yet,
this code just removed my list of turtle, and listCtrl is not hidden by ng-hide...

mayankrajput

I can't figure out how we can inject the quizzMetrics using $scope since you pass in the quizzMetrics parameter but I'm passing in $scope and the 2 together don't seem to work looks like it's either

function listController($scope) {...}

or function listController(quizMetrics) {...}

Is anyone facing the same issue has solved it and wants to share ?

nahojazz

Could anybody tell what's wrong with code? Checked it million of times and don't understand why it doesn't work properly. I stopped at 6.20 minute when button is clicked. Help please! index, quizMetrics, list, quiz files are below.

ДмитрийАлександрин-яр

sir i again stuck with this module and i have checked my code many times Please help me my start quiz button is not redirecting me to next page.

<body>
<div class="container">
<div class="page-header">
<h1>Quiz</h1>
</div>
</div>

<div ng-controller="listCtrl as list" 


<form class="form-inline well well-sm clearfix">
<span class="glyphicon glyphicon-search"></span>
<input type="text" placeholder="Search.." class="form-control" ng-model="list.search">

<button class="btn btn-warning pull-right" Quiz</strong></button>


</form>
<div class="row">
<div class="col-sm-6" ng-repeat="section in list.data | filter:list.search"> 
<div class="well well-sm">
<div class="row">
<div class="col-sm-6">
<img class="well-image">
</div>
<div class="col-sm-6">
<h4>{{section.type}}</h4>
<p><strong>Number Of Question: </strong>{{section.size}}</p>
<p><strong>Average Questions needs to correct:
<button class="btn btn-primary pull-left" data-toggle="modal" data-target="#instructions"
More</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="instructions">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">

</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<img class="well-image">
</div>
</div>
<div class="row">
<div class="col-md-6">

</div>
</div>
</div>
</div>
</div>
</div>

<div ng-controller="quizCtrl as quiz"

</div>

</div>

<script

<script src="js/app.js"></script>
<script
<script
<script

</body>

List.js
(function(){

angular.module("quizapp").controller("listCtrl", ListController);
ListController.$inject = ['quizMetrics']; //strat of quiz

function ListController(quizMetrics){

//this.dummyData="Hello World"; //dummyData is attached with $scope
//not to use this operator

var vm = this;
vm.quizMetrics=quizMetrics;
vm.data = quizToipcs;
vm.activeSection={}; //creating an object
vm.activateQuiz= activateQuiz;
vm.search="";
//vm.quizActive=false;
vm.changeActiveSection= changeActiveSection;

function changeActiveSection(index){

vm.activeSection = index;
}

function activateQuiz(){

//vm.quizActive = true;

}

}
var quizToipcs = [
{
type:"English",
size:"10",
average:"7"

},

{
type:"Apptitude",
size:"10",
average:"7"
},

{
type:"Technical",
size:"10",
average:"7"
}

];

})();

quiz.js

(function(){

angular.module("quizapp").controller("quizCtrl", "QuizController");

QuizController.$inject = ['quizMetrics'];

function QuizController(quizMetrics){

var vm = this;
vm.quizMetrics= quizMetrics;

}

})();

quizMetrics.js
(function(){

angular.module("quizapp").factory("quizMetrics", QuizMactrics);

function QuizMactrics(){

var quizObj ={

quizActive: false,
//activeSection:false
changeState: changeState

}
return quizObj;
function changeState(state){
quizObj.quizActive = state;

}
}

})();

please help me

shikhapathak

Can someone help me? When i click start quiz, the ng-hide works, but the ng-show is not. I get a blank page without the <h1>QUIZ</h1> showing

pbGroningen

$inject is not working :(, when i add this line ListController.$inject = ['$scope', 'quizMetrix']; page is not loading....can you pls help

jeevadeva

how to inject quizMetrics if you are coding using $scope as an argument

tenzintomjor

angular.js:13708Error: [ng:areq] ...in consloe

zeeshankazi

I had problems doing that and this helped me:

Thank you all!
Namastê!

wesleymoraes

AngularJS Quiz App Tutorial (8/24) - Dependency Injection

AngularJS Quiz App Tutorial (8/24) - Dependency Injection

AngularJS Quiz App Tutorial (9/24) - More About Factories

AngularJS Quiz App Tutorial (4/24) - Bootstrap Modal Markup

AngularJS Quiz App Tutorial (22/24) - Functions Inside The Results Controller

AngularJS Quiz App Tutorial (24/24) - Finalising Our Quiz Application

AngularJS Quiz App Tutorial (6/24) - Ng-click and ng-show directives

AngularJS Quiz App Tutorial (3/24) - Data Binding and Bootstrap Markup

AngularJS Quiz App Tutorial (12/24) - Controller Logic For The Quiz

AngularJS Quiz App Tutorial (20/24) - More Bootstrap markup

AngularJS Quiz App Tutorial (7/24) - AngularJS Factories and Services

AngularJS Quiz App Tutorial (5/24) - Ng Model and Angular Filters

AngularJS Quiz App Tutorial (10/24) - Ng-Class Directive

AngularJS Quiz App Tutorial (17/24) - Final Prompt After The Quiz

AngularJS Quiz App Tutorial (18/24) - Marking the Quiz Inside a factory method

AngularJS Quiz App Tutorial (2/24) - Controller Properties and $scope

AngularJS Quiz App Tutorial (23/24) - More Work with ng if directive

AngularJS Quiz App Tutorial (13/24) - ng-if Directive

AngularJS Quiz App Tutorial (14/24) - $index For Ng-Repeat

AngularJS Quiz App Tutorial (19/24) - Building another Controller

Build An AngularJS Quiz App From Scratch (1/24) - Tutorial Course

Quiz Application from Scratch | Angular 15 | Angular step-by-step Project

laravel 4 and angularjs duration app demo edit and update with bootstrap's modal

Angular in 100 Seconds

Опросник на AngularJS - 2015 / Quiz with AngularJS - part24 (eng)