I am following Brad Daley's Book on angular framework. In the console it leads me to the following
I have a simple angular 1.7.8 app however I keep getting the following error;
Error: $injector:unpr
Unknown Provider.
url : https://code.angularjs.org/1.7.8/docs/error/$injector/unpr?p0=configTimeProvider%20%3C-%20configTime%20%3C-%20controllerA
var configApp = angular.module('configApp1', []);
configApp.config(function ($provide) {
$provide.value = ("configTime", new Date());
$provide.value = ("runTime", new Date());
for (var i = 0; i < 10000000; i++) {
var y = Math.sqrt(Math.log(i))
};
})//end config
configApp.run(function(configTime,runTime){
runTime.setTime(new Date().getTime());
});
configApp.controller('controllerA', ['$scope', 'configTime', 'runTime',
function ($scope, configTime, runTime) {
$scope.configTime = configTime;
$scope.runTime = runTime;
}])
The HTML is as a follows
<!DOCTYPE html>
<html ng-app = 'configApp1'>
<head>
<title>Configuration Run Blocks in Angular</title>
</head>
<body>
<div ng-controller = 'controllerA' >
<h2>Config Time</h2>
{{configTime}}
<h2></h2>
<hr>
<h2>Run Time</h2>
{{runTime}}
<h2></h2>
</div>
<script src="../angular/angular.min.js"></script>
<script src="js/config.js"></script>
</body>
</html>
Invoke $provide.value as a method of the $provide service:
var configApp = angular.module('configApp1', []);
configApp.config(function ($provide) {
̶$̶p̶r̶o̶v̶i̶d̶e̶.̶v̶a̶l̶u̶e̶ ̶=̶ ̶(̶"̶c̶o̶n̶f̶i̶g̶T̶i̶m̶e̶"̶,̶ ̶n̶e̶w̶ ̶D̶a̶t̶e̶(̶)̶)̶;̶
$provide.value("configTime", new Date());
̶$̶p̶r̶o̶v̶i̶d̶e̶.̶v̶a̶l̶u̶e̶ ̶=̶ ̶(̶"̶r̶u̶n̶T̶i̶m̶e̶"̶,̶ ̶n̶e̶w̶ ̶D̶a̶t̶e̶(̶)̶)̶;̶
$provide.value("runTime", new Date());
for (var i = 0; i < 10000000; i++) {
var y = Math.sqrt(Math.log(i))
};
})//end config
For more information, see
AngularJS $provide Service API Reference - value
Related
i'm new to angularJs and want to learn more about it, i'm trying to display some users from a fake REST Api, when trying to run my code i got empty page and the console doesn't give me any errors , i don't know where is the error or where i can debug.
app.js
var myApp = angular.module("app", []);
contactsData.service.js look like that :
(function () {
var app = angular.module("app");
app.service("contactDataSvc", function ($http) {
var self = this;
self.getContacts = function () {
var promise1 = $http.get("http://localhost:3000/contacts");
var promise2 = promise1.then(function (response) {
return response.data;
});
return promise2;
}
});
})();
contacts.controller.js
(function () {
var myApp = angular.module("app");
myApp.controller("contactsCtrl", contactsCtrl);
function contactsCtrl(contactDataSvc) {
contactDataSvc.getContacts()
.then(function(data){
this.contacts = data;
});
}
})();
finally my view index.html
<html ng-app="app">
<head>
<title></title>
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="contacts.controller.js"></script>
<script src="contactsData.service.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
</head>
<body class="container">
<div>
<div ng-controller="contactsCtrl as ctrl">
<div class="raw">
<ul class="list-group">
<li class="li-group-item" ng-repeat="obj in ctrl.contacts">
{{obj.name.title + " " + obj.name.first + " " + obj.name.last}}
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Small correction required in your contactsCtrl
function contactsCtrl(contactDataSvc) {
var vm = this;
contactDataSvc.getContacts()
.then(function(data){
vm.contacts = data;
});
}
You cannot use this inside the then callback as the scope will be different.
Corrected working example here : http://plnkr.co/edit/LLKJipkBbiZ17QjQpw1X
Refer more:
https://www.w3schools.com/js/js_scope.asp
What is the scope of variables in JavaScript?
1 - Is this url correct? http://localhost:3000/contacts
2 - Open the url on any browser, does it return any response ? JSON?
Please check this first to see if the problem is not on the server side.
Firstly inject $scope in controller because anything/data that we want to access over Html from controller needs to be binded on $scope.
So you controller would look like:
(function () {
var myApp = angular.module("app");
myApp.controller("contactsCtrl", contactsCtrl);
function contactsCtrl($scope,contactDataSvc) {
contactDataSvc.getContacts()
.then(function(data){
$scope.contacts = data;
});
}
})();
Secondly from the service you need to return a promise from it only then you will be able to get the data once the response is back from the API.
So,the updated service code is :
(function () {
var app = angular.module("app");
app.service("contactDataSvc", function ($http,$q) {
var self = this;
var defered = $q.defer();
self.getContacts = function () {
var promise1 = $http.get("http://localhost:3000/contacts");
promise1.then(function (response) {
defered.resolve(response.data);
});
return defered.promise;
}
});
})();
let assume I need to create a dashboard application that includes users, tasks and messages. I have a theoric knowledge of angularJS only, not real life application and I don't know exactly how to architect an angular application.
<html ng-app="myApp">
<head>
<script src="js/vendor/angular/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="users" ng-controller="usersController"></div>
<div id="tasks" ng-controller="tasksController"></div>
<div id="messages" ng-controller="messagesController"></div>
</body>
</html>
and app.js
var myApp = angular.module('myApp', []);
myApp.controller('usersController', function($scope) {
$scope.users = [{id:1, username:'john'},{id:2, username:'jack'}];
});
myApp.controller('tasksController', function($scope) {
$scope.tasks = [];
$scope.addTask = function(userid, task) {
}
});
myApp.controller('messagesController', function($scope) {
$scope.messages = [];
$scope.addMessage = function(userid, message) {
}
});
I just cannot figure out how taskController can speak with usersContoller or Taskcontroller.
Or should I use something like
myApp.users = {};
myApp.tasks = {};
myApp.messages = {};
Or should I use a service for that ?
and finally how to watch for changes on that users, tasks and messages.
So I am getting an angular [$injector:unpr] error. Yes, I know what that normally means...I haven't defined something somewhere, or I am redefining the module over and over, or the like...but for the life of me I'm struggling to see the issue in my code.
I'm sure I'm missing something insanely basic, but after I've stared at code for a couple of hours, I go blind to it.
My HTML File:
<!DOCTYPE html>
<html ng-app="email">
<head>
<meta charset="UTF-8">
<title>Authentication</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'/>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>
<body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<div ng-controller="EmailAuthController as auth">
<h1>Authentication</h1>
<p>Request: [{{auth.request}}]</p>
<p>{{auth.response}}</p>
<p>{{1+2}}</p>
</div>
<script type="text/javascript" src="js/controllers/email.js"></script>
</body>
</html>
My email.js file (As you can see, I've commented out some stuff to try to isolate the issue):
/* global angular parseGet */
function parseGet(val) {
var result = '', // = "Not found",
tmp = [];
var items = location.search.substr(1).split('&');
for (var index = 0; index < items.length; index++) {
tmp = items[index].split('=');
if (tmp[0] === val) {
result = decodeURIComponent(tmp[1]);
}
}
return result;
}
(function () {
angular
.module('email', [])
.controller('EmailAuthController', [ '$scope','authFactory', function ($scope,authFactory) {
var vm = this,
req = parseGet('hash') || '';
vm.request = req;
// authFactory.validate(req)
// .then(function (response) {
// vm.response = response.data;
// });
}])
.factory('authFactory', [ '$rootScope', '$http', 'config', function ($rootScope, $http, config) {
var validate = function (hash) {
var url = config.SERVICE_URI + '/auth/email/' + hash;
return $http.get(url);
};
return {
validate: validate
};
}]);
})();
From the code you've given it appears config is not defined in your authFactory injection.
.factory('authFactory', [ '$rootScope', '$http', 'config', function(a, b, c) {} ]); // config is not defined
I am calling restful service from AngularJS. HTML is very basic with a input text box and a button for query.
// basic.html
<!DOCTYPE html>
<html ng-app="cgApp" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-resource.js"></script>
<script src="../js/controller.js"></script>
<script src="../js/service.js"></script>
</head>
<body>
<div ng-controller="CgseqCtrl">
<input ng-model="analysisid"><button ng-click="searchById()">Search</button>
<table>
<tr>
<td>{{seq.analysisId}}</td>
<td>{{seq.center}}</td>
<td>{{seq.diseaseAbbr}}</td>
<td>{{seq.filepath}}</td>
<td>{{seq.library}}</td>
</tr>
</table>
</div>
</body>
</html>
I use a service to call rest api
// service.js
app.factory("Cgseq", function ($http) {
// return $resource('http://localhost:8080/cgweb/api/seqs/fdebfd6e-d046-4192-8b97-ac9f65dc2009');
var service = {};
service.getSeqById = function(analysisid) {
return http.get('http://localhost:8080/cgweb/api/seqs/' + analysisid);
}
service.getSeq = function() {
return $http.get('http://localhost:8080/cgweb/api/seqs/fdebfd6e-d046-4192-8b97-ac9f65dc2009');
}
return service;
});
The function searchById() will be executed once the button is clicked. It is implemented in my controller.
// controller.js
var app = angular.module('cgApp', [])
app.controller('CgseqCtrl', ['$scope', 'Cgseq', function($scope, Cgseq){
$scope.searchById() = function() {
CgSeq.getSeqById($scope.analysisid)
.then(function(response){
$scope.seq = response;
});
}
}]);
When I load basic.html in a browser, even before I type in something in the input box and click the button, I got the following error:
angular.js:12416 TypeError: $scope.searchById is not a function
at new <anonymous> (controller.js:8)
You should remove the () from $scope.searchById() = function
And correct the typo (case-sensitivity) for Cgseq
I.e.:
$scope.searchById = function() {
Cgseq.getSeqById($scope.analysisid)
.then(function(response){
$scope.seq = response;
});
}
var l = $scope.PendingKOTitems.length,
k = 0;
for (k = 0; k < l; k = k + 1) {
sItemCode = $scope.PendingKOTitems[k]["sItemCode"]
sOutletCode = $scope.selectedOutlet.sOutletCode;
sFinal = sOutletCode + "/" + sSubCatgCode
$http.get(sServiceURL + 'ItemMst/' + sFinal).then(function (resp) {
$scope.Items = resp.data;
iindexItem = getIndexOf($scope.Items, sItemCode, "sItemCode");
}, function (err) {
console.error('ERR', err);
// err.status will contain the status code
})
sCheckValue = $scope.CheckboxSelection.value;
$scope.invoice.items.push({
KOTNo: $scope.KOTNumValue,
ActiveMode: $scope.lActiveMode,
SubCatgCode: sSubCatgCode,
SubCatgDesc: sSubCatgDesc,
indexSubCatg: iindexSubCatg,
ItemCode: sItemCode,
ItemDesc: sItemDesc,
indexItem: iindexItem,
Qty: sQty,
OutletCode: sOutletCode,
BillType: sBillType,
MemberCode: sMemberCode,
RoomNum: sRoomNum,
BookingCode: dBookingCode,
TableCode: sTableCode,
WaiterCode: sWaiterCode,
UserID: sUserID
});
}
The get methode not fire in the for loop, after perform for loop it will fire.
I want get 'iindexItem' value for load select based on item sub category. But get method fire after the 'push' operation perform. so i was not able to get 'iindexItem' value. this my problem.
I tried this and this seems to work fine for me --
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
<script type="text/javascript">
var angularapp = angular.module("app",[]);
angularapp.controller('ctrl', ['$scope', '$window', '$http', '$filter', '$timeout', MyCtrl]);
function MyCtrl($scope, $window, $http, $filter, $timeout){
for(var i=0; i<3; i++){
$http.get("http://httpbin.org/get").then(function (resp) {
debugger;
$scope.Items = resp.data; // here I set my breakpoint
console.log(i);
console.log(resp.data);
}, function (err) {
console.error('ERR', err);
// err.status will contain the status code
});
}
}
</script>
</body>
</html>
The debugger is hit on every iteration in the for loop.