I wrote a simple Angular application and for my routing i used ui.router, but i am getting this error:
Argument 'loginController' is not a function, got undefined
modules.js:
(function () {
'use strict';
angular.module('account', ['ui.router']);
angular.module('app', ['account', 'ui.router']);
})();
routeConfig.js:
(function () {
'use strict';
var account = angular.module('account');
account.config(function ($stateProvider, $urlRouterProvider) {
// For any unmatched url
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: '/app/components/account/login.html',
controller: 'loginController'
});
});
})();
account.js:
(function () {
'use strict';
var account = angular.module('account');
account.controller('loginController', ['$scope', loginController]);
function loginController($scope) {
$scope.Title = 'login';
};
});
index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<div ui-view>
</div>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.js"></script>
<script src="app/modules.js"></script>
<script src="app/routeConfig.js"></script>
<script src="app/components/account/account.js"></script>
</body>
</html>
login.html:
<h4>{{Title}}</h4>
I'm new to ui.router, and the error come from route config.
Thanks for any help
When you use injection, that's not the way to do it.
If your function is separate from account.controller, use $inject:
account.controller('loginController', loginController);
...
loginController.$inject = ['$scope'];
function loginController($scope) {
...
}
Direct injection is only used when the body is inside account.controller.
account.controller('loginController', ['$scope', function($scope) {
...
}]);
Also, it seems your account.js file has an invalid IIFE - (function(){...}); instead of (function(){...})();
I think you need to remove $scope from the controller declaration as given below:
(function () {
'use strict';
var account = angular.module('account');
account.controller('loginController', loginController);
function loginController($scope) {
$scope.Title = 'login';
};
});
Related
How to Define a new function in angular can anybody please help me out
My code is like this:
var app = angular.module('rtsApp', ['ngMaterial', 'ngMessages', 'ngStorage','ngRoute', 'restangular','timepickerPop', 'ngStomp', 'ngCookies', 'angular-cron-gen','uiSwitch','ngMaterial', 'md.data.table']);
app.config(function(RestangularProvider) {
newFunction(RestangularProvider);//I need newFunction here
RestangularProvider.setDefaultHeaders({
"X-API-KEY": "sks#2017",
"Content-Type": "application/json"
});
Actually I am Getting This Error
Failed to instantiate module rtsApp due to:
ReferenceError: newFunction is not defined
at http://localhost:3000/dist/js/scripts.min.js:1738:5
at Object.invoke (http://localhost:3000/dist/js/vendor.min.js:82:460)
at d (http://localhost:3000/dist/js/vendor.min.js:80:333)
at http://localhost:3000/dist/js/vendor.min.js:80:472
at q (http://localhost:3000/dist/js/vendor.min.js:46:7)
at g (http://localhost:3000/dist/js/vendor.min.js:80:234)
at gb (http://localhost:3000/dist/js/vendor.min.js:84:352)
at c (http://localhost:3000/dist/js/vendor.min.js:60:57)
at Wc (http://localhost:3000/dist/js/vendor.min.js:60:370)
at ye (http://localhost:3000/dist/js/vendor.min.js:59:45)
try it :-
another scenario is follow below code,
'use strict';
var deck = angular.module('app',
['ui.router',other lib...]);
angular.module("app").config(["$breadcrumbProvider", "$httpProvider", function ($breadcrumbProvider, $httpProvider) {
$breadcrumbProvider.setOptions({
prefixStateName: 'userHome.main',
template: 'bootstrap3'
});
//Do No Remove This Line
$httpProvider.defaults.withCredentials = true;
}]);
Create a file and define a module in the file. For example create globalFunctions.js and add this file to your index.html file with this :
<script src="/path/to/file/location/globalFunctions.js"></script>
Define a module and also your global functions. like this:
(function () {
angular.module('test', []);
})();
function test() {
console.log("test");
}
Inject it in main app (app.module.js) and call it:
(function() {
'use strict';
var app = angular.module('app', [
'test',
...
]);
app.config(function($routeProvider, $locationProvider) {
test();
});
})();
Update
All files for a simple test:
app.module.js
(function () {
var app = angular.module('app', [
'ngRoute',
'global'
]);
app.config(function ($routeProvider, $locationProvider) {
test();
});
})();
test.module.js
(function () {
angular.module('global', []);
})();
function test() {
console.log("it is test function here");
}
index.html
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular-route.min.js"></script>
<script src="app.module.js"></script>
<script src="test.module.js"></script>
<body ng-app="app">
<h2>It is a test</h2>
</body>
</html>
This Plunker provided for my solution
I am tring to get the data using rxjs from promise method, and once it is success am subscribing it and passing it to my scope.
I can see the response object attached to my scope, but in UI, it is not getting mapped.
This is what I tried.
index html:
<html>
<head></head>
<body>
<my-component></my-component>
<script src="rx.lite.js"></script>
<script src="angular.min.js"></script>
<script src="rx.angular.js"></script>
<script src="app.js"></script>
<script src="service.js"></script>
<script src="component.js"></script>
</body>
</html>
app.js:
(function() {
'use strict';
angular.module('app', ['rx']);
})();
service.js:
;(function (undefined) {
'use strict';
angular.module('app').factory('myService', ['$http', '$q', 'rx',function($http, $q, rx) {
function httpReq(configObj){
var deferred = $http(configObj);
return rx.Observable
.fromPromise(deferred)
.map(function(response){ return response.data; });
}
return {
httpReq : httpReq
}
}]);
}.call(this));
component.js:
;(function (undefined) {
'use strict';
angular.module('app').component('myComponent', {
templateUrl: "myComponent.tpl.html",
controller: ['myService', 'rx', Ctrl]
});
function Ctrl(myService, rx) {
var $ctrl = this;
myService.httpReq({ url: ' http://localhost:3000/posts/1', method: 'GET'})
.subscribe(function(val) {
$ctrl.list = val;
}.bind(this));
}
}.call(this));
myComponent.tpl.html:
<div ng-if="$ctrl.list">{{$ctrl.list}}</div>
You have to call $apply() because $scope is modified outside of the $digest cycle (not sure though).
i'm trying to build an AngularJS app that has one Controller, one Service and that Bootstraps manually (no ng-app). The problem is that I keep having an error :
Argument 'AppController' is not a function, got string
HTML
<!DOCTYPE HTML>
<html xmlns:ng="http://angularjs.org">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js" type="text/javascript"></script>
<script src="inc/bootstrap.js" type="text/javascript"></script>
<script src="inc/controllers.js" type="text/javascript"></script>
<script src="inc/services.js" type="text/javascript"></script>
</head>
<body ng-controller="AppController">
[...]
</body>
</html>
bootstrap.js
angular.element(document).ready(function() {
angular.bootstrap(document, ['htmlControllerApp']);
});
controllers.js
angular.module('htmlControllerApp', [])
.controller('AppController', 'ConnectionService', ['$scope', function ($scope, ConnectionService) {
// Code
}]);
services.js
angular.module('htmlControllerApp')
.factory('ConnectionService', ['$rootScope', function ($rootScope) {
// Code
}]);
Thanks
EDIT - SOLUTION
In controllers.js, use instead :
angular.module('htmlControllerApp')
.controller('AppController', ['$scope', 'ConnectionService', function ($scope, ConnectionService) {
// Code
}]);
In bootstrap.js, as a "good practice" :
angular.module('htmlControllerApp', []);
angular.element(document).ready(function() {
angular.bootstrap(document, ['htmlControllerApp']);
});
This will create the module just once in bootstrap.js and AngularJS will try to retrieve it in controllers.js and services.js.
This is the page you're looking for.
https://docs.angularjs.org/api/ng/function/angular.bootstrap
and change this
angular.module('htmlControllerApp', [])
.controller('AppController', 'ConnectionService', ['$scope', function ($scope, ConnectionService) {
// Code
}]);
to this ->
angular.module('htmlControllerApp', [])
.controller('AppController', ['$scope', 'ConnectionService', function ($scope, ConnectionService) {
// Code
}]);
I have the the following files:
index.html
<html ng-app="gitHubViewer">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="MainController.js"></script>
<script src="gitHub.js"></script>
</head>
<body>
<h1>GitHub Viewer</h1>
<div ng-view>
</div>
</body>
</html>
main.html
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" placeholder="Username to find" ng-model="username" />
<input type="submit" value="Search" />
</form>
app.js
(function(angular) {
'use strict';
angular.module('gitHubViewer', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({
redirectTo: "/main"
});
}
]);
})(window.angular);
MainController.js
(function(angular) {
'use strict';
angular.module('gitHubViewer', [])
.controller('MainController', ['$scope', '$interval', '$location',
function($scope, $interval, $location) {
var decrementCountdown = function() {
$scope.countdown -= 1;
if ($scope.countdown < 1) {
$scope.search($scope.username);
}
};
var countdownInterval = null;
var startCountdown = function() {
countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
};
$scope.search = function(username) {
if (countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
};
$scope.username = 'angular';
$scope.countdown = 5;
startCountdown();
}
]);
})(window.angular);
My problem is that the main.html file is not being loaded on ng-view when i have the routing on a separated file (app.js).
But if i remove the app.js file and add the .config on MainController.js,the main.html loads properly, here's the example:
(function(angular) {
'use strict';
angular.module('gitHubViewer', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({
redirectTo: "/main"
});
}
])
.controller('MainController', ['$scope', '$interval', '$location',
function($scope, $interval, $location) {
var decrementCountdown = function() {
$scope.countdown -= 1;
if ($scope.countdown < 1) {
$scope.search($scope.username);
}
};
var countdownInterval = null;
var startCountdown = function() {
countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
};
$scope.search = function(username) {
if (countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
};
$scope.username = 'angular';
$scope.countdown = 5;
startCountdown();
}
]);
})(window.angular);
Am i doing something wrong with the separated the files???
I think you are defining your module twice with the same name, instead add a handle to it and use that.
var app = angular.module('gitHubViewer', []);
app.controller(...
app.config(...
Here's your plunkr edited to work:
plunkr
You need to declare the module that is shared between scripts outside the IIFE, so that it is a global variable to be shared. See: IIFE and scope
That is app.js now has the module defined at the top:
var app = angular.module("gitHubViewer", ["ngRoute"]);
(function() {
and this line was removed from MainController.js:
var app = angular.module("gitHubViewer", ["$scope", "$interval", "$location"]);
Note: You also don't need to inject scope or services like $location, that are included in the base angularJs package, into the module. These should be injected directly into controllers.
Note: after the countdown the plunkr now breaks, because you need to add your UserController in.
When you create a new module you use the dependency array argument
angular.module('gitHubViewer', ['ngRoute']);
Then when you want to reference the existing module you leave out the second argument.
angular.module('gitHubViewer').run...
angular.module('gitHubViewer').controller....
I'm new on AngularJs.
I have trouble injecting a service into a controller in AngularJS.
I read many tutorials and topics on stackoverflow, but I can't fix my issues because the controller & service use the same module like this:
var myModule = angular.module("myModule", []);
myModule.service("myService", MyService);
myModule.controller("MyController", function($scope, myService) {
myService.doIt();
});
My project works when the service & controller use the same module, but I want each one to use its own module because many controllers should use this service.
(I try to minimize the code)
index.html :
<!doctype html>
<html lang="en" ng-app="interfaceApp">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<head>
<meta charset="utf-8">
<title>Interface de consulation</title>
<link rel="stylesheet" href="resources/css/bootstrap.css">
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/animations.css">
<script src="resources/vendors/jquery/jquery.js"></script>
<script src="resources/vendors/angular/angular.min.js"></script>
<script src="resources/vendors/angular/angular-animate.js"></script>
<script src="resources/vendors/angular/angular-route.js"></script>
<script src="resources/vendors/angular/angular-resource.js"></script>
<!--personal script-->
<script src="js/controllers/router.js"></script>
<script src="js/animations/animations.js"></script>
<script src="js/filters/filters.js"></script>
<script src="js/services/services.js"></script>
<script src="js/services/deserializer.js"></script>
<script src="js/directives/directives.js"></script>
<!-- load my controller -->
<script src="js/controllers/phoneController.js"></script>
<script src="js/controllers/specimenController.js"></script>
<script src="js/controllers/localisationController.js"></script>
</head>
<body>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
</html>
router.js:
'use strict';
/* App Module */
var interfaceApp = angular.module('interfaceApp', [
'ngRoute',
'phoneModules',
'localisationModules',
'specimenModules',
'interfaceFilters',
'interfaceDirectives',
'interfaceAnimations',
'interfaceServices',
// 'DeserializerService' // Error: [$injector:modulerr]
]);
interfaceApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'MainCtrl'
}).
when('/specimens', {
templateUrl: 'partials/specimen/list.html',
controller: 'specimenListeCtrl'
}).
when('/specimens/:specimensId', {
templateUrl: 'partials/specimen/detail.html',
controller: 'specimenDetailCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
js/controllers/specimenController.js :
'use strict';
/* Controllers */
var specimenModules = angular.module('specimenModules', ['ngRoute']);
...
var referencedTag={"mediasSet":"#mediasSet","determinations":"#determinationID"};
specimenModules.controller('specimenListeCtrl', ['$scope', '$http', 'DeserializerService',
function ($scope,$http,DeserializerService) {
var request = 'http://localhost:8888/ui/specimens?limit=10&r_medias=false&orderby=d_determinationid';
$http.get(request).success(function(data) {
DeserializerService.startDeserializer(data,referencedTag);
$scope.specimens=data;
});
}
]);
js/services/deserializer.js :
var deserializerModule = angular.module('DeserializerModule', []);
deserializerModule.service('DeserializerService', function() {
***//specimenModules.service('deserializerService', function() { // work but i dont want to use specimenModules her***
this.referencedTag= [];
this.startDeserializer= function(data,refTag) {
this.referencedTag=refTag;
this.deserializer(data);
}
this.deserializer= function(data) {
...
}
});
I tried many combinations, but all failed giving error like :
Error: [$injector:modulerr]
Error: [$injector:unpr]
but i don't see where it come from on firebug ( the error dont give a line or file )
ERROR:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.17/$injector/unpr?p0=DeserializerServiceProvider%20%3C-%20DeserializerService
u/<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:6:443
ec/l.$injector<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:36:139
c#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:34:195
ec/p.$injector<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:36:209
c#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:34:195
d#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:34:409
f/<.instantiate#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:35:101
Od/this.$get</<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:66:463
ngViewFillContentFactory/<.link#http://localhost/rec-interface/resources/vendors/angular/angular-route.js:913:1
N#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:54:85
g#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:47:55
v/<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:46:253
O/<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:47:485
x#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:51:245
update#http://localhost/rec-interface/resources/vendors/angular/angular-route.js:871:1
Yd/this.$get</h.prototype.$broadcast#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:113:355
updateRoute/<#http://localhost/rec-interface/resources/vendors/angular/angular-route.js:552:15
ze/e/l.promise.then/D#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:99:243
ze/e/l.promise.then/D#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:99:243
ze/f/<.then/<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:100:407
Yd/this.$get</h.prototype.$eval#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:111:110
Yd/this.$get</h.prototype.$digest#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:108:180
Yd/this.$get</h.prototype.$apply#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:111:449
g#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:72:113
x#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:76:463
ve/</v.onreadystatechange#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:78:1
<div ng-view="" class="view-frame ng-scope">
Thanks for your help, any advice or critics are welcomed.
many thank #jcubic you are right it work !!!
it need double "injection", one for module and one for service name:
var specimenModules = angular.module('specimenModules', ['ngRoute','DeserializerModule']);
...
specimenModules.controller('specimenListeCtrl', ['$scope', '$http', 'DeserializerService', function ($scope,$http,DeserializerService) { ... }])
thanks