I was trying to get some angular code to work and it seems that i am not quite understanding some of the syntax.
var mainModule = angular.module('main', ['common']);
What is the importance of "main" is that specific to something?
What is "common"?
I DO reference the angular latest js and app.js in layout.cshtml
I do not get any errors in chrome console.
My index.cshtml looks like
<div data-ng-controller="indexViewModel">
<h1>{{ topic }}</h1>
here is my app.js
var mainModule = angular.module('main', ['common']);
mainModule.controller("indexViewModel", function (
$scope, $http, $q, $routeParams, $window, $location, viewModelHelper) {
var self = this;
$scope.topic = "Tasks";
$scope.author = "Tom";
console.log("test");
});
(function (myApp) {
var viewModelHelper = function (
$http, $q, $window, $location) {
var self = this;
return this;
};
myApp.viewModelHelper = viewModelHelper;
}(window.MyApp));
Update:
Yes, my body tag was missing ng-app
<body data-ng-app="main">
Now i get the error with angular 1.5.6
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module main due to:
Error: [$injector:modulerr] Failed to instantiate module common due to:
Error: [$injector:nomod] Module 'common' 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.
Update 2:
OK , i see I NEEDED to have common defined since i called it that:
var commonModule = angular.module('common', ['ngRoute']);
var mainModule = angular.module('main', ['common']);
HOWEVER, getting this error now
angular.js:13642 Error: [$injector:unpr] Unknown provider: viewModelHelperProvider <- viewModelHelper <- indexViewModel
http://errors.angularjs.org/1.5.6/$injector/unpr?p0=viewModelHelperProvider%20%3C-%20viewModelHelper%20%3C-%20indexViewModel
at angular.js:68
Update 3 FIXED
I needed to add in this factory code
commonModule.factory('viewModelHelper',
function ($http, $q, $window, $location) {
return MyApp.viewModelHelper(
$http, $q, $window, $location);
});
The ng-app directive tells AngularJS that this is the root element of the AngularJS application.
You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used.
So, in angular.module('main', ['common']), main is the value of ng-app directive and common is the dependency on which your module main depends.
Take an example of routing, we inject the dependency ngRoute in the angular.module for routing of application.
Syntax : angular.module('main', ['ngRoute'])
Here, main is depends on ngRoute because without ngRoute module angular can not perform routing.
angular.module('main', ['common']) - main is the name of your module - you will later use it in HTML as the value of ng-app, and ['common'] is another module that your module depends on.
Make sure you defined ng-app="main" in your html. this is the first thing you need to define before you declare any controller
make sure you include angular.js as a script in your html (<script src="path/to/angular.js"></script>)?
Related
I am getting the famous Unknown provider error with my node app and can't figure out why.
app.js
var app = angular.module('citigraph', ['addCtrl', 'mygservice', 'stationservice']);
addCtrl.js
var addCtrl = angular.module('addCtrl', ['mygservice', 'rzModule', 'chart.js', 'stationservice']);
addCtrl.controller('addCtrl', function($scope, $http, $rootScope, gservice, stationservice){ ... }
stationservice.js
angular.module('stationservice', []).service('mystationservice', function($http){ ... }
The error in detail:
Error: [$injector:unpr] Unknown provider: stationserviceProvider <-
stationservice <- addCtrl
It looks like you are not using modules correctly. Use a single module name and reuse that module. You can retrieve it again by name if you omit the 2nd set of parameters.
You could create multiple modules but that is generally done when you want to group multiple items together as a piece of functionality.
app.js
// add common external dependencies to this module to the [] array
var app = angular.module('citigraph', []);
addCtrl.js
// add controller to same module
var app = angular.module('citigraph');
app.controller('addCtrl', ['$scope', '$http', '$rootScope', 'gservice', 'stationservice', function($scope, $http, $rootScope, gservice, stationservice){ ... }]
stationservice.js
// add service to same module
angular.module('citigraph').service('mystationservice', ['$http', function($http){ ... }]
Modify your code as below. I think there is some mix up here. Why do you need create two modules for application if they can be combined together.
app.js
var app = angular.module('citigraph', []);
addCtrl.js
var app = angular.module('addCtrl');
app.controller('addCtrl', function($scope, $http, $rootScope, gservice, stationservice){ ... }
stationservice.js
angular.module('citigraph').service('mystationservice', function($http){ ... }
Please refer Angular JS official documentation https://docs.angularjs.org/guide/di for more information.
Similar to this question: How to create separate AngularJS controller files?
I have a module that has controllers in several files, including controllers that are linked to directives. Where can I declare a factory such that it can be injected into all of them easily?
For example, in app.js I define the app level module
var app = angular.module('myApp', ['ngRoute']);
I would then expect to be able to define a factory in app.js like
app.factory('myFactory', function() { return { myThing: myThing}; });
And then be able to inject it into a controller that looked like
angular.module('myApp')
.controller('Ctrl1', ['$scope', '$http', 'myFactory',
function ($scope, $http, myFactory) {}]);
But I get the error Error: [$injector:unpr] Unknown provider:
Is there a way to do this?
So I am somewhat new to angular, but not javascript. I am working with an app someone else wrote and am trying to create a new controller in an existing module. The controllers are almost identical to each other as far as dependencies go. The question I have is how do I pass the same dependencies to both controllers? It seems like you would be able to pass them in like this:
`angular.module('ApertureForm', ['dialogs.main','dialogs.default-translations','ui.bootstrap'])`
When I do that for both modules, the controller returns undefined for whatever reason. Thats where I get stuck. How do you pass in dependencies such as the above code? Any advice would be great.
angular.module('ApertureForm', ['dialogs.main','dialogs.default-translations','ui.bootstrap']) tells AngularJS to initialize an Angular module named ApertureForm and also load other Angular modules as dependencies for the module.
To add dependencies to a controller, you do something like the following:
angular.module('ApertureForm').controller('ControllerName', function($scope, $location, $timeout) {...});
angular.module('ApertureForm') = Get the module named ApertureForm.
Then create a controller called ControllerName. The closure is where you inject dependencies.
To prevent a controller's dependencies from getting renamed on minification, you can do:
angular
.module('ApertureForm')
.controller('ControllerName', ControllerName);
ControllerName.$inject = ['$scope', '$location', '$timeout'];
function ControllerName($scope, $location, $timeout) {...}
Docs: https://docs.angularjs.org/guide/di
In angular.module('ApertureForm',[ you list the modules you want to inject to your module. You list in once for each module you have. If You want to create a controller in one of your modules, then your can use:
var myApp = angular.module('ApertureForm');
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
$scope here is a dependency for controller
You can read more about it here
AngularJS Controllers and Dependency Injection:
angular
.module('ApertureForm', ['dialogs.main','dialogs.default-translations','ui.bootstrap'])
.controller('FormController', ['$scope', '$http', function($scope, $http) {
// FormController code...
}])
.controller('WebinarController', ['$scope', '$http', function($scope, $http) {
// WebinarController code...
}]);
Thanks to everyone for the help! All of it was very useful in learning the structure of angular and how to properly use the framework. #Yosvel Quintero was able to explain how the module works and why I was getting the error. When dependencies are passed into the module, not the controller, they are available to all controllers as it the module it's self is now aware of the dependencies, which is why I kept getting errors trying to pass them again. Hopefully the answers given in response to the question can help someone learn angular as well. Thanks guys!
How would I inject $rootscope into wenzey.services so it is accessible across my application?
(function () {
'use strict';
/**
*
*/
angular
.module('wenzey.services', '$rootScope', [])
$rootScope.type = "consumer";
})();
This is the error message I am currently getting:
Uncaught ReferenceError: $rootScope is not defined
Uncaught Error: [$injector:modulerr] Failed to instantiate module wenzey due to:
Error: [$injector:modulerr] Failed to instantiate module wenzey.services due to:
Error: [ng:areq] Argument 'modulesToLoad' is not an array
You are using wrong definition for a module. You are mixing a module with a service. You need to understand the below to use them properly:
You specify a module as a dependency of other module in module definition. E.g.
angular
.module('wenzy.services', [])
.factory('AppService', function () {
// Add methods
});
Now you can use the module wenzy.services as a dependency while defining module wenzy.controllers as below:
angular
.module('wenzy.controllers', ['wenzy.services']);
You inject a service in another service/ controller while defining the service/ controller . E.g. We have injected the service AppService in the AppController below
angular
.module('wenzy.controllers', ['wenzy.services'])
.controller('AppController', function (AppService) {
// Add controller defintion
})
The $rootScope is a service provided by angular and can be injected into any service/ controller. You don't need to add that as part of module definition.
I am new to angularjs.
I am trying to build a mobile application inspired from modular approach defined here:
http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/
Now I am trying to create a service using factory method in one of my modules core. I have another module called home. Now when I try to inject service from core to home, I get an error:
Error: [$injector:unpr] Unknown provider: glue.core.geoLocationServiceProvider <- glue.core.geoLocationService
I have searched through internet and here. None of the solutions are working for me.
the code of my home module's controller is:
define([
'../module',
'../namespace',
],
function(module, namespace) {
'use strict';
var name = namespace + ".homeController";
var dependencies = ['$scope', '$http', '$ionicLoading', 'glue.core.geoLocationService'];
var controller = function($scope, $http, $ionicLoading, core) {
}
module.controller(name, dependencies.concat(controller));
});
I have also uploaded the project here on github: https://github.com/neerajsohal/test/tree/development
Any help would be great. I am going mad with this.