In this plunker: http://plnkr.co/edit/OZa7rvWLQuRHJGiJ8dBL?p=preview
I'm having difficulty adding $http.get to the controller so that the page runs.
In app.js --
I have this code:
angular.module('example-app', ['hc.marked', 'hljs'])
.config(['markedProvider', 'hljsServiceProvider', function(markedProvider, hljsServiceProvider) {
// marked config
markedProvider.setOptions({
gfm: true,
tables: true,
sanitize: true,
highlight: function (code, lang) {
if (lang) {
return hljs.highlight(lang, code, true).value;
} else {
return hljs.highlightAuto(code).value;
}
}
});
}])
.controller("MainController", ["$rootScope", "$scope", "marked", function MarkdownController($rootScope, $scope, marked, $http) {
}]);
How to add this $http.get so that the plunker continues to work properly??
$http.get('http://beta.json-generator.com/api/json/get/VyD_JWT1Q')
.then(function (res) {
$scope.todos = res.data.todo;
$scope.events = res.data.event;
$scope.aboutlongs = res.data.aboutlong;
$scope.mainpoints = res.data.mainpoint;
$scope.tags = res.data.tag;
$scope.galleries = res.data.gallery;
$scope.menus = res.data;
$scope.socials = res.data.social;
});
I've tried this, but it breaks:
angular.module('example-app', ['hc.marked', 'hljs'])
.config(['markedProvider', 'hljsServiceProvider', function(markedProvider, hljsServiceProvider) {
// marked config
markedProvider.setOptions({
gfm: true,
tables: true,
sanitize: true,
highlight: function (code, lang) {
if (lang) {
return hljs.highlight(lang, code, true).value;
} else {
return hljs.highlightAuto(code).value;
}
}
});
}])
.controller("MainController", ["$rootScope", "$scope", "marked", function MarkdownController($rootScope, $scope, marked, $http) {
$http.get('http://beta.json-generator.com/api/json/get/VyD_JWT1Q')
.then(function (res) {
$scope.todos = res.data.todo;
$scope.events = res.data.event;
$scope.aboutlongs = res.data.aboutlong;
$scope.mainpoints = res.data.mainpoint;
$scope.tags = res.data.tag;
$scope.galleries = res.data.gallery;
$scope.menus = res.data;
$scope.socials = res.data.social;
});
}]);
Thanks in advance.
Please inject $http as a dependency in your controller.
.controller("MainController", ["$rootScope", "$scope", "$http", "marked", ....
Correct your order of dependency injection in controller ( between Marked and $http). It should be like:
.controller("MainController", ["$rootScope", "$scope", "$http", "marked", function MarkdownController($rootScope, $scope,$http, marked ) {
Plunker
Related
I've spent a few hours trying to debug this with no real breakthroughs. My console.logs correctly output the load order.
- app
- factory
- controller
I'm annotating my dependencies (even though I'm not minifying at the moment).
Is there anything obviously wrong here that I am missing?
error
app
(function () {
'use strict';
console.log("running app");
var app = angular.module('InventoryProductApp', []).config(function ($logProvider) {
$logProvider.debugEnabled(true);
});
angular.element(document).ready(function () {
var app = document.getElementById('InventoryProductApp');
angular.bootstrap(angular.element(app), ['InventoryProductApp']);
});
})();
controller
(function () {
'use strict';
angular.module('InventoryProductApp').controller("LocationsController", ['$scope', '$log', 'LocationsFactory'
, function ($scope, $http, $log, LocationsFactory) {
console.log("running controller");
$scope.locations = null;
$scope.loading = false;
//private methods -------------------------------------------------------------------------------------------------------------------------------------------------------------
var fetchLocationData = function (inventoryId) {
$scope.loading = true;
console.log(LocationsFactory);
var promise = LocationsFactory.getLocationData(inventoryId);
promise.then(function (data) {
$scope.loading = false;
if (data.success) {
$scope.locations = data.locations;
}
else
{
$log.error('There was an error getting location data');
}
}, function (data) {
$scope.loading = false;
$log.error('There was an error getting location data');
});
}
//end private methods ---------------------------------------------------------------------------------------------------------------------------------------------------------
//public methods --------------------------------------------------------------------------------------------------------------------------------------------------------------
var init = function (inventoryId) {
console.log('inventoryId', inventoryId);
fetchLocationData(inventoryId);
}
//end public methods ----------------------------------------------------------------------------------------------------------------------------------------------------------
init(inventoryId); // inventoryId is found in the partialView _inventoryLocationDistribution
}]);
})();
factory
(function () {
'use strict';
angular.module('InventoryProductApp').factory('LocationsFactory', ['$http', '$q', '$log', function ($http, $q, $log) {
console.log("running factory");
return {
getLocationData: function (inventoryId) {
var def = $q.defer();
$http.get('/butthead', {
params: {
inventoryId: inventoryId
}
}).then(function (response) {
def.resolve({
success: true,
locations: data.locations
});
}, function (response) {
$log.error('failed to fetch data', response);
def.resolve({
success: false,
redirect: response.redirect
});
});
return def.promise;
}
}
}]);
})();
script load order
<script src="~/theme/modern/assets/global/plugins/angularjs/angular.min.js"></script>
<script src="~/App/Inventory/Product/ProductApp.js"></script>
<script src="~/App/Inventory/Product/LocationsFactory.js"></script>
<script src="~/App/Inventory/Product/LocationsController.js"></script>
In your controller:
angular.module('InventoryProductApp').controller("LocationsController",
['$scope', '$log', 'LocationsFactory', function ($scope, $http, $log, LocationsFactory) {
You're missing '$http' in your dependency injections, which means the LocationsFactory argument isn't filled at all.
I have data in one controller and now I want to share it with another but both controller has different modules. I have used $rootscope but it didn't work. I have used service it also didn't work. link here Service
Is there any other way to do. I have spent one week for this please help me.
toolbar.controler
(function ()
{
'use strict';
angular
.module('app.toolbar')
.controller('ToolbarController', ToolbarController);
function ToolbarController($rootScope, $mdSidenav, msNavFoldService, $translate, $mdToast, $location, $localStorage, $http, $scope)
{
var vm = this;
vm.name = $localStorage.name;
vm.userId = $localStorage._id;
vm.readNotifications = function(notifId){
$http({
url: 'http://192.168.2.8:7200/api/readNotification',
method: 'POST',
data: {notificationId: notifId, userId: vm.userId}
}).then(function(res){
vm.rslt = res.data.result1;
console.log(vm.rslt);
vm.refresh();
$location.path('/sharedwishlistdetails');
}, function(error){
alert(error.data);
})
}
}
})();
The data stored here in vm.reslt.
toolbar.module.js
(function ()
{
'use strict';
angular
.module('app.toolbar', [])
.config(config);
/** #ngInject */
function config($stateProvider, $translatePartialLoaderProvider)
{
$translatePartialLoaderProvider.addPart('app/toolbar');
}
})();
Now I want that result for this controller.
sharedwishlistdetails.controller.js
(function ()
{
'use strict';
angular
.module('app.sharedwishlistdetails')
.controller('SharedWishlistDetailsController', SharedWishlistDetailsController);
/** #ngInject */
//NotificationsController.$inject = ['$http', '$location'];
function SharedWishlistDetailsController($http, $location, $localStorage, $rootScope, $scope)
{
var vm = this;
vm.uid = $localStorage._id;
}
})();
shareddata.service.js
(function ()
{
'use strict';
angular
.module('app.core')
.factory('shareData', shareDataService);
/** #ngInject */
function shareDataService($resource,$http) {
var shareData = {};
return shareData;
}
})();
write a service in 'app.toolbar' module
angular.module('app.toolbar').service('ServiceA', function() {
this.getValue = function() {
return this.myValue;
};
this.setValue = function(newValue) {
this.myValue = newValue;
}
});
In your toolbarController , inject ServiceA and set data -
vm.readNotifications = function(notifId){
$http({
url: 'http://192.168.2.8:7200/api/readNotification',
method: 'POST',
data: {notificationId: notifId, userId: vm.userId}
}).then(function(res){
vm.rslt = res.data.result1;
ServiceA.setValue(vm.rslt);
console.log(vm.rslt);
vm.refresh();
$location.path('/sharedwishlistdetails');
}, function(error){
alert(error.data);
})
}
Now write another service for 'app.sharedwishlistdetails' module -
angular.module('app.sharedwishlistdetails',['app.toolbar']).service('ServiceB', function(ServiceA) {
this.getValue = function() {
return ServiceA.getValue();
};
this.setValue = function() {
ServiceA.setValue('New value');
}
});
Now inject ServiceB in your SharedWishlistDetailsController controller and access data -
var sharedData = ServiceB.getValue();
How could $rootScope failed in your code it would be appreciated if you paste your code: never mind here is an example that will help you out:
All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive.
The rootScope is available in the entire application.If a variable has the same name in both the current scope and in the rootScope, the application use the one in the current scope.
angular.module('myApp', [])
.run(function($rootScope) {
$rootScope.test = new Date();
})
.controller('myCtrl', function($scope, $rootScope) {
$scope.change = function() {
$scope.test = new Date();
};
$scope.getOrig = function() {
return $rootScope.test;
};
})
.controller('myCtrl2', function($scope, $rootScope) {
$scope.change = function() {
$scope.test = new Date();
};
$scope.changeRs = function() {
$rootScope.test = new Date();
};
$scope.getOrig = function() {
return $rootScope.test;
};
});
Here is my html code:
<div ng-controller="withAjaxCtrl">
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
</div>
Here is my controller:
(function () {
var manageBackOrdersController = function ($scope, $http, $routeParams) {
$http({
url: '/Profiles/firstJson',
method: "GET",
params: {}
}).success(function (data) {
var JSON = data;
$scope.data = JSON;
});
}
manageBackOrdersController.$inject = ['$scope', '$http', '$routeParams'];
angular.module('customersApp')
.controller('manageOrdersController', manageOrdersController);
angular.module('datatablesSampleApp', ['datatables'])
.controller('withAjaxCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
$scope.dtOptions = DTOptionsBuilder.fromSource('scope.data')
.withPaginationType('full_numbers');
$scope.dtColumns = [
DTColumnBuilder.newColumn('Customer').withTitle('Customer')
];
});
}());
When I run my page I get an error saying "Error: [ng:areq] Argument 'withAjaxCtrl' is not a function, got undefined". My data is found stored in $scope.data.
Respectfully, Sameer's answer is incorrect. It took me two long arduoous days but I found the solution.
What you must keep in mind are 2 concerns:
Use DTOptionsBuilder.fromFnPromise, and
Have your promise inside your factory.
This is the correct solution:
'use strict';
WithResponsiveCtrl.$inject = ['DTOptionsBuilder', 'DTColumnBuilder', 'simpleFactory'];
angular.module('showcase.withResponsive', [])
.controller('WithResponsiveCtrl', WithResponsiveCtrl);
function WithResponsiveCtrl(DTOptionsBuilder, DTColumnBuilder, simpleFactory) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
return simpleFactory.getData(); }).withPaginationType('full_numbers')
// Active Responsive plugin
.withOption('responsive', true);
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
// .notVisible() does not work in this case. Use .withClass('none') instead
DTColumnBuilder.newColumn('lastName').withTitle('Last name').withClass('none')
]; }
simpleFactory.$inject = ['$http', '$q', '$log'];
angular.module('showcase.withResponsive').factory('simpleFactory', simpleFactory);
function simpleFactory($http, $q, $log) {
return {
getData: function () {
var deferred = $q.defer();
$http.get('api/data.json')
.success(function (data) {
deferred.resolve(data);
}).error(function (msg, code) {
deferred.reject(msg);
$log.error(msg, code);
});
return deferred.promise;
}
} };
I have a module 'global.services' in which I registered a service "Restservices"
(function(define, angular) {
"use strict";
define(["global/services/restServices"],
function(RestServices) {
var moduleName = "global.services";
angular.module(moduleName, [])
.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl('http://localhost:8888/src/app/data/');
RestangularProvider.setRequestSuffix('.json');
})
.factory('RestServices', RestServices);
return moduleName;
});
}(define, angular));
and my "RestService" is also a module
(function(define, angular) {
"use strict";
define(function() {
var restService = function($rootScope, Restangular) {
// body...
return {
getData: function(arg) {
// body...
$rootScope.$broadcast('gettingData');
return Restangular.oneUrl('listPanel');
}
}
};
return restService;
});
}(define, angular));
In the above service both $rootScope and Restangular are undefined.
Please tell me how to inject dependencies in this respect.
I found the reason of $rootScope and Restangular being undefined.
Factory registration is perfect but when I am trying to use it in a different module's controller I am injecting "global/services/restServices" instead of "global/services/services" which is the actual services module.
Previous code:
(function(define, angular) {
define(['global/services/restServices'], function(RestServices) {
var HeaderController = function($scope, $rootScope, $translate, $location, $document, RestServices) {
var user_modules = window.SESSION.getModules(),
modules = [];
angular.forEach(user_modules, function(moduleName) {
modules.push(window.CONFIG.MODULES[moduleName]);
});
RestServices.getData('webAppsData.json').get().then(function(d) {
if (d) {
if (d.response) {
$scope.webApps = d.response;
} else {
$scope.webApps = [];
}
} else {
$scope.webApps = [];
}
});
$scope.title = "Tumbler";
$scope.modules = modules;
};
return ["$scope", "$rootScope", "$translate", "$location", "$document", "RestServices", HeaderController];
})
}(define, angular));
Present code(working):
(function(define, angular) {
define(['global/services/services'], function() {
var HeaderController = function($scope, $rootScope, $translate, $location, $document, RestServices) {
var user_modules = window.SESSION.getModules(),
modules = [];
angular.forEach(user_modules, function(moduleName) {
modules.push(window.CONFIG.MODULES[moduleName]);
});
RestServices.getData('webAppsData.json').get().then(function(d) {
if (d) {
if (d.response) {
$scope.webApps = d.response;
} else {
$scope.webApps = [];
}
} else {
$scope.webApps = [];
}
});
$scope.title = "Tumbler";
$scope.modules = modules;
};
return ["$scope", "$rootScope", "$translate", "$location", "$document", "RestServices", HeaderController];
})
}(define, angular));
So, just inject the module and use its services.
I have a bookmarking app that takes in a url and automatically extracts a summary. When the client requests the server to add a new bookmark, the server sends back some initial information and initiates a process to extract the summary.
In the angular frontend, I have created directives for adding the bookmark and for managing each item in the bookmarks list. Within the listitem directive there is a checkSummary() method that will poll the server to get the summary.
I am having problems with the unit test for this latter directive. It fails with "Unsatisfied request" but when I log to the console at various points the $http.get() request seems to fire and I can see that $scope variables are updated so I don't really understand why it would fail with this cause. I've checked the answers to many different question but can't really find anything that would give some insight.
The code is the following:
bookmarks.js:
angular.module( 'userpages.bookmarks', [
'ui.router',
'ui.bootstrap',
'ui.validate'
])
.config(function config( $stateProvider ) {
$stateProvider.state( 'userpages.bookmarks', {
url: '/bookmarks',
templateUrl: 'userpages/bookmarks/bookmarks.tpl.html',
controller: 'BookmarksController',
data: { pageTitle: 'Bookmarks' },
});
})
.factory('bookmarksApiResource', ['$http', function ($http) {
var bookmarksUrl = '/api/v1/bookmarks/';
var api = {
getList: function() {
return $http.get( bookmarksUrl )
.then( function(response) { return response.data; });
},
getById: function(id) {
return $http.get( bookmarksUrl + id + '/' )
.then( function(response) { return response.data; });
},
addBookmark: function(articleUrl) {
return $http.post( bookmarksUrl, {article_url: articleUrl})
.then( function(response) { return response.data; });
},
checkSummary: function(id) {
return $http.get( bookmarksUrl + id + '/?fields=summary' )
.then( function(response) { return response.data; });
}
};
return api;
}])
.controller( 'BookmarksController', ['$scope', '$stateParams', 'bookmarksApiResource',
function BookmarksController( $scope, $stateParams, bookmarksApiResource) {
$scope.username = $stateParams.username;
$scope.templates = {
bookmarks: {
toolbar: 'userpages/bookmarks/bookmarks-toolbar.tpl.html',
listitem: 'userpages/bookmarks/bookmarks-listitem.tpl.html',
}
};
$scope.addBookmarkFormCollapsed = true;
$scope.bookmarks = [];
bookmarksApiResource.getList().then( function(data) {
$scope.bookmarks = data;
});
}])
.directive('newBookmark', ['bookmarksApiResource', function(bookmarksApiResource) {
var newBookmark = {
restrict: 'E',
templateUrl: 'userpages/bookmarks/bookmarks-add-form.tpl.html',
replace: true,
link: function($scope, $element, $attrs, $controller) {
$scope.addBookmark = function(articleUrl) {
var newBookmark = bookmarksApiResource.addBookmark(articleUrl);
$scope.bookmarks.push(newBookmark);
};
}
};
return newBookmark;
}])
.directive('bookmarksListitem', ['bookmarksApiResource', '$timeout',
function(bookmarksApiResource, $timeout) {
var listitem = {
restrict: 'E',
templateUrl: 'userpages/bookmarks/bookmarks-listitem.tpl.html',
replace: true,
scope: true,
link: function($scope, $element, $attrs, $controller) {
var checkSummary = function() {
if (!$scope.bookmark.summary_extraction_done) {
bookmarksApiResource.checkSummary($scope.bookmark.id).then(function(data){
if (data.summary_extraction_done) {
$scope.bookmark.summary_extraction_done = data.summary_extraction_done;
$scope.bookmark.summary = data.summary;
} else {
$timeout(checkSummary, 1000);
}
});
}
checkSummary();
}
};
return listitem;
}])
;
and the test is as follows:
bookmarks.spec.js
describe( 'userpages.bookmarks', function() {
var $rootScope, $location, $compile, $controller, $httpBackend;
var $scope, elem;
beforeEach( module( 'userpages.bookmarks', 'ui.router' ) );
... other tests ...
describe('bookmarks-listitem', function() {
var testBookmark;
beforeEach(module('userpages/bookmarks/bookmarks-listitem.tpl.html'));
beforeEach(inject(function(_$rootScope_, _$compile_, _$httpBackend_){
$rootScope = _$rootScope_;
$compile = _$compile_;
$httpBackend = _$httpBackend_;
testBookmark = {
id: 1,
title: 'Title of our first article',
url: 'http://www.example.com/some/article',
summary_extraction_done: false,
summary: '',
};
}));
it('when summary_extraction_done = false, checkSummary() should call the server and update the summary with the response', function () {
$httpBackend.when('GET', '/api/v1/bookmarks/1/?fields=summary').respond(200, {
summary_extraction_done: true,
summary: 'This is the summary for article 1.'
});
$httpBackend.expect('GET', '/api/v1/bookmarks/1/?field=summary');
$scope = $rootScope.$new();
$scope.bookmark = testBookmark;
elem = $compile('<bookmarks-listitem></bookmarks-listitem>')($scope);
$scope.$digest();
$httpBackend.flush();
expect($scope.bookmark.summary_extraction_done).toBe(true);
expect($scope.bookmark.summary).toBe('This is the summary for article 1.');
});
});
});
And the test results are:
Firefox 27.0.0 (Mac OS X 10.9) userpages.bookmarks bookmarks-listitem when summary_extraction_done = false, checkSummary() should call the server and update the summary with the respone FAILED
Error: Unsatisfied requests: GET /api/v1/bookmarks/1/?field=summary in .../frontend/vendor/angular-mocks/angular-mocks.js (line 1486)
createHttpBackendMock/$httpBackend.verifyNoOutstandingExpectation#.../frontend/vendor/angular-mocks/angular-mocks.js:1486
createHttpBackendMock/$httpBackend.flush#.../frontend/vendor/angular-mocks/angular-mocks.js:1464
#.../frontend/src/app/userpages/bookmarks/bookmarks.spec.js:6
Any suggestions would be helpful.
If you want to see what url httpBackend is using you can use following code to debug it.
$httpBackend.when("GET", new RegExp('.*')).respond(function(method, url, data) {
console.log("URL:",url);
});
Typo here:
$httpBackend.expect('GET', '/api/v1/bookmarks/1/?field=summary');
You are missing an s on the end of field.