I'm trying to separate every controller in my angular app, but I have this error:
23:51:38.389 "Error: [ng:areq] http://errors.angularjs.org/1.5.0-rc.0/ng/areq?p0=skillsController&p1=not%20a%20function%2C%20got%20undefined
P/<#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:6:421
sb#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:22:41
Ta#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:22:128
af/this.$get</<#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:84:42
B#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:62:118
v#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:63:115
Vf/<#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:72:397
e/<#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:123:217
pf/this.$get</m.prototype.$eval#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:137:442
pf/this.$get</m.prototype.$digest#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:135:33
pf/this.$get</m.prototype.$apply#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:138:234
g#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:91:372
t#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:95:492
ag/</v.onload#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:97:31
"1 angular.min.js:111:399
e/<() angular.min.js:111
cf/this.$get</<() angular.min.js:84
e/<() angular.min.js:123
pf/this.$get</m.prototype.$eval() angular.min.js:137
pf/this.$get</m.prototype.$digest() angular.min.js:135
pf/this.$get</m.prototype.$apply() angular.min.js:138
g() angular.min.js:91
t() angular.min.js:95
ag/</v.onload() angular.min.js:97
pkApp.js:
angular.module('pkApp', ['Controllers']).value("version", "1.160110");
controllersModule.js:
angular.module('Controllers', []);
skillsController.js:
angular.module('Controllers', [])
.controller('skillsController', ['$scope', function($scope){
$scope.skills = [
"html",
"css",
"js",
"jquery",
"angularjs",
"php",
"mysql",
"joomla"
];
}]);
portfolioController.js:
angular.module('Controllers', [])
.controller('portfolioController', ['$scope', function($scope) {
$scope.sites = [{
name: "Site1",
href: "http://www.site1.pl",
img: "1"
}, {
name: "Site 2",
href: "http://www.site2.pl",
img: "2"
}, {
name: "Site 3",
href: "http://www.site3.pl",
img: "3"
}];
}]);
It looks like angular see new module and only first controller that was to it, next is treat as function?
Thank you in advance.
A simple Solution could be:
Define a variable with your module in pkApp.js
var app = angular.module('pkApp', []);
You can delete the controllersModule.js
Create your Controllers as follows:
app.controller('skillsController', ['$scope', function($scope){
$scope.skills = [
"html",
"css",
"js",
"jquery",
"angularjs",
"php",
"mysql",
"joomla"
];
}]);
Same thing with your portfolio controller. It doesn't matter how many files you like to use for your controllers.
See also: https://docs.angularjs.org/guide/controller
Hope, that helps...
Related
I am new to Angular and trying to group row's using Angular ui.grid.grouping. But I am seeing duplicate rows and its not grouped properly. I am using Angular js 1.7.2 version
app.js
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.grouping' ]);
app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridGroupingConstants', function ($scope, $http, $interval, uiGridGroupingConstants ) {
$scope.gridOptions = {
enableSorting: true,
enableGrouping:true,
treeRowHeaderAlwaysVisible: false,
columnDefs: [
{ name: 'City', width:'50%', grouping: { groupPriority: 0 },defaultSort: {priority: 0}},
{ name: 'CustomerName', width:'30%' }
],
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
}
};
$scope.gridOptions.data = [
{ "City": "TEXAS", "CustomerName": "AAA"},
{ "City": "TEXAS", "CustomerName": "BBB"},
{ "City": "TEXAS", "CustomerName": "CCC" },
{ "City": "MICHIGAN", "CustomerName": "DDD" },
{ "City": "NEW YORK","CustomerName": "EEE" },
{ "City": "MICHIGAN" ,"CustomerName": "FFF"},
{ "City": "MICHIGAN", "CustomerName": "GGG" },
{ "City": "MICHIGAN", "CustomerName": "HHH" },
{ "City": "NEW YORK","CustomerName": "III" }
];
}])
HTML:
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div>
</div>
Actual Result:
Expected Result:
Instead of 2 Michigan one Michigan
Instead of 2 New York one New York
Tried same thing using ng-grid and I am getting perfect result as below:Exactly same thing I am trying to achieve it using angular ui-grid
#Steve, thanks for your suggestions. As per your suggestion I added grouping with delay while registeringApi as below:
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
$timeout(function(){
$scope.gridApi.grouping.clearGrouping();
$scope.gridApi.grouping.groupColumn('City');
}, 300);
}
And it fixed it.
Try to add for column this row, it helps me:
sort: { priority: 0, direction: 'asc' }
How to display the following json in scroll bar using angularjs mvc
myjson whixh i get from api localhost:port/details using nodejs:
[
{
"id": 4,
"notes": "sdas 123",
"invoice": "232",
"objectType": "Customer",
"objectId": 5,
"dateCreated": "2015-09-29T22:54:06.000Z",
"dateModified": "2015-10-08T23:01:16.000Z"
},
{
"id": 10,
"notes": "sample Test",
"invoice": "123",
"objectType": "Customer",
"objectId": 5,
"dateCreated": "2015-09-30T06:38:52.000Z",
"dateModified": "2015-09-30T01:20:38.000Z"
}
]
Any help guys..?
yes i have started and tried like this :in my controller
my config as:
angular.module('customerdetails).config(['$stateProvider',
function($stateProvider) {
$stateProvider.
state('listCust', {
url: '/details',
templateUrl: "/customerdetails/views/listcustomer.client.view.html'
});
}
]);
my service:
angular.module('customer').factory('Customer',function($resource)
{
return $resource('/details');
});
my controller:
angular.module('customerdetails').controller('CustomerController', ['$scope', '$rootScope', '$state', '$stateParams', '$location', 'Authentication', 'Customer', 'InvoiceRefund', '$filter',
function ($scope, $rootScope, $state, $http, $stateParams, $location, Authentication, Customer, $filter) {
var cus = Customer.query(function() {
console.log(cus);
});
To display JSON data you can use follwoing syntax: {{variable | json}} in the template, but for that you need to assign $scope.variable = YOUR_JSON; in your controller code
I have the following code for angularjs working perfecly:
Working fine
But as soon as I use the above code without defining app I get an error and autocomplete stops working:
here is the code with jfiddle link:
function ctrl($scope) {
$scope.availableTags = [],
$scope.complete = function() {
/* return $scope.firstName + " " + $scope.lastName;*/
availableTags= [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$(document).ajaxComplete(function(){
$("#txt").autocomplete({
source: $scope.availableTags,
});
});
//return $scope.availableTags;
}
}
Here is jfiddle link:
jfiddle
Can anyone tell me the reason?
The app declaration is what tells Angular what code to load. It matches the ng-app directive in your html. Without that match, angular can't know what code you're trying to run.
I have declared twp app modules in my app.js file-"requestDashboard" and "newRequestDashboard"..."newRequestDashboard" is dependent upon "requestDashboard"(I have an array of objects that I'd like to display. Both of the apps have a different controller assigned to them and the array is stored in "requestDashboard". I maybe trying to overcomplicate this but I cannot for some reason display any of the objects. Code below:
app.js:
angular.module( 'requestDashboard', ['ngRoute', 'ui.bootstrap']);
angular.module( 'newRequestDashboard', ['ngRoute', 'ui.bootstrap', 'requestDashboard']);
Controller in "requestDashboard"
angular.module("requestDashboard")
.controller( 'requestDashboardCtrl', function ($scope) {
//Dummy Data for user requests
$scope.requests = [
{
type: "meeting1",
meetingName: "Radiology San Diego",
location:"Sheraton Ballroom 5S",
subitems: [
{
name: "ESCALATED",
desc: "Power strips at every table",
priority:"1",
planner:"Jessica Q. Planner",
time:"02/15/15 at 8:15 AM",
quantity:"3; one power strip at ever table"
},
{
name: "OPEN",
desc: "Extra table for 3",
priority:"3",
planner:"Jessica Q. Planner"
},
{
name: "ACKNOWLEDGED",
desc: "Projector for meeting",
priority:"2",
planner:"Jessica Q. Planner"
},
{
name: "CLOSED",
desc: "book exta room for 2 guests",
priority:"5",
planner:"Jessica Q. Planner"
},
{
name: "CANCELLED",
desc: "extra chairs",
priority:"1",
planner:"Jessica Q. Planner"
}
]
},
{
type: "meeting2",
meetingName: "California Almond Growers",
location:"Sheraton FL14",
subitems: [
{
name: "ESCALATED",
desc: "need some more almonds",
priority:"1",
planner:"Jessica Q. Planner"
},
{
name: "OPEN",
desc: "extra pamphlets",
priority:"4",
planner:"Jessica Q. Planner"
},
{
name: "ACKNOWLEDGED",
desc: "Power supply",
priority:"2",
planner:"Jessica Q. Planner"
}
]
},
{
type: "meeting3",
meetingName: "Association of Amateur Archaeologists",
location:"Ansley 1- FL14",
subitems: [
{
name: "ESCALATED",
desc: "need some more experience",
priority:"1",
planner:"Jessica Q. Planner"
},
{
name: "OPEN",
desc: "need dinosaurs",
priority:"3",
planner:"Jessica Q. Planner"
}
]
}
];
});
It is very common to have many apps in your application. But you should take a different approach to this. In your solution you are declaring dependency on all your app. Which will conflict if your application gets bigger. What you should so is something like this.
// declare your app without any dependency
(function() {
var requestDashboard= angular.module( 'requestDashboard',[]);
}());
(function() {
var newRequestDashboard= angular.module( 'newRequestDashboard',[]);
}());
// inject all your dependency here
var mainApp = angular.module( 'mainApp ', ['requestDashboard','newRequestDashboard','ngRoute', 'ui.bootstrap']);
About your question, Why don't you use Services? and services can be consumed in controller and then you can display back to your view.
Hope this helps
I have a UserAddController and I want to be able to access a list of countries returned by a Web API. The Web API returns data fine. Here is my app.js where I get the data :
app.factory('Country', function ($resource) {
return $resource(
"/api/country/:Id",
{ Id: "#Id" },
{ "update": { method: "PUT" } });
});
This is my Controller :
var UserAddController = function ($scope, $location, service, User) {
$scope.action = "Add";
$scope.countries = service.countries;
};
I am declaring and creating a service here :
app.factory('CountryService', CountryService);
function CountryService($resource) {
return $resource(
"/api/country/:Id",
{ Id: "#Id" },
{ "update": { method: "PUT" } });
}
I am using the same code as above just for testing purposes. I am injecting this service like this :
UserAddController.$inject = ['$scope', 'CountryService'];
This is my first attempt at dependency injection and I cannot figure out where I am going wrong. The error I currently get is 'service is undefined'. I have tried passing both the service and the Country object to the Controller with the same results. Can anybody give any advice?
EDIT : In my Controller, this populates successfully with an alert in the code, but without the alert does not populate. Any reason why this is?
function CountryService($rootScope, $http) {
var self = {};
//self.countries = [{ "$id": "1", "CountryId": 1, "CountryName": "United Kingdom" }, { "$id": "2", "CountryId": 2, "CountryName": "Republic of Ireland" }, { "$id": "3", "CountryId": 3, "CountryName": "Australia" }, { "$id": "4", "CountryId": 4, "CountryName": "New Zealand" }, { "$id": "5", "CountryId": 5, "CountryName": "United States" }, { "$id": "6", "CountryId": 6, "CountryName": "France" }, { "$id": "7", "CountryId": 7, "CountryName": "Germany" }, { "$id": "8", "CountryId": 8, "CountryName": "Finland" }];
$http({
method: 'GET',
url: '/api/country'
}).success(function (data, status, headers, config) {
self.countries = data;
});
alert(self.countries);
return self;
}
You need to add other services/dependencies.
UserAddController.$inject = ['$scope',
'$location',
'CountryService',
'UserService'];
I have assumed that last dependency is a service with name 'UserService'. It's signature would be
app.factory('UserService', UserService);
Edit :
You need to instantiate a new variable.
//Inside function body
$scope.countries = service.countries;
$scope.newCountry = $scope.countries.get({Id : someId},callbackFn);
Now you have a counrtry with 'someId' in $scope.newCountry
Make sure you injected ngResource.
app = angular.module("app", ['ngResource']);
You need to inject the modules correcly
UserAddController.$inject = ['$scope', '$location', 'CountryService', 'user'];
This is quoted the doc.
You can specify the service name by using the $inject property, which
is an array containing strings with names of services to be injected.
The name must match the corresponding service ID registered with
angular. The order of the service IDs matters: the order of the
services in the array will be used when calling the factory function
with injected parameters.
I created a FIDDLE and you can try.