I tried to use the code below to set cookies:
angular.module('myApp').controller('myController', ['$scope', '$http','$cookies', function ($scope, $http, $cookies) {
$scope.setMyCookie = function () {
$cookies.put('Mykey', 'MyValue');
};
$scope.setMyCookie();
}]);
I updated to version 1.3.14 of angular cookies, I know there is a breaking change, but how should I write the above code now ?
Running the above code I get this error : Error: $cookies.put is not a function
UPDATE :
I have to do this in 2 files:
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
}]);
angular.module('myApp', ['ngCookies']).controller('cookiesExample', ['$cookies', function ($cookies) {
// Retrieving a cookie
var favoriteCookie = $cookies.myFavorite;
// Setting a cookie
$cookies.myFavorite = 'oatmeal';
}]);
It happends via setting the $cookies variable:
angular.module('cookiesExample', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
// Retrieving a cookie
var favoriteCookie = $cookies.myFavorite;
// Setting a cookie
$cookies.myFavorite = 'oatmeal';
}]);
Your version:
angular.module('myApp', ['ngCookies'])
.controller('myController', ['$scope', '$http','$cookies', function ($scope, $http, $cookies) {
// Retrieving a cookie
var favoriteCookie = $cookies.myFavorite;
// Setting a cookie
$cookies.myFavorite = 'oatmeal';
}]);
Source
NOTE:
Remember to include <script src="angular-cookies.js"> in your html.
You must inject ngCookies in your module:
angular.module('myApp', ['ngCookies'])
Missing ngcookies in your module
angular.module('myApp', ['ngCookies'])
Related
I would like to store some information through module's function .value. I configure like follow
app:
angular.module('MyApp1', ['ngRoute', 'ngCookies', 'ngAnimate', 'angular-loading-bar' ])
angular.module('MyApp2', ['ngRoute', 'ngCookies', 'ngAnimate', 'angular-loading-bar'])
angular.module('MyApp3', ['ngRoute', 'ngCookies', 'ngAnimate', 'angular-loading-bar'])
.value('LoggedUser', {email: '',role: ''})
controller:
angular.module('MyApp1').controller('LoginController', ['LoggedUser', function ($scope, $cookies, $window, AuthenticationService, StorageService, SessionService, LoggedUser) { }]);
but I receive an error about injection module, which AuthenticationService, StorageService and SessionService are factory and correctly work.
Any suggestions?
UPDATE 1
Understood what #JB Nizet said. Modified like this:
angular.module('MyApp1', ['ngRoute', 'ngAnimate', 'angular-loading-bar'])
.value('LoggedUser', {
email: '',
role: ''
});
angular.module('MyApp2', ['ngRoute', 'ngAnimate', 'angular-loading-bar']);
angular.module('MyApp3', ['MyApp1', 'ngRoute', 'ngAnimate', 'angular-loading-bar'])
Is correct the dependencies? The life cycle must be:
in MyApp1 I insert some info in LoggedUser.
in MyApp3 I read from LoggedUser (from MyApp1)
MyApp2 is stand alone and it don't have any dependecies from MyApp1 and MyApp3.
UPDATE 2
This night I simplify the modules. Now I have only 2 modules. The modules are independent of each other
angular.module('MyApp1', ['ngRoute', 'ngAnimate', 'angular-loading-bar'])
angular.module('MyApp2', ['ngRoute', 'ngAnimate', 'angular-loading-bar'])
I create a factory for store global variables, this:
angular.module('MyApp2').factory('LoggedUserInformationService', function ($rootScope) {
var LoggedUser = {};
return {
Set: function (email, isAdmin) {
LoggedUser.Email = email;
LoggedUser.IsAdmin = isAdmin;
return LoggedUser;
},
Get: function () {
return LoggedUser;
}
};
//var LoggedUser = {};
//var loggedUserService = {};
//loggedUserService.Get = function () {
// return $rootScope;
//};
//loggedUserService.Set = function (email, battleTag, isAdmin) {
// User = {};
// User.Email = email;
// User.IsAdmin = isAdmin;
// $rootScope.$emit('LoggedUser', User);
//return loggedUserService;
}).run(function () { });
but when I Set data in a page, in other the get is undefined.
angular.module('MyApp2').controller("MenuController", function ($scope, LoggedUserInformationService) {
$scope.init = function () {
console.log(LoggedUserInformationService.Get());
}
});
Why is undefined?
You need to inject all dependencies in your controller.
angular.module('MyApp1').controller('LoginController',
['$scope', '$cookies', '$window', 'AuthenticationService', 'StorageService', 'SessionService', 'LoggedUser',
function ($scope, $cookies, $window, AuthenticationService, StorageService, SessionService, LoggedUser) {
// function def
}
]
);
or like this
angular.module('MyApp1').controller('LoginController', loginCtrl);
loginCtrl.$inject = ['$scope', '$cookies', '$window', 'AuthenticationService', 'StorageService', 'SessionService', 'LoggedUser'];
function loginCtrl($scope, $cookies, $window, AuthenticationService, StorageService, SessionService, LoggedUser){
//function def
}
count of dependencies that injected by inline annotation must be match count of parameters passing into function (implicit injected) .
Unknown provider: LoggedUserProvider <- LoggedUser <- LoginController
above error occurs because angular can't to recognize LoggedUser (that injected by inline annotation way) related to which parameters those are passing into function.
when using this type of annotation, take care to keep the annotation
array in sync with the parameters in the function declaration
angular.module('MyApp1', []);//set injections you need
angular.module('MyApp1').controller(
'LoginController'['$scope','$cookies','$window','AuthenticationService','StorageService','SessionService','LoginController', 'LoggedUser',
function ($scope, $cookies, $window, AuthenticationService, StorageService, SessionService, LoggedUser) {
//your code
});
furthermore you declare 3 modules those are separated and as JB Nizet and maher said you should have 3 sub-module and one main module and inject 3 module as sub modules of main module :
angular.module('MainApp', ['ngRoute', 'ngAnimate', 'angular-loading-bar','MyApp1','MyApp2','MyApp3']);
angular.module('MyApp1', []);
angular.module('MyApp2', []);
angular.module('MyApp3', []);
I am new to angular testing. Facing some issues while testing angular code using jasmine.
It will be highly appreciated if you read my question and try to solve my problem as i googled it but could not find any satisfactory solution
Here is my angular app
var app = angular.module('myApp', ['ngAnimate', 'ui.router', 'ui.bootstrap', 'toggle-switch',
'ngTagsInput', 'blockUI', 'ngBootbox', 'ui.select', 'ngSanitize', 'angular.filter']);
app.config(["$httpProvider", "blockUIConfig", function ($httpProvider, blockUIConfig) {
'use strict';
blockUIConfig.autoBlock = false;
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$httpProvider.interceptors.push('interceptorService');
}]);
And here is controller file:
app.controller('myController', ['$scope', '$filter', '$http', '$window', '$ngBootbox', '$modal', 'dataservice', 'user', 'message_kinds',
function($scope, $filter, $http, $window, $bB, $modal, dataservice, user, message_kinds) {
$scope.user = user;
/controller logic/
}]);
I want to test this controller if $scope.user equals to user or not.Am using jasmine for testing. Here is spec file.
describe("myController", function() {
beforeEach(module('myApp'));
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
describe("myController testing", function () {
it("should update scope.user", function () {
var user = {customer_id: 1};
var my_controller = $controller('myController', { user: user });
expect(my_controller.user).toEqual(user);
});
});
});
I have also included all dependency files like angular.js, angular-mocks.js etc in SpecRunner.html
Having three problems:
Facing [$injector:unpr] http://errors.angularjs.org/1.4.4/$injector/unpr?p0=interceptorServiceProvide error on app.config block regarding $httpProvider
ReferenceError: $controller is not defined in spec.js at line
var my_controller = $controller('myController', { user: user });
How can I test if scope.user is equals to user in expect block?
1) Check this answer, as regards $http/$httpBackend which might help you - you can adapt this to get the answers you're looking for
2) Have you declared $controller (and now $httpProvider) as a variable in the beginning of the describe() block?
3) You should have that already. Your code, at least as I can see, looks like it should work like you want it to.
I have a problem with upload module in Angular. I install module from https://github.com/nervgh/angular-file-upload
I use Angular 1.5.0
In index.html i have:
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-file-upload/dist/angular-file-upload.js"></script>
<script src="scripts/app.js"></script>
My app.js
var app = angular
.module('MyApp', [
'ngAnimate',
'ngCookies',
'datatables',
'ngResource',
'ngRoute',
'angularFileUpload',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider...
This is my main.js
angular.module('MyApp')
.controller('MainCtrl', ['$rootScope', '$scope','$upload','$location', 'myService', function ($rootScope, $scope,$upload,$location, myService) {
}]);
In console : Error: [$injector:unpr] Unknown provider: $uploadProvider <- $upload <- MainCtrl
$upload variable is undefined
Please help me.
Just replace $uploader to FileUploader. there is some problem with fileuploader module, and updated FileUploader module using FileUploader service.
angular.module('MyApp')
.controller('MainCtrl', ['$rootScope', '$scope','FileUploader','$location', 'myService', function ($rootScope, $scope,FileUploader,$location, myService) {
var uploader = $scope.uploader = new FileUploader({
url: 'upload.php'
});
//Any other code or processing
}]);
Wrong injector used please check above
I am getting javascript run time error
myApp is undefined
for my angular service. Don't know what wrong im doing here..
This is how i defined my app.js
app.js
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource',]);
myApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/motors', {
templateUrl: 'View/motorList.html',
controller: 'motorController'
}).
when('/motors/:Id', {
templateUrl: 'View/motorDetails.html',
controller: 'motorDetailsController'
}).
otherwise({
redirectTo: '/motors'
});
}]);
This is how i am creating/calling myApp in controller.
Controller
angular.module('myApp', []).controller('motorController', function ($scope, motorService) {
//////
}
This is how i am trying use myApp in my service. but it gives error myApp is undefined.
Service:
myApp.service('motorService', ['$http', function ($http) {
//////
}
and this is how i declared it in my html
<html ng-app="myApp">
Looking forward for some help.
Thanks
I think that the error is in the controller's declaration, because you're defining the app 'myApp' twice.
angular.module('myApp', []).controller('motorController', function ($scope, motorService) {
//////
}
should be
angular.module('myApp').controller('motorController', function ($scope, motorService) {
//////
}
Edit
#simbada
It's up to you. You can separate them in different modules.
(function(angular){
angular
.module('myApp', ['myApp.Controllers']);
angular
.module('myApp.Services', [])
.service('mySrv', function($http){
function _get(){
return $http.get('url');
}
return {
get: _get
}
});
angular
.module('myApp.Controllers', ['myApp.Services'])
.controller('myCtrl', function($scope, mySrv){
$scope.var = 'Hello';
});
})(angular);
You have passed comma in dependancy after ngResource just remove that it'll work fine.
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource']);
I think this should be
angular.module('myApp').controller('motorController', function ($sc...
whitout [ ] brackets.
also see how you declare your service:
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource']);
when your service is 'motorService'
Your service should be:
myApp = angular.module('motorServices');
myApp.service('motorService', ['$http', function ($http) {
//////
}
Since I'm minifying and uglifying my JS, I can't simply do the following:
var app = angular.module('app', []);
app.controller('MyController', function($scope, $http) {
// ...
});
It will throw an inject-related error since minifying it jumbles up the $scope var.
Instead, I have to do this:
app.controller('MyController', ['$scope', function($scope) {
$scope.angularIs = "awesome";
}]);
Question: Using the second approach, how do I add the http service? Something like this?
app.controller('MyController', ['$scope&$http', function($scope, $http) {
// ...
}]);
And can my angular.module('app', []); declaration stay the same, or do I have to add some type of http dependency to the []'s? Thanks!
You can just use:
app.controller('MyController', ['$scope', '$http', function($scope, $http) {
// ...
}]);
It will match then against the arguments inside function(). Your app's dependencies will always be strings, so those will be fine when minified.
use this:
app.controller('MyController', ['$scope','$http', function($scope, $http) {
// ...
}]);