First service always coming up as unknown - angularjs

Whichever factory is listed first is always getting this error:
Uncaught Error: [$injector:unpr] Unknown provider: SocketProvider <- Socket
at ionic.bundle.js:13380
or
Error: [$injector:unpr] Unknown provider: CommandsProvider <- Commands <- Command
at ionic.bundle.js:25642
If it's put in one file like the starters are, they work fine, but that organization is horrible and this is the way I do it with regular Angular apps.
INDEX:
<script src="app.js"></script>
<script src="services/socket.service.js"></script>
<script src="services/commands.service.js"></script>
<script src="controllers/connect.controller.js"></script>
<script src="controllers/command.controller.js"></script>
Service structure:
socket.service.js
(function(){
'use strict';
angular.module('tacoCorp.services', [])
.factory('Socket', Socket);
Socket.$inject = ['socketFactory'];
function Socket(socketFactory) {
// do factory stuff
}
}());
commands.service.js
(function(){
'use strict';
angular.module('tacoCorp.services', [])
.factory('Commands', Commands);
Commands.$inject = [];
function Commands() {
// more factory stuff
}
}());
Controller structure:
(function (){
'use strict';
angular.module('tacoCorp.controllers')
.controller('Command', Command);
Command.$inject = ['$scope', 'Socket', 'Commands'];
function Command($scope, Socket, Commands) {
// controller jamz
}
})();

You actually define module 'tacaCorp.services' two times thats why first module is overwritten...
You should write module defination in another file then get it at services js files...
(function(){
'use strict';
angular.module('tacoCorp.services', []);
}());
as you see we define module with no dependency. Next get module and add your services on it.
(function(){
'use strict';
angular.module('tacoCorp.services')
.factory('Commands', Commands);
Commands.$inject = [];
function Commands() {
// more factory stuff
}
}());
as you see for getting module you only have to call angular.module('tacoCorp.services') like that if you add second argument then you set it instead of get it, this is your mistake actually.

Related

Unable to access an angularjs module inside another module

I have an angularJS app with three modules: myApp(parent/core module), services(contains all the factories and services), and controllers(contains all the controllers).
This is my app.js file
angular.module('services', []);
angular.module('controllers', []);
var app = angular.module('myApp', ['services', 'controllers']);
I read here that setting up my modules and defining dependencies in this way will allow each of my modules to access the other without having to inject the dependencies.
Here's my index.html file
<script src="/js/app.js"></script>
<script src="/js/services/testFactory.js"></script>
<script src="/js/controllers/testCtrl.js"></script>
testFactory.js file
angular.module('services').factory('testFactory', ['$rootScope', 'apiCall', function($rootScope, apiCall){
let testFactory = {};
testFactory.testFunc = function(){
console.log('testFactory.testFunc called');
}
return testFactory;
}])
testCtrl.js file
angular.module('controllers').controller('testCtrl', ['$scope', 'testFactory', function($scope, testFactory){
console.log("inside testCtrl");
$scope.testing = function(){
console.log("testing function called");
testFactory.testFunc();
}
}])
When I call the testFactory.testFunc inside the myApp module, it functions correctly. But, when I try calling it in the controller module, I'm getting the following error
TypeError: Cannot read property 'testFunc' of undefined
I even tried injecting the service module inside the controller module as a dependency, but I still got the same error.
How do I get the service module to work inside the controller module?

Angular having controllers and services in different files

I have two controllers and one service in my angular app splitted in 3 different files as follows:
Main controller
var app = angular.module("app",[]);
app.controller("mainController", function(){
console.log("Hi main controller");
})
Second controller
var app = angular.module("app");
app.controller("secondController", ['myCoolService', function($rootScope, myCoolService){
console.log("Hi second controller")
}]);
Service
var app = angular.module("app");
app.service('myCoolService', function() {
});
I've made sure I was importing it correctly:
<script type="text/javascript" src="js/controllers/mainController.js"></script>
<script type="text/javascript" src="js/services/myCoolService.js"></script>
<script type="text/javascript" src="js/controllers/secondController.js"></script>
However I'm getting an unknown service exception:
Unknown provider: $resourceProvider <- $resource <- myCoolService
Can someone help me?
Should be:
var app = angular.module("app");
app.controller("secondController", ['$rootScope', 'myCoolService',
function($rootScope, myCoolService){
console.log("Hi second controller")
}
]);
See, AngularJS injector either gets names of specific dependencies from an array - or uses factory function arguments for them. The first way is actually recommended, as it withstands minification and lets Angular skip parsing the function's argument list.
The point is, AngularJS won't mix those approaches: if list of deps is specified, it IS used, and any hints given by arguments are just ignored. That's why your original code actually puts myCoolService into $rootScope variable (the first dependency is assigned to the first argument), but just doesn't know where to find the second one.
In your second controller you are missing dependency.
var app = angular.module("app");
app.controller("secondController", ['$rootScope', 'myCoolService', function($rootScope, myCoolService){
console.log("Hi second controller")
}]);

Unable to load provider

I am trying to use an angular provider so I can dynamically load sub-modules within the $routeProvider of my angular application. However, I am getting one of 2 errors:
Error: [$injector:modulerr] Failed to instantiate module MainApp due to:
[$injector:unpr] Unknown provider: MyRouteProvider
Error: [$injector:nomod] Module 'MainApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Here's what I have:
main.js
require.config({
baseUrl : '',
version : '1.0',
});
require([
'app',
'my-route-mod/my-route-mod.module',
'my-route-mod/my-route-mod.provider',
'main-app/main-app.config',
'main-app/main-app.run',
/* other initial modules */
],function(){
angular.bootstrap(document,['MainApp']);
});
app.js
(function(){
'use strict';
/* global angular, $ */
angular.module('MainApp',[
'MyRouteMod', /* This module does not want to load */
'ngRoute',
'ngCookies'
]);
})();
my-route-mod/my-route-mod.module.js
(function(){
'use strict';
/* global angular */
angular.module('MyRouteMod',[]);
})();
my-route-mod/my-route-mod.provider.js
(function(){
'use strict';
/* global angular */
angular.module('MyRouteMod')
.provider('MyRouteModProvider',Provider);
Provider.$inject = [];
function Provider() {
var provider = this;
provider.$get = function () {
return { route : someFunction };
}
function someFunction(){...}
}
})();
main-app/main-app.config.js
(function(){
/* global angular */
'use strict';
angular.module('MainApp').config(Config);
Config.$inject = [
'MyRouteModProvider',
'$routeProvider',
'$locationProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide'
];
function Config(
MyRouteModProvider,
$routeProvider,
$locationProvider,
$controllerProvider,
$compileProvider,
$filterProvider,
$provide
) {
/* ... do some config stuff ... */
}
})();
index.html
<!DOCTYPE>
<html>
<head><title>My App</title></head>
<body>
<!-- Some other stuff -->
<div ng-view></div>
<!-- Some other stuff -->
<script src="vendor-stuff"></script>
<script src="vendor/require.js" data-main="main">/script>
</body>
</html>
I took requirejs out of the equation and was getting the same issue with the provider not loading.
I either get that MainApp is not available, or that MyRouteMod is not available, or that MyRouteModProvider is not available.
Suggestions please.
Angular naming conventions. For providers, the string 'Provider' gets added to your constructor name. So, if you have:
angular.module('MyMod').provider('MickeyMouse',Provider);
Then angular will look for 'MickeyMouseProvider'. So, if you do
angular.module('MyMod').provider('MickeyMouseProvider',Provider);
then angular will look for 'MickeyMouseProviderProvider'
Hope this saves you a bit of time.

What gulp-angular-filesort really does for gulp-inject?

Can anybody show an example of what gulp-angular-filesort really does and how to use it properly?
The thing is that I’ve recently realized that my gulp-angular-filesort doesn’t sort angularjs files at all, however my AngularJS App with lots of files works fine.
So, I’ve come up with two questions:
Is AngualarJs still sensitive for source files order? As to me, it looks like it isn’t.
What gulp-angular-filesort actually does? I can’t see any results of its work.
I’ve thought that gulp-angular-filesort looks at angular.module statements and sort files according to specified dependency in the brackets. It looks like I was wrong.
Please look at my sample below.
// File: Gulpfile.js
'use strict';
var
gulp = require('gulp'),
connect = require('gulp-connect'),
angularFilesort = require('gulp-angular-filesort'),
inject = require('gulp-inject');
gulp.task('default', function () {
gulp.src('app/index.html')
.pipe(inject(
gulp.src(['app/js/**/*.js']).pipe(angularFilesort()),
{
addRootSlash: false,
ignorePath: 'app'
}
))
.pipe(gulp.dest('app'))
;
connect.server({
root: 'app',
port: 8081,
livereload: true
});
});
//a_services.js
'use strict';
angular.module('myServices', [])
.factory('MyService', function () {
return {
myVar:1
};
})
;
//b_controllers.js
'use strict';
angular.module('myControllers', ['myServices'])
.controller('MyController', function ($scope, MyService) {
$scope.myVar = MyService.myVar;
})
;
// c_app.js
'use strict';
angular.module('myApp', ['myControllers']);
The result of gulp-inject is the following:
<!-- inject:js -->
<script src="js/c_app.js"></script>
<script src="js/b_controllers.js"></script>
<script src="js/a_services.js"></script>
<!-- endinject -->
I was expected exactly an opposite order to make the App work (however it still does work).
So, using of gulp-angular-filesort simply sorted files alphabetically, despite of all the dependencies specified in the angular.module(...,[...])
What is going on here?
Actually in your case you don't need gulp-angular-filesort because you declare a module for each file. The dependency injection mechanism for angular will figure out the correct way to call your modules according to your dependencies.
You'll need gulp-angular-filesort only when you have one module spread across multiple files. So for your example if all files use 'myApp' as the module name. Then the plugin will sort the files correctly: always the one with dependencies before the others.
Here your example modified so that gulp-angular-filesort is needed:
//a_services.js
'use strict';
angular.module('myApp')
.factory('MyService', function () {
return {
myVar:1
};
})
;
//b_controllers.js
'use strict';
angular.module('myApp')
.controller('MyController', function ($scope, MyService) {
$scope.myVar = MyService.myVar;
})
;
// c_app.js
'use strict';
angular.module('myApp', []);
In this case this will still be:
c_app.js
b_controller.js
a_service.js
gulp-angular-filesort moves files containing module’s declaration above the files wherein the modules are mentioned.
If the module is mentioned before it declared, you’ll got errors like these:
"angular.js:68 Uncaught Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument."
"angular.js:13294 Error: [ng:areq] Argument 'MyController' is not a function, got undefined"

AngularJS: Error 'Controller is not defined' when calling abstract controllers from another controller

In My angular JS application i have 2 pages using same functionality and i am trying to use abstract controller and i am getting 'Base Ctrl is not defined' error from Summary Ctrl.
am I missing anything...
Markup
<div ng-controller="MainCtrl">
<div ng-controller="SummaryCtrl">{{name}}</div>
<div ng-controller="SearchCtrl"></div>
</div>
MaintCtrl.js
define(['tabs/module'], function (module) {
'use strict';
module.controller('MainCtrl', ['$scope', function ($scope) {
//some code;
}]);
function BaseCtrl($scope) {
$scope.name="test";
}
});
SummaryCtrl.js
define(['tabs/summary/module'], function (module) {
'use strict';
module.controller('SummaryCtrl', ['$scope', function ($scope) {
BaseCtrl($scope);
//child actions`enter code here`
$scope.name = 'Clicked from base controller';
}]);
});
It looks to me like you're using this code as your example:
Angular: Extending controller
I'm still not 100% sure what your problem is, but it seems to me like it could be that in this sample you've supplied, both the code pieces are in the same file. When you do separate it into separate files, make sure when you bootstrap or add your *.js file references.. make sure you add base before the others that are 'dependent' on it
EG
<script language="javascript" src="someUrl/BaseCtrl.js"></script>
<script language="javascript" src="someUrl/SummaryCtrl.js"></script>
EDIT:
Your issue could be with RequirejJS
Have a look at
http://solutionoptimist.com/2013/09/30/requirejs-angularjs-dependency-injection/
Your MainModule is registered in 'tabs/module', but nowhere are you supplying SummaryCtrl any of its dependencies.
EG. SummaryCtrl is not implicitly aware of 'tabs/module', as it's in 'tabs/summary/module'
Try adding this to summary:
define(['tabs/summary/module', 'tabs/module'], function (module, BaseCtrl) {
'use strict';
module.controller('SummaryCtrl', ['$scope', function ($scope) {
BaseCtrl($scope);
//child actions`enter code here`
$scope.name = 'Clicked from base controller';
}]);
});

Resources