got to work with angular JS on learning how angular works.
I am trying controllers, directvies and services in an example project:
[http://codepen.io/anon/pen/PpOERy][1]
Actually I got this error if I try to use my service on clicking the button:
TypeError: Cannot read property '*****' of undefined
Whats my failure?
Regards n00n
You forgot to annotate your service, little typo ;)
Your code
myApp.controller('MainCtrl', ['$scope', function ($scope, CalculatorService) {
Correct code
myApp.controller('MainCtrl', ['$scope', 'CalculatorService', function ($scope, CalculatorService) {
Related
I am new to angular and am trying to alter the default behavior of a textangular text input field on my site's backend (I am a guitarist, not a web developer, but can usually figure out what I need to do...). The field has an option to specify a youtube url and then textangular converts that to an image for purposes of editing in the backend. Then in front end textangular has means to have a youtube url displayed correctly as an iframe.
However, on the front end I am not using angular and I read that in my case, to get a youtube embed to show up in front end as iframe you have to use the taApplyCustomRenderers function.
For example, see here:
how to strip placeholder img in textAngular editor in scope var?
In my angular app, here are some of the relevant lines:
angular.module('dashboard')
.controller('EditController', ['$scope', '$http', '$location', '$routeParams', function ($scope, $http, $location, $routeParams) {
$scope.save = function () {
$scope.busy = true;
// I thoguht I could do this:
$scope.somefield = taApplyCustomRenderers($scope.somefield);
// then I would save to model
});
I am getting error that taApplyCustomRenderers is undefined. I thought based on what I read that taApplyCustomRenderers is an available function when using textangular but being new to this I suppose I am missing some key step about injecting the function into the controller or something.
Hoping someone can shed some light.
Thanks in advance!
Brian
TLDR; When you try to access taApplyCustomRenderers you are recieving an error since it is not given to this current function, Inject the function and it will work.
The Problem
While I have never actually tried using textAngular, let me explain what the problem is, and from there it should be easy to find the solution.
Your EditController is just a regular javascript function that gets run and attached to the relevant DOM element, so it only has access to functions that are declared in its own scope (or globally).
Here is your exact code just indented differently so you can understand better:
angular.module('dashboard').controller(
'EditController',
[
'$scope',
'$http',
'$location',
'$routeParams',
function ($scope, $http, $location, $routeParams) {
...
$scope.somefield = taApplyCustomRenderers($scope.somefield);
}
]
);
As you can see, the controller function has two parameters, the first being a string and the second an array, and the last element in the array is just a regular function.
The solution
Checking the textAngular documentation I saw that the taApplyCustomRenderers is a factory, which means you can inject it into your controller function as so:
angular.module('dashboard').controller('EditController',
['$scope', '$http', '$location', '$routeParams', 'taApplyCustomRenderers',
function ($scope, $http, $location, $routeParams, taApplyCustomRenderers) {
taApplyCustomRenderers(); // is now Available.
}
]);
I want to make a promise in my angularjs controller. I took the example from the Angularjs Doc and pasted it in my controller. When I try to run the code, the console prints:
Error: $q is not defined
Why is this error happening and how do I solve it?
I tried to google this problem, but most questions revolve about more specific problems than mine.
A (german) guide tells me that promises are already in angular js implemented and there is no need to add anything to it.
EDIT:
this is my controller:
app.controller("ArgumentationController", [
'$scope', '$resource',
function($scope, $resource) {
EDIT2:
A commentor suggested to inject $q. I did this:
app.controller("ArgumentationController", [
'$scope', '$resource', '$q',
function($scope, $resource, $q) {
Now, the error does not occur.
From your past code, no need of $resource in your code. Instead inject $q in it.
As you are creating a dummy promise using $q, make following changes.
app.controller("ArgumentationController", [
'$scope', '$q',
function($scope, $q) {
This is a general dependency injection question. Obviously I am doing it wrong.
I am trying to get angular-xeditable working in my app.
https://vitalets.github.io/angular-xeditable/
I've installed it using bower, and added the appropriate script link to my head.
Now I'm trying to inject it.
The docs say
var app = angular.module("app", ["xeditable"]);
so, in my app: I do this:
portalApp.controller('portalController',
['$scope', '$http','$filter', 'xeditable',
function($scope, $http, $filter, xeditable) {
but I get the provide error, meaning it can't find xeditable.
angular.js:13642Error: [$injector:unpr] http://errors.angularjs.org/1.5.6/$injector/unpr?p0=xeditableProvider%20%3C-%20xeditable%20%3C-%20portalController
What am I doing wrong?
OK, duh. It should be
var portalApp = angular.module("portalApp", ['xeditable']);
portalApp.controller('portalController', ['$scope', '$http','$filter', function($scope, $http, $filter) {
I'm still getting lots of errors, but at least not that one.
I don't know why I am getting this error.
The error I am getting is Error: [ng:areq] Argument 'PreviewController' is not a function, got undefined.
Can someone help me out with this?
Also is there any other way to inject services in a controller?
My code is as follows:
(function() {
'use strict';
angular
.module('MyModule')
.controller('PreviewController' ['$scope','Service1','Service2',
function($scope, $http) {
$http.get("https://api.myjson.com/bins/30e2a")
.success(function(response) {
//Dummy data taken from JSON file
$scope.firstName = response.firstName;
$scope.lastName = response.lastName;
$scope.dateAdded = response.dateAdded;
});
//Functions have been defined. Functionality to be added.
$scope.cancelAndBack = function() {
window.history.back();
};
}]);
}());
You are defining you module incorrectly.
`angular.module('MyModule')`
Is looking for an already initialised module called 'MyModule'.
If you are creating a module from scratch you need to empty array. This would be more module dependencies.
`angular.module('MyModule', [])`
This is how angular knows the difference between, 'create an app' and 'get me an app'.
Finally services. Your using angulars array notation. That is so you can minify your javascript.
angularjs injection system works by name, that's how it can find the dependencies your require, that's also why you can list them in any order you like. However minifying your code changes your variable names and so breaks angular's injection.
The solution is to provide an array of strings telling angular the services you wish to inject and the order they are injected in.
So your array values and properties passed into your controller function must match.
Correct:
.controller('test', ["$scope", "$http", "myService", function( $scope, $http, myService){}]);
Incorrect: (myService won't be defined as its missing from the array)
.controller('test', ["$scope", "$http", function( $scope, $http, myService){}]);
Here is the code for my service. It is taken almost exactly from the first answer here.
var myApp = angular.module('myApp', ['ngRoute']);
myApp.service('sharedProperties',function(){
var property = "First";
return{
getProperty:function(){
return property;
},
setProperty:function(value){
property = value;
}
};
});
Here is the JSFiddle that shows my code in full and it not working.
The error I get is:
"Error: sharedProperties is not defined
For the line that the alert is on. I am just using an alert as a mere example of showing that the service is working before I extend the code further.
Anyone know why this simple example of a service is not working? I've thoroughly went over the code to make sure there are no typos or anything silly like that.
The answer that I linked has a JSFIDDLE that uses an older version of AngularJS. I was able to replace it with the version Angular being used in my JSFIDDLE and it still worked fine so it doesn't seem to be a version issue.
You need to inject the service to your controller:
myApp.controller('mainController', function($scope, sharedProperties) {
(Minification safe syntax)
myApp.controller('mainController', ["$scope", "sharedProperties", function($scope, sharedProperties) {
Working fiddle: http://jsfiddle.net/b2fCE/733/
You need to inject the service in your controller.
Here is the fiddle https://jsfiddle.net/b2fCE/732/
myApp.controller('mainController', function($scope, sharedProperties) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
alert(sharedProperties.getProperty());
});