I am trying to share variable among the controller so I am using angular's Factory. I have following code for the same:
var app = angular.module('chartApp', ['ngRoute']);
app.factory('UserVerified', function() {
return {bool: false};
});
app.config(function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'pages/home.html',
controller: 'PredictionController'
})
});
app.controller('PredictionController', ['$scope', '$http', '$interval', function($scope, $http, $interval){
$scope.hasPermission = UserVerified;
}]);
and on HTML i am just using hasPermission.bool to set visibility of a <div>.
But the issue is angularjs is unable to identify UserVerified defined in "app.factory".
I am getting following error:
ReferenceError: UserVerified is not defined
I referred following : Share data between AngularJS controllers
Only difference I can find is, I am using dependencies which is not used in the example in the above link.
you need to inject your custom service in your controller
app.controller('PredictionController', ['$scope', '$http', '$interval','UserVerified',function($scope,$http,$interval,UserVerified) {
$scope. hasPermission = UserVerified.bool; //true
}]);
inorder to avoid breaking of your application after minification of code you can also use $inject in angularjs to inject dependecies.
app.controller("PredictionController",PredictionController);
PredictionController.$inject = [$scope','$http','$interval','UserVerified']//dependencies
function PredictionController($scope,http,interval,UserVerified){
$scope. hasPermission = UserVerified.bool; //true
}
Note: Services names will be renamed after the minification and can indulge in breaking your application
You need to do this,
app.controller('PredictionController', ['$scope', '$http', '$interval', 'UserVerified', function($scope, $http, $interval, UserVerified){
$scope.hasPermission = UserVerified.bool;
}]);
You need to pass the service as a parameter to controller
You need to inject UserVerified into your controller.
app.controller('PredictionController', ['$scope', '$http', '$interval', 'UserVerified', function($scope, $http, $interval, UserVerified){
$scope.hasPermission = UserVerifiedvalue.;
}]);
Plus, in UserVerified you are returning a key which is a reserved word. It will work but will create unnecessary confusion.
app.factory('UserVerified', function() {
return {value: false};
});
Here is a plunker as a demo.
Related
I am trying to use uibModal (from angular-ui-bootstrap v0.12.1) in an angularJS application (v.148). I am aware of the current angular versions. When I am trying to use the modal using example code below, I am seeing the error:
TypeError: $uibModal.open is not a function
I have added the following to the application:
angular.module('someApp', ['ui.bootstrap']);
In the controller file, I am using the following:
angular.module('someAppController')
.controller('someController', ['$scope', '$http', $'location', '$modal', 'someService',
function($scope, $http, $locaton, $uibModal, someService) {
On an event:
$uibModal.open({
templateUrl: 'some.html',
windowClass: 'modal-danger'
});
I have tried replacing $uibModal to $modal (both in the module call and where I am trying to create the modal). However, I get the same error complaining about $uibModal.open or $modal.open is not a fucntion. Any thoughts on what I am doing wrong? I cannot find any issues with the versions or other dependencies causing issues.
You have some typos in your code and are not properly injecting the $uibModal provider
change
.controller('someController', ['$scope', '$http', $'location', '$modal', 'someService'
to
.controller('someController', ['$scope', '$http', '$location', '$uibModal', 'someService'
also change
templateUrk: 'some.html',
to
templateUrl: 'some.html',
Im not able to connect to a custom service (dataService) which i had made.
here is the controller code
angular.module('auth.controller', [])
.controller('AuthCtrl',function($scope, $state, $ionicHistory, dataService) {
//some code
});
here is my custom service
angular.module('data.service',[])
.service('dataService', ['$http',function ($http) {
//some code
}])
my main controller
angular.module('wgmsApp.controllers', ['auth.controller','dashboard.controller')
.controller('MenuCtrl', function($scope, $ionicPopup, $state){
}])
my service.js
angular.module('wgmsApp.services', ['data.service'])
All files are included properly in index.html
You have defined the service dataService as part of the module data.service.
Therefore, to be able to leverage the services of one particular module in another, you'll need to inject the former into the latter.
i.e.
angular.module('auth.controller', ['data.service']) // inject the `data.service` module here
.controller('AuthCtrl',function($scope, $state, $ionicHistory, dataService) {
//some code
});
try to use like this-
angular.module('auth.controller', [])
.controller('AuthCtrl',["$scope","$state","$ionicHistory","dataService",function($scope, $state, $ionicHistory, dataService) {
//some code
}]);
Hope this may help you.
I am trying to get URL parameters using $routeParams:
var myApp = angular.module('myApp', [
'ngRoute',
'appControllers',
'appFilters',
'appServices'
]).config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/admin/organisations/:organisation_id', {
controller: 'UpdateOrganisationCtrl'
});
}]);
and in my Controller:
appControllers.controller('UpdateOrganisationCtrl', ['$rootScope', '$scope', '$http', '$window', '$routeParams',
function($rootScope, $scope, $http, $window, $routeParams) {
console.log($routeParams.organisation_id);
}]);
However I am printing undefined as $routeParams is {} Any thoughts?
The url you tried to access should be
localhost:3000/#/admin/organisations/56cde4bf911747ea200d5a63
ngRoute will make your application a Single Page Application, where the relevant part of the url for the router will be after # (beautifully called the hashbang).
Look at the example:
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
However, the url you give could work if you use HTML5Mode for $location service of angular.
See those links for more information:
AngularJS routing without the hash '#'
Using $location
When I try to access the $location variable injected into the config from my resolve route, I get a "Unknown Provider" error in the console.
angular.module('myApp', ['ngRoute']).
config(['$routeProvider', '$locationProvider', function ($routeProvider, $location) {
$location.html5Mode(true);
$routeProvider.when('/', {
templateUrl: 'home/home.html',
controller:'homeCtrl',
controllerAs: "vm",
resolve:{
getData: function(){
var param = $location.search().options
}
}
})
Shouldn't the $location parameter be accessible like a closure? I'm fairly new to JS and Angular, so I need clarification.
Thanks!
if you're using the array notation, then the strings must match what you're injecting. in this case, if you want to use $location, you should inject $location, not $locationProvider
I am trying to use the angular google maps directive with my app, but I keep getting an "undefined error"
This is my app.js
angular.module('app', ['cs'])
.config(['GoogleMapApiProvider'.ns(), function (GoogleMapApi) {
GoogleMapApi.configure({
// key: 'your api key',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
}])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
//routes
}])
and my controller
angular.module('cs.Controllers')
.controller('MapController', ['$rootScope', '$scope', '$window', '$document', 'MenuService', 'GoogleMapApi'.ns(),
function($rootScope, $scope, $window, $document, menuService, GoogleMapApi) {
$rootScope.menuList = menuService.all();
}]);
What could be the problem
For others that got here that had added the missing dependency declaration, see: angular-google-maps , undefined is not a function
It looks like they've gotten rid of the ns() function, but haven't updated the documentation yet:
https://github.com/angular-ui/angular-google-maps/pull/872/
https://github.com/angular-ui/angular-google-maps/issues/821
Update all instances of 'string'.ns() to 'uiGmapstring' in your code and you should be good.
You're missing the dependency declaration in your app.
angular.module('app', ['google-maps'.ns(),'cs.Controllers']
Here's a plunker using one of the project's demo pages. I changed it to use the new provider.
http://plnkr.co/edit/eUbkv2qKu92T9iUp7yAF?p=preview