I am working with IONIC Framework (Angularjs)
I am receiving below error,
463788 error Error: [ng:areq] http://errors.angularjs.org/1.4.3/ng/areq?p0=PaymentCtrl&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://localhost:8100/lib/ionic/js/angular/angular.min.js:6:416
at Sb (http://localhost:8100/lib/ionic/js/angular/angular.min.js:22:18)
at Qa (http://localhost:8100/lib/ionic/js/angular/angular.min.js:22:105)
at http://localhost:8100/lib/ionic/js/angular/angular.min.js:79:497
at I.appendViewElement (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:4463)
at Object.O.render (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:16:17590)
at Object.O.init (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:16:16825)
at I.render (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:3419)
at I.register (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:3150)
Here is my code for controller.
define(['ionic', 'ionicAngular', 'angular',
'ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter'],
function (ionic, ionicAngular, angular) {
'use strict';
console.log('Payment controller ');
var PaymentCtrl = function ($scope, PaymentSvc,$state, $ionicLoading) {
/*$scope.phoneNumberVerification = function() { $state,$ionicPopup,
console.log('PhoneNumber controller added1 ');
$ionicLoading.hide();
$state.go('tab.eateries');
};*/
// When button is clicked, the popup will be shown...
};
return PaymentCtrl;
});
Serveics.js
define(['ionic', 'ionicAngular', 'angular',
'ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter'],
function (ionic, ionicAngular, angular) {
'use strict';
//console.log('service modules');
var PaymentSvc = function(){
console.log('serverices call');//var svc = this;
}
return PaymentSvc;
});
// });*/
payment.js
define(['ionic', 'ionicAngular', 'angular',
'./modules/payment/controllers/paymentctrl',
'./modules/payment/services/services',
'ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter'],
function (ionic, ionicAngular, angular,
paymentCtrl,
paymentSvc) {
'use strict';
console.log('payment.js modules');
var payment = angular.module('payment', ['ionic'])
.controller('PaymentCtrl', paymentCtrl)
.service('PaymentSvc',paymentSvc);
return payment;
});
No need to inject ['angular','ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter']. Ionic automatically inject angular decencies when you inject ['ionic']
Just write your controller directly
angular.module('starter', ['ionic']).controller('PayCtrl',function ($scope,$state,$ionicLoading,PaymentSvc){
//starter is the app name come from ng-app="starter"
$ionicLoading.show();
$scope.phoneNumberVerification = function(){
console.log('PhoneNumber controller added1');
$ionicLoading.hide();
$state.go('tab.eateries');
};
});
I advise you to organize your javascript project files to in 3 files:
app.js which contains
angular.module('starter', ['ionic', 'starter.controllers','starter.services'])..config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
}).state('app.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/home.html',
controller : 'HomeCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/home');
});
controller.js which contains your controllers
angular.module('starter.controllers', []).controller('AppCtrl', function('PayCtrl',function ($scope,$state,$ionicLoading,PaymentSvc){
$ionicLoading.show();
$scope.phoneNumberVerification = function(){
console.log('PhoneNumber controller added1');
$ionicLoading.hide();
$state.go('tab.eateries');
};
});
service.js which contains you connections to server
angular.module('starter.services', []).factory('PaymentSvc',function($http,$q){
});
it is an injection error. for example, if you inject ['a','b','c'] you must have it in your function in the same order and amount: function(a,b,c). in your case, you have more parameters in the injection than the parameters in your controller function.
Related
I am getting headercontroller not defined error. I have reference this controller.js file in Index.html and is there anything i am missing
Controller.js
(function () {
'use strict';
angular
.module('myApp')
.controller('headerController', headerController);
headerController.$inject = ['$scope', '$http' ,'$rootScope'];
function headerController($scope, $http) {
var vm = this;
}
})();
app.js
(function () {
var myapp = angular.module('myApp', ["ui.router"]);
myapp.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "SOC/Views/route1.html",
controller: "route1ctrl"
})
.state('route2', {
url: "/route2",
templateUrl: "SOC/Views/route2.html",
controller: "route2ctrl"
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
})();
Index.html
<script src="app.js"></script>
<script src="SOC/Directives/Header/controller.js"></script>
I tried even this below code it does not work
angular
.module('myApp', [])
.controller('headerController', headerController);
You are overwrite the dependency of the angular module by providing empty array
angular
.module('myApp', [])
.controller('headerController', headerController);
Remove the array from module('myApp)
angular
.module('myApp')
.controller('headerController', headerController);
Controller.js
(function () {
'use strict';
function headerController($scope, $http) {
var vm = this;
}
headerController.$inject = ['$scope', '$http' ,'$rootScope'];
angular
.module('myApp')
.controller('headerController', headerController);
})();
More about $inject in angularjs - https://docs.angularjs.org/guide/di
I have just created a simple app. Route for main controller is working but not for another one.
This is the part of the code of route file
$routeProvider
.when('/', {
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.when('/signatures', {
templateUrl: 'app/components/signature/signature.html',
controller: 'SignatureController',
controllerAs: 'signature',
resolve: {
signatureLists: function(SignatureService){
return SignatureService.getSignatures();
}
}
})
.otherwise({
redirectTo: '/'
});
and below is the controller
(function() {
'use strict';
angular
.module('demoapp')
.controller('SignatureController', SignatureController);
/** #ngInject */
function SignatureController(signatureLists) {
var vm = this;
vm.signatures = signatureLists;
}
})
I have defined the module in another file:
(function() {
'use strict';
angular
.module('demoapp', ['ngRoute', 'toastr']);
})();
when I try to visit /signatures page, I get this error:
Error: [ng:areq] Argument 'SignatureController' is not a function, got undefined
Maybe its just a silly error due to a typo or something else but still I can't figure it out
You forgot to self invoke the controller closure..do a () at the end
(function() {
'use strict';
angular
.module('demoapp')
.controller('SignatureController', SignatureController);
/** #ngInject */
function SignatureController(signatureLists) {
var vm = this;
vm.signatures = signatureLists;
}
})()
The goal here is to send an http request with the same parameter of the state parameter. This will then display the food types associated with the cuisine type that has been clicked. Is this even theoretically possible?
"Error: [$injector:unpr] Unknown provider: getFoodsProvider <- getFoods <- AppCtrl"
js
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url:'/',
templateUrl: 'partials/home.html',
controller: 'AppCtrl'
})
.state('food', {
url: '/food/:cuisine',
templateUrl: 'partials/food.html',
controller: 'AppCtrl',
resolve: {
getFoods: ['$http', '$stateParams', function($http, $stateParams) {
var url = '/getfoods/' + $stateParams.cuisine;
return $http.get(url).success(function(response) {
return response.data;
})
}]
}
});
$urlRouterProvider.otherwise('/');
});
myApp.controller('AppCtrl', ['$scope', 'getFoods', function ($scope, getFoods) {
$scope.foods= getFoods;
}]);
home
<md-list>
<md-list-item ng-repeat="cuisine in cuisines">
<a ui-sref="food({cuisine:cuisine})">{{cuisine}}</a>
</md-list-item>
</md-list>
food
<md-list>
<md-list-item ng-repeat="food in foods">
<div>{{food}}</div>
</md-list-item>
</md-list>
Your logic seems perfect and it should work. But I think as you're sending ajax request in the resolve and it works asynchronously you need a resolve there. And no need to use the resolve value in controller. Just set the data of the http response in a factory and use the same factory to get the data in the controller.
So try this:
resolve: {
getFoods: ['$http', '$stateParams','$q','foodData' function($http, $stateParams, $q,foodData) {
var url = '/getfoods/' + $stateParams.cuisine,
deferred = $q.defer(),
$http.get(url).success(function(response) {
foodData.setData(response.data);
deferred.resolve();
}).error(function(error){
deferred.reject();
$state.go(some other state);
})
return deferred.promise;
}]
}
On the off-chance that someone needs a solution to the same problem, you should know it was resolved by creating a separate controller for the state with the service (see comment below). The main controller was trying to load the 'getFoods' service when its associated state hadn't been activated yet. No promises necessary. Also, I added .data after the service in the controller.
new controller
var myApp= angular.module('myApp');
myApp.controller('foodCtrl', ['$scope', 'getFoods', function ($scope, getFoods) {
$scope.foods = getFoods.data; //added .data after service
}]);
main js
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url:'/',
templateUrl: 'partials/home.html',
controller: 'AppCtrl'
})
.state('food', {
url: '/food/:cuisine',
templateUrl: 'partials/food.html',
controller: 'foodCtrl', //specify different controller
resolve: {
getFoods: ['$http', '$stateParams', function($http, $stateParams) {
var url = '/getfoods/' + $stateParams.cuisine;
return $http.get(url).success(function(response) {
return response.data;
})
}]
}
});
$urlRouterProvider.otherwise('/');
});
I am trying to load a controller so that my view will display. Actually I write my controller .Route or config also .But I am not able to load my controller and route file how to load controller using require.js so that my login.html page is display?
Here is my Plunker:
http://plnkr.co/edit/DlI7CikKCL1cW5XGepGF?p=preview
main.js
requirejs.config({
paths: {
ionic:'http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min',
},
shim: {
ionic : {exports : 'ionic'}
}
});
route.js
/*global define, require */
define(['app'], function (app) {
'use strict';
app.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "login.html",
controller: 'LoginCtrl'
})
$urlRouterProvider.otherwise("/login");
}]);
});
Any guess how to load view?
You just need to do:
main.js
requirejs.config({
paths: {
ionic:'http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min',
},
shim: {
ionic : {exports : 'ionic'}
},callback: function () {
'use strict';
require([
'angular',
'route',
'app'
], function (angular) {
// init app
angular.bootstrap(document, ['app']);
});
}
});
app.js
define(['ionic',
'./LoginCtrl',],
function (angular) {
'use strict';
var app = angular.module('app', [
'ionic','app.controllers']);
return app;
});
LoginCtrl.js
/*global define, console */
define(['angular'], function (ng) {
'use strict';
return ng.module('app.controllers', ['$scope','$state'
,function ctrl($scope, $state) {
$scope.login = function () {
alert("Login is clicked")
};
}]);
});
You can follow the tips here - https://www.startersquad.com/blog/angularjs-requirejs/
following is the code from my sample angular project.
app.js code:
(function () {
'use strict';
var app = angular.module('actorsDetails', [
// Angular modules
'ngResource',
// 3rd Party Modules
'ui.bootstrap',
'ui.router'
]);
app.config(['$stateProvider', '$urlRouterProvider', configRoutes]);
function configRoutes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/home/home.html',
controller: 'HomeCtrl',
controllerAs: 'vm'
})
.state('form', {
url: '/form',
templateUrl: 'app/form/form.html',
controller: 'FormCtrl',
controllerAs: 'vm',
resolve: {
initialData: ['actorApi', function (actorApi) {
return actorApi.getActorsResource();
}]
}
})
.state('resource', {
url: '/resource',
templateUrl: 'app/resource/resource.html',
controller: 'ResourceCtrl',
controllerAs: 'vm',
resolve: {
initialData: ['actorApi', function (actorApi) {
return actorApi.getActorsResource();
}]
}
});
$urlRouterProvider.otherwise('/main');
}
app.run(['$state', function ($state) {
// Include $route to kick start the router.
}]);
})();
controller code:
(function () {
'use strict';
angular.module('actorsDetails').controller('HomeCtrl', HomeCtrl);
/* #ngInject */
function HomeCtrl($state) {
/* jshint validthis: true */
var vm = this;
vm.activate = activate;
vm.test = true;
vm.navigate = navigate;
activate();
function activate() {
}
function navigate() {
$state.go('form');
}
}
})();
**test.js**
describe('HomeCtrl', function() {
beforeEach(module('actorsDetails'));
beforeEach(inject(function ($rootScope, $controller) {
var scope = $rootScope.$new();
var HomeCtrl = $controller('HomeCtrl', {
$scope: scope
});
}));
it('should have a HomeCtrl controller', function() {
expect(true).toBeDefined();
});
});
there are the files I have included in my karma.config.js
I have added all the angularJS dependent files.
I have also added the controller file that i need to test
files: [
'src/lib/angular/angular.min.js',
'src/lib/angular-mocks/angular-mocks.js',
'src/lib/angular-resource/angular-resource.min.js',
'src/lib/angular-route/angular-route.min.js',
'src/app/app.js',
'src/app/home/home.controller.js',
'src/test/specs/*.js'
],
kindly pinpoint me, what is that I am doing wrong...
Mock out the $state object in your unit test.
var mockState = { go: function() {} };
var HomeCtrl = $controller('HomeCtrl', { $scope: scope, $state: mockState });
The $injector:modulerr is most likely related to your use of $state in your controller. Instead of mocking, you could try adding the library to your karma config, and loading the module in your unit test.
'src/lib/angular-ui-router/release/angular-ui-router.min.js'
beforeEach(module('ui.router'));