So I am experimenting with Angular. I created the following module.
var archiveModule = angular.module('archiveModule', ['ngResource']);
archiveModule.factory('Archive', ['$resource',
function($resource) {
return $resource('/data/archive/:doc.json', {}, {
query: { method:'GET', params:{ doc: undefined }, isArray:true }
});
}]);
archiveModule.controller('ArchiveControl', ['$scope', '$http', 'Archive',
function ($scope, Archive) {
$scope.items = Archive.query();
$scope.orderProp = 'name';
}]);
My template everything happens within:
<div class="container" ng-app="archiveModule">
<div ng-controller="ArchiveControl">
I include the angular scripts at the bottom of my page:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-resource.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"></script>
And Chrome reports TypeError: undefined is not a function, and it goes back to the line $scope.items = Archive.query();.
According to http://docs.angularjs.org/api/ngResource.$resource, query is part of $resource and I modeled my resource off http://docs.angularjs.org/tutorial/step_11 I'm not sure what's going wrong here.
Your parameters don't line up with the dependencies that are declared. It's injecting $http into Archive...
archiveModule.controller('ArchiveControl', ['$scope', '$http', 'Archive',
function ($scope, Archive) {
Remove '$http' and it should work...
archiveModule.controller('ArchiveControl', ['$scope', 'Archive',
function ($scope, Archive) {
$scope.items = Archive.query();
$scope.orderProp = 'name';
}]);
Related
I am trying to call the function inside the controller 'Notification' when getNotification is called in the SelectNotificationCtlr. However when running this I get an Error stating that $rootScope is undefined on the line below console.log("log");. I have tried passing the $rootScope as a parameter in my getNotification function but still receive the same error.
Please see my code below, any advice or help would be really appreciated.
app.js
selectNotification.controller('selectNotificationCtlr', ['$scope', '$rootScope', 'notificationsService',
function($scope, $http, notificationsService, notificationService, $rootScope) {
$scope.getNotification = function() {
var id = $scope.selectedNotification;
notificationData = notificationsService.getNotifications();
console.log(notificationData);
console.log("log");
$rootScope.$emit("call", {});
}
}
]);
selectNotification.controller('Notification', ['$scope', '$rootScope',
function($scope, $rootScope) {
$rootScope.$on("call", function() {
$scope.parent(notificationService);
});
$scope.parent = function() {
console.log("log");
}
}
]);
Kind regards
CB
Your controller should have dependencies in the right order,
selectNotification.controller('selectNotificationCtlr', ['$scope', '$rootScope', 'notificationsService',
function($scope, $rootScope, notificationsService) {
I am trying to access url params in my controller:
I found this example, but I get an error that I think is related to loading the relevant modules.
app.controller('WidgetCtrl', ['$scope', '$routeParams', function ($scope, $routeParams, $http) {
var param1 = $routeParams.param1;
var param2 = $routeParams.param2;
var vm = $scope;
vm.data = "test";
}]);
Error:
Uncaught Error: [$injector:modulerr]
In my html I have:
<script src=".../angular-1.2.21/angular.min.js"></script>
<script src=".../angular-1.2.21/angular-route.min.js"></script>
What is the proper wat to access the url params and use them in the controller? which modules I need to load?
From the looks of it, you're not injecting $http, so it should be:
app.controller('WidgetCtrl', ['$scope', '$routeParams', '$http', function ($scope, $routeParams, $http) {
That should get rid of that error.
I have this code in a script.js file:
scotchApp.factory('myService', function() {
var savedData = {}
function set(data) {
savedData = data;
}
function get() {
return savedData;
}
return {
set: set,
get: get
}
});
scotchApp.controller('SharedController',['$scope', 'myService', function($scope) {
myService.set('hello');
$scope.message = myService.get();
}]);
when I try to upload an html that uses this code I get in chrome (F12 mode):
angular.js:12722 ReferenceError: myService is not defined
why?
You never injected your service into controller. Correct code:
scotchApp.controller('SharedController', ['$scope', 'myService', function($scope, myService) {
myService.set('hello');
$scope.message = myService.get();
}]);
Note controller function signature function($scope, myService) {...}.
Most propbably you have not added service script in index.html
<script src="src/your_path/script.js" ></script>
I couldn't pass the parameter from angular controller to factory. Can any one help me on this? It works without passing parameter but when I pass it it's not.
var app = angular.module('employee', ['ui.grid', 'ui.grid.saveState', 'ui.grid.selection', 'ui.grid.cellNav', 'ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.pinning', 'ui.bootstrap', 'ui.grid.autoResize','ui.grid.pagination']);
app.controller('EmpCtrl', ['$scope', '$http', '$interval', '$modal', '$log', 'gridService', function ($scope, $http, $interval, $modal, $log, gridService) {
$scope.LoadNextPage = gridService.LoadNextPage("5");
}]);
var gridService = function ($http, $rootScope) {
return {
LoadNextPage: function (hh) {
alert(hh);
},
gridOptions:gridOptions
};
};
app.factory('gridService', ['$http', '$rootScope', gridService]);
And this is how I use it in the view
<span id="pcNext"
class="glyphicon glyphicon-step-forward"
ng-click="LoadNextPage()">
</span>
The problem is in your controller:
$scope.LoadNextPage = gridService.LoadNextPage("5");
This means that your LoadNextPage is not a function but rather a result of the call to a function in your service. Which btw doesn't return anything but rather just displays an alert. But in your view, you're using LoadNextPage as a function call...
Change it to this so your controller's LoadNextPage will be a function that you can call from the view.
$scope.LoadNextPage = gridService.LoadNextPage;
and in your view:
<span id="pcNext"
class="glyphicon glyphicon-step-forward"
ng-click="LoadNextPage(5)">
</span>
This should work.
Note: I suspect that your gridOptions are defined somewhere outside of scope of your code that you provided in the question so that it doesn't throw and error because of the missing (likely) object. So I considered this a typo in your code and not the actual problem.
Don't want params in your view?
No problem. You can either create a wrapper function or bind it to specific parameters in your code:
// wrap
$scope.LoadNextPage = function() {
return gridService.LoadNextPage("5");
};
// bind
$scope.LoadNextPage = gridService.LoadNextPage.bind(this, 5);
Or bake the number in your service...
Issue here is gridOptions:gridOptions is not defined which throws error.
Remove ,gridOptions:gridOptions from factory.
Check snippet for working code and compare with your code.
var app = angular.module('employee', []);
app.controller('EmpCtrl', ['$scope', 'gridService', function ($scope, gridService) {
$scope.clickMe = function() {
$scope.LoadNextPage = gridService.LoadNextPage("5");
}
}]);
var gridService = function() {
return {
LoadNextPage: function (hh) {
alert(hh);
}
};
};
app.factory('gridService', ['$http', '$rootScope', gridService]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="employee" ng-controller="EmpCtrl">
<button ng-click="clickMe()">Button</button>
</div>
you not defined gridOptions function see this link:
angular.module("myApp", []).controller("myCon", function($scope, $interval, gridService){
$scope.LoadNextPage = gridService.LoadNextPage("5");
}).factory('gridService', ['$http', '$rootScope', gridService]);
function gridService($http, $rootScope){
return {
LoadNextPage: function (hh) {
alert(hh);
}
};
}
see this link
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