Can't get access to Angular constant - javascript

I'm trying to get access to my angular .constant via this code:
angular
.module('coreApp')
.constant('MY_CONSTANTS', {
myConstant_1: 'My constant'
})
My controller:
.controller('MyController', ['$log', '$rootScope', '$location', MY_CONSTANTS, MyController]);
function MyController($log, $rootScope, $location, MY_CONSTANTS, MyController) {
$log.debug(myConstant_1);
}
But i can't get the value and output the value from my constants. What's wrong with my code?

You have to wrap dependency inside single quote/double quote while specifying it inside an array. Here you are missing quotes aroud MY_CONSTANTS.
And then at the end of DI Array, it should be your controller function ArticleController not MyController
.controller('MyController',
['$log', '$rootScope', '$location', 'MY_CONSTANTS', ArticleController]);
//^^^^^ change here..
function ArticleController($log, $rootScope, $location, MY_CONSTANTS) {
$log.debug(MY_CONSTANTS.myConstant_1);
}

You need to use MY_CONSTANTS.myConstant_1 instead of just myConstant_1. And your code will be $log.debug(MY_CONSTANTS.myConstant_1);
And you also didn't wrap your MY_CONSTANTS into quote.

Related

Get current state in ionic app

Newbie to the whole ionic and angular scene.
I used the ionic creator to generate the view files.
My goal is to check if the user is logged in before proceeding in to a tab.
However, before getting to the authentication part, I wanted to check which window the user is on.
I am trying to use a simple alert/console.log to identify the progress.
Below is my code.
.controller('adminPageCtrl', ['$scope', '$stateParams', '$state', function ($rootScope, $scope, $stateParams, $state) {
//alert($state.current.name);
$scope.currState = $state;
var currentState = $state.current.name;
console.log($state);
}])
I have come across the below error which i cant seem to make heads or tails.
"ionic.bundle.js:26799 TypeError: Cannot read property 'current' of undefined".
Any help is greatly appreciated.
Even the console.log($state); command returns "undefined".
The problem with your code is that you are defining more depencencies than you are actually using.
You can either fix it by removing the reference to $rootScope on the function definition or adding it to the list of dependencies.
.controller('adminPageCtrl', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state) {
//alert($state.current.name);
$scope.currState = $state;
var currentState = $state.current.name;
console.log($state);
}])
OR
.controller('adminPageCtrl', ['$rootScope', '$scope', '$stateParams', '$state', function($rootScope, $scope, $stateParams, $state) {
//alert($state.current.name);
$scope.currState = $state;
var currentState = $state.current.name;
console.log($state);
}])
And since you are using the name of the dependencies to name the variables inside the function, you could also use Implicit Annotation (please take a look on the docs https://docs.angularjs.org/guide/di):
.controller('adminPageCtrl', function($scope, $stateParams, $state) {
//alert($state.current.name);
$scope.currState = $state;
var currentState = $state.current.name;
console.log($state);
})
You've need $rootScope dependency. Without them you will receive another list of arguments.
.controller('adminPageCtrl', ['$rootScope', '$scope', '$stateParams', '$state', function($rootScope, $scope, $stateParams, $state) {
$scope.currState = $state;
var currentState = $state.current.name;
console.log($state);
}])

AngularJS - controller and factory - where am I going wrong at include/inject functions?

I'm new to Angular and cannot pinpoint where I am going wrong. I'm just trying to simply inject my factory into my controller, reference said: "Cannot read property 'validar' of undefined". I have two files, ServiceUtil.js where have a service and CentroCustoCtrl.js where I'm trying to use service's function.
The function at ServiceUtil.js:
(function () {
'use strict';
angular.module('Services', [])
.service('ValidarFormulario', [function () {
this.validar = function (form) {
var valido = true;
//code
}
return valido;
}
}]);
})();
And CentroCustoCtrl.js
(function () {
'use strict';
var app = angular.module("start", ['AxelSoft', 'ngLocalize',
'ngLocalize.Config', 'mvComponentes','Services'])
.value('localeConf', {
basePath: '../Scripts/Locales', ...
...
});
app.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
$scope.Salvar = function () {
if (ValidarFormulario.validar(document.getElementsByTagName('input'))) { ...// Cannot read property 'validar' of undefined
);
I tried with factory , but not worked too:
angular.module('Services', [])
.factory('ValidarFormulario', [function () {
return{
validar : function (form) {
var valido = true;
//code
}
}
return valido;
}
}
}]);
})();
Please, I appreciate any help you can provide.
The problem is you had wrong dependency sequence inside DI inline array, basically they are mismatching in number and their sequences
app.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario',
//removed $rootScope, $timeout which wasn't used.
function ($scope, $http, ValidarFormulario) {
OR either way you could just add the dependency inside array, if they are really gonna used inside controller like below
app.controller('CentroCustoCtrl', ['$scope','$http','$rootScope','$timeout','ValidarFormulario',
function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
Just change the below line of code
app.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
to
app.controller('CentroCustoCtrl', ['$scope', '$http', '$rootScope', '$timeout', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
This should work.
Well, also I've saw that your controller injections are wrong. You have:
App.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario)
And you should have:
app.controller('CentroCustoCtrl', ['$scope', '$http', '$rootScope', '$timeout', 'ValidarFormulario', function ($scope, $http, $rootScope,$timeout, ValidarFormulario)
Injectors on "[ ]" must mach with function parameters.
When you set a module the syntax is:
angular.module('Services', [ here injections ])
But when you get a module to use it, syntax must be:
angular.module('Services')

Angular: strange behavior with ngCookies

In my Angular app
var mainApp = angular.module('mainApp', ['ngCookies']);
I've defined authCtrl controller:
mainApp.controller('authCtrl', ['$scope, $cookies',function ($scope, $http, $cookies) {
$scope.credentials = {};
$scope.signCheck = function () {
a = $cookies.getObject('session_credentials');
console.log(a);
};
}]);
If I'm removing $scope declaration from array (injection array?)
mainApp.controller('authCtrl', ['$cookies',function ($scope, $http, $cookies) {
$scope becomes undefined.
If I'm removing $cookies — $cookies becomes undefined.
If I keep them both — $injector unknown provider error.
What I'm doing wrong?
Just be sure that you indicate the services in a correct order in the injector array and the controller function params:
Angular docs says:
This is the preferred way to annotate application components. This is
how the examples in the documentation are written.
For example:
someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
// ...
}]);
Here we pass an array whose elements consist of a list of strings (the
names of the dependencies) followed by the function itself.
When using this type of annotation, take care to keep the annotation
array in sync with the parameters in the function declaration.
Perhaps this controller definition will work for you:
mainApp.controller('authCtrl', ['$scope', '$http', '$cookies', function ($scope, $http, $cookies) {
$scope.credentials = {};
$scope.signCheck = function () {
a = $cookies.getObject('session_credentials');
console.log(a);
};
}]);

angular.js routing and stateparams

I'm trying to modify standard user module of meanjs. I added a simple route:
state('users', {
url: '/users/:username',
templateUrl: 'modules/users/views/view-profile.client.view.html'
});
And in my view:
data-ng-controller="ViewProfileController" data-ng-init="findUser()"
I also injected $stateParams to my controller. So in my ViewProfileController - findUser function, when I write this:
console.log($stateParams.username)
I expect to get username parameter. But it returns undefined.
When I set the route this way,
state('users', {
url: '/users/:username',
template: function ($stateParams){
return $stateParams.username;
}
});
it returns username. I don't know what is wrong or missing. Any ideas?
edit: this was my full controller code
'use strict';
angular.module('users').controller('ViewProfileController', ['$scope', '$http', '$stateParams', '$location', 'Users', 'Authentication',
function($scope, $http, $location, Users, Authentication, $stateParams) {
$scope.user = Authentication.user;
$scope.findUser = function () {
console.log($stateParams);
...
};
}
]);
Your dependencies don't match up - the list of dependencies need to match the parameters in the controller function in the same order:
'use strict';
angular.module('users')
.controller('ViewProfileController', ['$scope', '$http', '$stateParams', '$location', 'Users', 'Authentication',
function($scope, $http, $stateParams, $location, Users, Authentication) {
$scope.user = Authentication.user;
$scope.findUser = function () {
console.log($stateParams);
};
}
]);
I should use controller instead of template.
Replace into you code the template: to the follow snippet:
controller: function($stateParams){
console.log('username: '+$stateParams.username);
}
You can see a complete example of this feature here

ng-repeat with custom directive throwing error

I am creating a custom directive in a controller and calling it in ng-repeat as follows:
HTML:
<div ng-controller="TestCtrl">
<div ng-repeat="page in pages">
<custom
load-data="loadData = fn">
</custom>
</div>
</div>
JS:
Test directive is as follows:
scope: {
loadData: "&"
}
controller: ['$scope', '$element', '$timeout', '$filter', function ($scope, $element, $timeout, $filter) {
$scope.loadData({ fn: function(data) {
//Data calc.
}});
}
I am calling loadData from TestCtrl as follows:
App.controller('TestCtrl', function($scope, $http, $timeout, $rootScope) {
$scope.loadData(data);
}
In TestCtrl scope, loadData function is present if ng-repeat is not used and works fine but gives error as undefined is not a function at line where $scope.loadData(data) is called when ng-repeat is used.
Thanks in Advance
The controller of your directive is not correct, It's syntax is
controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... }
$timeout, $filter should come after $attrs and $transculde. You need to include both even if you are not using it
Even after above changes, if there is still an issue, then we can check further, but the above has to be fixed or else you wont be able to use $timeout and $filter

Categories

Resources