I am trying to put together a service for my controllers. But I keep getting an error saying
"Cannot read property 'industriesArr' of undefined". I'm pretty sure I'm misunderstanding something fundamental, so please educate me.
Service:
angular.module('core').service('FormService', function() {
var data = {
'industriesArr': [
'Alcoholic Drinks','Animals and Pets','Arts and Entertainment',
'Baby and Toddler','Banking','Beauty and Personal Care','Building and Construction',
'Clothing and Footwear','Communication Services','Confectionary and Snacks',
'Dining and Nightlife',
'Education and Jobs','Electronics and Technology',
'Family and Community','Fast food and Restaurant','Financial Services','Food and Groceries',
'Games and Toys','Government and Law',
'Health','Home and Garden',
'Insurances','Internet, Telecom and Software',
'Jewelry and Luxury',
'Leisure',
'Media and Publications',
'News','Non-alcoholic Drinks','Non-profit Organisation',
'Occasions and Gifts','Office Supplies','Other',
'Personal Accessories','Pharmaceutical and Medical','Political Organisation','Professional Services','Public Interest',
'Real Estate','Retail Services and Wholesaler',
'Sports Accessories','Sports and Fitness',
'Tobacco','Tourism and Travel','Transport',
'Utilities',
'Vehicles'
]
};
return data;
});
Controller:
angular.module('core').controller('SignupController', ['$scope', 'FormService', function($scope, FormService) {
$scope.industriesArr = FormService.data.industriesArr;
});]);
HTML is simply:
<p ng-repeat="industry in industriesArr">{{industry}}</p>
The way you are returning data you should use factory. So instead of this
angular.module('core').service('FormService', function() {
Use this
angular.module('core').factory('FormService', function() {
When the service syntax is used Angular treats it as Constructor function. If you want to use service do not do return and define your properties\functions on this such as
this.industriesArr=[...];
Write your module like this :
angular.module('core').service('FormService', function() {
return{
getData: function() {
return { 'industriesArr': [...]; }
}
}
});
Made a silly mistake and put FormService in the incorrect order when associating it with my controller.
Related
the problem is that the data can't be used in the controller because it is always undefined , I think this is because the return is a promise not resoloved before running the controller, please help.. here is my code.
.factory('channelsFactory', ['$resource', 'baseURL', function($resource, baseURL ) {
return $resource(baseURL+"channels/:id",null,{'update':{method:'PUT' }});
}])
this is the controller in my controllers.js
.controller('videoController',[ '$scope','$http', 'baseURL','channelsFactory','channel',function($scope, $http, baseURL,channelsFactory, channel){
$scope.baseURL= baseURL;
$scope.channel= channel;
console.log(channel)// I can see the promised data just fine
$scope.videos = [];
$scope.youtubeParams = {
key: 'AIzaSyAc6Su5lq1-OIXHu3VMfssPM5RzY8F2tPk',
type: 'video',
maxResults: '20',
part: 'id,snippet',
q:'',
order: 'date',
channelId:channel.channelid,//undfined
$http.get('https://www.googleapis.com/youtube/v3/search', {params:$scope.youtubeParams}).success(function(response){
angular.forEach(response.items, function(child){
$scope.videos.push(child);
console.log(child);
});
});
and here is the view in the app.js
.state('app.channelvideos', {
url: '/channelsList/:id',
views: {
'mainContent': {
templateUrl: 'templates/channelvideos.html',
controller: 'videoController',
resolve: {
channel: ['channelsFactory','$stateParams', function(channelsFactory,$stateParams ){
return channelsFactory.get({id:parseInt($stateParams.id,10)})
}]
}
}
}
})
where do you use the $scope.youtubeParams?,if this is used in the trigger event,you can put this code into the function of trigger event.Try to show the $scope.channel in your html like {{channel}} to see if you have get the correct object
thanks good finally I found an article talking about my problem specifically and the solution was to force angular to resolve the resource in the ui-router , and the solution was just in one word, so this piece of code will be edited as following
return channelsFactory.get({id:parseInt($stateParams.id,10)}).$promise;
I am having no joy with implementing require: {} property as part of an angular component. Allow me to demonstrate with an example I have.
This is the component/directive that supposed to fetch a list of judgements. Nothing very fancy, just a simple factory call.
// judgements.component.js
function JudgementsController(GetJudgements) {
var ctrl = this;
ctrl.Get = function () {
GetJudgements.get().$promise.then(
function (data) {
ctrl.Judgements = data.judgements;
}, function (error) {
// show error message
});
}
ctrl.$onInit = function () {
ctrl.Get();
};
}
angular
.module('App')
//.component('cJudgements', {
// controller: JudgementsController,
//});
.directive('cJudgements', function () {
return {
scope: true,
controller: 'JudgementsController',
//bindToController: true,
};
});
I am trying to implement component require property to give me access to ctrl.Judgements from the above component/directive as follows:
// list.component.js
function ListController(GetList, GetJudgements) {
var ctrl = this;
ctrl.list = [];
ctrl.Get = function () {
GetList.get().$promise.then(
function (data) {
ctrl.list = data.list;
}, function (error) {
// show error message
});
};
//ctrl.GetJudgements = function () {
// GetJudgements.get().$promise.then(
// function (data) {
// ctrl.Judgements = data.judgements;
// }, function (error) {
// // show error message
// });
//}
ctrl.$onInit = function () {
ctrl.Get();
//ctrl.GetJudgements();
};
}
angular
.module('App')
.component('cTheList', {
bindings: {
listid: '<',
},
controller: ListController,
controllerAs: 'ctrl',
require: {
jCtrl: 'cJudgements',
},
template: `
<c-list-item ng-repeat="item in ctrl.list"
item="item"
judgements="ctrl.Judgements"></c-list-item>
<!--
obviously the reference to judgements here needs to change
or even better to be moved into require of cListItem component
-->
`,
});
Nice and simple no magic involved. A keen reader probably noticed GetJudgement service call in the ListController. This is what I am trying to remove from TheList component using require property.
The reason? Is actually simple. I want to stop database being hammered by Judgement requests as much as possible. It's a static list and there is really no need to request it more than once per instance of the app.
So far I have only been successful with receiving the following error message:
Error: $compile:ctreq
Missing Required Controller
Controller 'cJudgements', required by directive 'cTheList', can't be found!
Can anyone see what I am doing wrong?
PS: I am using angular 1.5
PSS: I do not mind which way cJudgement is implemented (directive or component).
PSSS: If someone wonders I have tried using jCtrl: '^cJudgements'.
PSSSS: And multiple ^s for that matter just in case.
Edit
#Kindzoku posted a link to the article that I have read before posting the question. I hope this also helps someone in understanding $onInit and require in Angular 1.5+.
Plunker
Due to popular demand I made a plunker example.
You should use required components in this.$onInit = function(){}
Here is a good article https://toddmotto.com/on-init-require-object-syntax-angular-component/
The $onInit in your case should be written like this:
ctrl.$onInit = function () {
ctrl.jCtrl.Get();
};
#iiminov has the right answer. No parent HTML c-judgements was defined.
Working plunker.
I am using googlePlace api in angularJs and I want to change type of places dynamically as needed. Like I use controllers to bind the values in view part using $scope but it's not working in this situation also tried $rootScope.
Tried many other things too but they all are not working and I'm also new to angularJs so don't know much.
Here is code:-
app.config(function(ngGPlacesAPIProvider){
ngGPlacesAPIProvider.setDefaults({
radius:1000000,
types:['electronics_store','bakery','bank','beauty_salon','bicycle_store','book_store','cafe','car_dealer','car_wash','car_repair','clothing_store','dentist','department_store'],
nearbySearchKeys: ['name','geometry', 'reference'],
placeDetailsKeys: ['name','formatted_address', 'formatted_phone_number',
'reference', 'website', 'geometry', 'email'],
});
});
Controller code:-
app.config(function(ngGPlacesAPIProvider, ngGPlacesDefaults){
ngGPlacesAPIProvider.setDefaults(ngGPlacesDefaults);
});
app.controller('scdfindCustomerCtrl',function($scope,ngGPlacesAPI,$http,ngGPlacesDefaults){
ngGPlacesDefaults.types = ["atm"];
$scope.getDetails = function(ref){
$scope.details = ngGPlacesAPI.placeDetails({reference:ref}).then(
function (data) {
$scope.det=data;
console.log(data);
return data;
});
}
$scope.positions = [{lat:37.7699298,lng:-122.4469157}];
$scope.addMarker = function(event) {
var ll = event.latLng;
$scope.positions.push({lat:ll.lat(), lng: ll.lng()});
$scope.data = ngGPlacesAPI.nearbySearch({latitude:ll.lat(), longitude:ll.lng()}).then(
function(data){
$scope.person=data;
console.log(data);
return data;
});
}
So basically I want to change "types:[]" array from view part.
Any help would be appreciated.
You could have those set of default values as an constant, so that you could get those value inside config phase directly, as angular constants are accessible over there & in all other component of angular like controller, factory, directive, etc just by injecting dependency of it.
Constant
app.constant('ngGPlacesDefaults', {
radius:1000000,
types:['electronics_store','bakery','bank','beauty_salon','bicycle_store','book_store','cafe','car_dealer','car_wash','car_repair','clothing_store','dentist','department_store'],
nearbySearchKeys: ['name','geometry', 'reference'],
placeDetailsKeys: ['name','formatted_address', 'formatted_phone_number',
'reference', 'website', 'geometry', 'email'],
});
})
Config
app.config(function(ngGPlacesAPIProvider, ngGPlacesDefaults){
ngGPlacesAPIProvider.setDefaults(ngGPlacesDefaults);
});
Whenever you wanted to change the value of ngGPlacesDefaults configuration, you can have handle to those value by injecting ngGPlacesDefaults dependency
app.controller('myController', function($scope, ngGPlacesDefaults){
//other code here
ngGPlacesDefaults.types = ["some", "different", "values"]; //you could change value like this
})
I found a different way to solve this problem. You don't need to extra just pass the types:[] as an argument in 'nearBySearch' function
$scope.data = ngGPlacesAPI.nearbySearch({latitude:ll.lat(), longitude:ll.lng(), types:[$scope.business.selected.businessType]}).then(
function(data){
$scope.person=data;
console.log(data);
return data;
});
"$scope.business.selected.businessType" is bindable dynamically from view, that's it.
I'm attempting to create a Showdown extension in my Angular app which will show scope variables. I was able to get it setup to show basic scope variables easily enough, but now I'd like to get it to where I can use the results of an ng-repeat and I can't get anything other than [[object HTMLUListElement]] to show.
Here's my controller so far:
app.controller('MyCtrl', ['$scope', '$window', '$compile', function($scope, $window, $compile){
$scope.machines = [
{ abbv: 'DNS', name: 'Did Not Supply' },
{ abbv: 'TDK', name: 'The Dark Knight' },
{ abbv: 'NGG', name: 'No Good Gofers'}
];
$scope.machine = $scope.machines[0];
$scope.machine_list = $compile('<ul><li ng-repeat="m in machines">{{m.abbv}}: {{m.name}}</li></ul>')($scope);
$scope.md = "{{ machine_list }}";
var scopevars = function(converter) {
return [
{ type: 'lang', regex: '{{(.+?)}}', replace: function(match, scope_var){
scope_var = scope_var.trim();
return $scope.$eval(scope_var);
}}
];
};
// Client-side export
$window.Showdown.extensions.scopevars = scopevars;
}]);
Plunkr: code so far
I feel like I've got to be close, but now I don't know if I'm on the completely wrong track for this, or if it's a showdown thing or an angular thing or what.
I realized I was fighting Angular (and losing quiet badly) with the way I was doing that. DOM in a controller is a no-no. And now I'm kind of angry about how easy it is once I started thinking properly and looking at the directive.
Now instead of trying to do the compile and everything within the controller, I included the $compile service in the directive I'm using, so:
htmlText = converter.makeHtml(val);
element.html(htmlText);
became:
htmlText = converter.makeHtml(val);
element.html(htmlText);
$compile(element.contents())(scope);
With that change in place I no longer need the portion of the extension that just did the basic evaluation, since it's being compiled {{ machine.name }} is automatically converted.
But that still left me not being able to specify a variable to insert a template, just variables. But now that the output is going to be compiled through angular I can put the template in a partial and use an extension to convert from a pattern to an ng-include which works.
New Controller Code:
app.controller('MyCtrl', ['$scope', '$window', '$compile', function($scope, $window, $compile){
$scope.machines = [
{ abbv: 'DNS', name: 'Did Not Supply' },
{ abbv: 'TDK', name: 'The Dark Knight' },
{ abbv: 'NGG', name: 'No Good Gofers'},
{ abbv: 'TotAN', name:'Tales of the Arabian Nights'}
];
$scope.machine = $scope.machines[0];
$scope.tpls = {
'machinelist': 'partials/ml.html'
};
$scope.md = "{{machines.length}}\n\n{{include machinelist}}";
var scopevars = function(converter) {
return [
{ type: 'lang', regex: '{{include(.+?)}}', replace: function(match, val){
val = val.trim();
if($scope.tpls[val] !== undefined){
return '<ng-include src="\''+$scope.tpls[val]+'\'"></ng-include>';
} else {
return '<pre class="no-tpl">no tpl named '+val+'</pre>';
}
}}
];
};
// Client-side export
$window.Showdown.extensions.scopevars = scopevars;
}]);
And of course the new plunkr
Hope this can help someone later down the road
App design question. I have a project which has a very large number of highly customized inputs. Each input is implemented as a directive (and Angular has made this an absolute joy to develop).
The inputs save their data upon blur, so there's no form to submit. That's been working great.
Each input has an attribute called "saveable" which drives another directive which is shared by all these input types. the Saveable directive uses a $resource to post data back to the API.
My question is, should this logic be in a directive at all? I initially put it there because I thought I would need the saving logic in multiple controllers, but it turns out they're really happening in the same one. Also, I read somewhere (lost the reference) that the directive is a bad place to put API logic.
Additionally, I need to introduce unit testing for this saving logic soon, and testing controllers seems much more straightforward than testing directives.
Thanks in advance; Angular's documentation may be… iffy… but the folks in the community are mega-rad.
[edit] a non-functional, simplified look at what I'm doing:
<input ng-model="question.value" some-input-type-directive saveable ng-blur="saveModel(question)">
.directive('saveable', ['savingService', function(savingService) {
return {
restrict: 'A',
link: function(scope) {
scope.saveModel = function(question) {
savingService.somethingOrOther.save(
{id: question.id, answer: question.value},
function(response, getResponseHeaders) {
// a bunch of post-processing
}
);
}
}
}
}])
No, I don't think the directive should be calling $http. I would create a service (using the factory in Angular) OR (preferably) a model. When it is in a model, I prefer to use the $resource service to define my model "classes". Then, I abstract the $http/REST code into a nice, active model.
The typical answer for this is that you should use a service for this purpose. Here's some general information about this: http://docs.angularjs.org/guide/dev_guide.services.understanding_services
Here is a plunk with code modeled after your own starting example:
Example code:
var app = angular.module('savingServiceDemo', []);
app.service('savingService', function() {
return {
somethingOrOther: {
save: function(obj, callback) {
console.log('Saved:');
console.dir(obj);
callback(obj, {});
}
}
};
});
app.directive('saveable', ['savingService', function(savingService) {
return {
restrict: 'A',
link: function(scope) {
scope.saveModel = function(question) {
savingService.somethingOrOther.save(
{
id: question.id,
answer: question.value
},
function(response, getResponseHeaders) {
// a bunch of post-processing
}
);
}
}
};
}]);
app.controller('questionController', ['$scope', function($scope) {
$scope.question = {
question: 'What kind of AngularJS object should you create to contain data access or network communication logic?',
id: 1,
value: ''
};
}]);
The relevant HTML markup:
<body ng-controller="questionController">
<h3>Question<h3>
<h4>{{question.question}}</h4>
Your answer: <input ng-model="question.value" saveable ng-blur="saveModel(question)" />
</body>
An alternative using only factory and the existing ngResource service:
However, you could also utilize factory and ngResource in a way that would let you reuse some of the common "saving logic", while still giving you the ability to provide variation for distinct types of objects / data that you wish to save or query. And, this way still results in just a single instantiation of the saver for your specific object type.
Example using MongoLab collections
I've done something like this to make it easier to use MongoLab collections.
Here's a plunk.
The gist of the idea is this snippet:
var dbUrl = "https://api.mongolab.com/api/1/databases/YOURDB/collections";
var apiKey = "YOUR API KEY";
var collections = [
"user",
"question",
"like"
];
for(var i = 0; i < collections.length; i++) {
var collectionName = collections[i];
app.factory(collectionName, ['$resource', function($resource) {
var resourceConstructor = createResource($resource, dbUrl, collectionName, apiKey);
var svc = new resourceConstructor();
// modify behavior if you want to override defaults
return svc;
}]);
}
Notes:
dbUrl and apiKey would be, of course, specific to your own MongoLab info
The array in this case is a group of distinct collections that you want individual ngResource-derived instances of
There is a createResource function defined (which you can see in the plunk and in the code below) that actually handles creating a constructor with an ngResource prototype.
If you wanted, you could modify the svc instance to vary its behavior by collection type
When you blur the input field, this will invoke the dummy consoleLog function and just write some debug info to the console for illustration purposes.
This also prints the number of times the createResource function itself was called, as a way to demonstrate that, even though there are actually two controllers, questionController and questionController2 asking for the same injections, the factories get called only 3 times in total.
Note: updateSafe is a function I like to use with MongoLab that allows you to apply a partial update, basically a PATCH. Otherwise, if you only send a few properties, the entire document will get overwritten with ONLY those properties! No good!
Full code:
HTML:
<body>
<div ng-controller="questionController">
<h3>Question<h3>
<h4>{{question.question}}</h4>
Your answer: <input ng-model="question.value" saveable ng-blur="save(question)" />
</div>
<div ng-controller="questionController2">
<h3>Question<h3>
<h4>{{question.question}}</h4>
Your answer: <input ng-model="question.value" saveable ng-blur="save(question)" />
</div>
</body>
JavaScript:
(function() {
var app = angular.module('savingServiceDemo', ['ngResource']);
var numberOfTimesCreateResourceGetsInvokedShouldStopAt3 = 0;
function createResource(resourceService, resourcePath, resourceName, apiKey) {
numberOfTimesCreateResourceGetsInvokedShouldStopAt3++;
var resource = resourceService(resourcePath + '/' + resourceName + '/:id',
{
apiKey: apiKey
},
{
update:
{
method: 'PUT'
}
}
);
resource.prototype.consoleLog = function (val, cb) {
console.log("The numberOfTimesCreateResourceGetsInvokedShouldStopAt3 counter is at: " + numberOfTimesCreateResourceGetsInvokedShouldStopAt3);
console.log('Logging:');
console.log(val);
console.log('this =');
console.log(this);
if (cb) {
cb();
}
};
resource.prototype.update = function (cb) {
return resource.update({
id: this._id.$oid
},
angular.extend({}, this, {
_id: undefined
}), cb);
};
resource.prototype.updateSafe = function (patch, cb) {
resource.get({id:this._id.$oid}, function(obj) {
for(var prop in patch) {
obj[prop] = patch[prop];
}
obj.update(cb);
});
};
resource.prototype.destroy = function (cb) {
return resource.remove({
id: this._id.$oid
}, cb);
};
return resource;
}
var dbUrl = "https://api.mongolab.com/api/1/databases/YOURDB/collections";
var apiKey = "YOUR API KEY";
var collections = [
"user",
"question",
"like"
];
for(var i = 0; i < collections.length; i++) {
var collectionName = collections[i];
app.factory(collectionName, ['$resource', function($resource) {
var resourceConstructor = createResource($resource, dbUrl, collectionName, apiKey);
var svc = new resourceConstructor();
// modify behavior if you want to override defaults
return svc;
}]);
}
app.controller('questionController', ['$scope', 'user', 'question', 'like',
function($scope, user, question, like) {
$scope.question = {
question: 'What kind of AngularJS object should you create to contain data access or network communication logic?',
id: 1,
value: ''
};
$scope.save = function(obj) {
question.consoleLog(obj, function() {
console.log('And, I got called back');
});
};
}]);
app.controller('questionController2', ['$scope', 'user', 'question', 'like',
function($scope, user, question, like) {
$scope.question = {
question: 'What is the coolest JS framework of them all?',
id: 1,
value: ''
};
$scope.save = function(obj) {
question.consoleLog(obj, function() {
console.log('You better have said AngularJS');
});
};
}]);
})();
In general, things related to the UI belong in a directive, things related to the binding of input and output (either from the user or from the server) belong in a controller, and things related to the business/application logic belong in a service (of some variety). I've found this separation leads to very clean code for my part.