I am trying to make a login page. I have one controller on my login page. On button click I am showing an alert. But it is not displaying. I created a module of controller that why I am not able to create plunker or fiddle. I will share my small code in which I write a controller.
Here is my code
LoginCtrl.js
define(function () {
'use strict';
function ctrl($scope, $state) {
$scope.login = function () {
alert("--")
};
}
ctrl.$inject = ['$scope', '$state'];
return ctrl;
});
controller.js
/*global define, require */
define(function (require) {
'use strict';
var controllers = angular.module('app.controllers', []);
controllers.controller('LoginCtrl', require('controllers/LoginCtrl'));
return controllers;
});
Make sure in your HTML file you have added the controller name to the parent element or the appropriate element.You need to give the same controller name in both your HTML file and also the js file.
Make sure your controller file is included in your index.html file.
Related
I have an angularjs project with 6 services. Everyone of them works fine, but now if i create a new service and try to inject it, it fails. I tried to inject the same service in another project and it works.
Here is the service:
app-services/test.service.js
(function () {
'use strict';
angular
.module('app')
.factory('TestService', TestService);
TestService.$inject = ['$scope'];
function TestService($scope) {
var service = {};
service.Test = Test;
return service;
function Test() {
//Stuff
}
}
})();
Here is the controller in which i try to inject it: app-index/functions/functions.controller.js
(function () {
'use strict';
angular
.module('app')
.controller('FunctionController', FunctionController);
FunctionController.$inject = ['$scope', 'FlashService', '$location', 'UploaderService', '$q','TestService'];
function FunctionController($scope, FlashService, $location, UploaderService, $q, TestService) {
var vm = this;
var fileContainers;
$scope.UploadFile = UploadFile;
function UploadFile() {
TestService.Test();
}
}
})();
In the index.html
<script src="app.js"></script>
<script src="app-services/test.service.js"></script>
<script src="app-index/functions/functions.controller.js"></script>
Error
HTML1300: Navegación realizada.
localhost:44373
Error: [$injector:unpr] http://errors.angularjs.org/1.6.0/$injector/unpr?
p0=TestServiceProvider%20%3C-%20TestService%20%3C-%20FunctionController
at Anonymous function
(https://code.angularjs.org/1.6.0/angular.min.js:44:389)
at d (https://code.angularjs.org/1.6.0/angular.min.js:42:60)
at Anonymous function
(https://code.angularjs.org/1.6.0/angular.min.js:44:449)
at d (https://code.angularjs.org/1.6.0/angular.min.js:42:60)
at e (https://code.angularjs.org/1.6.0/angular.min.js:42:298)
at instantiate (https://code.angularjs.org/1.6.0/angular.min.js:43:242)
at Anonymous function
(https://code.angularjs.org/1.6.0/angular.min.js:93:137)
at link (https://code.angularjs.org/1.6.0/angular-route.min.js:7:316)
at Anonymous function
(https://code.angularjs.org/1.6.0/angular.min.js:16:45)
at ta (https://code.angularjs.org/1.6.0/angular.min.js:84:35) <div
class="ng-scope" style="width: 100%; height: 100%;" ng-view="">
As i said, the other services injected in the controller are working. And I don't think the problem is in TestService since it is working on another project.
I'm developing in Visual Studio
Edit: I removed $scope from service, but it still doesn't work
Edit 2: It looks like the problem is the caching. It loads the old version of index.html that hasn't got the reference of the new service..
I need a help. I use Angularjs 1.6 and I want just simply to inject a service from diff file in a controller. Looks pretty easy, aha)
Before I read this:
AngularJS: Service in different file.
But it didn't work in my case.
My code looks next:
app.js
angular.module('myApp', ['formService', 'formLogic'])
component.js
angular.module('formLogic',[])
.component('formLogic',{
templateUrl: './templates/form-logic.html',
controller: function ($scope, formService){
}
});
service.js
angular.module('formService',[])
.service('FormService', function($http){
});
But I got this error: Error: $injector:unpr Unknown Provider
Thanks for your help!
Don't give your modules the same name as your providers (don't name both your module and your component "formLogic").
Add your "formService" module as a dependency on your "formLogic" module.
You have called your service "FormService" and are trying to inject "formService" into your component controller. "formService" is not a service that you have defined, it's the name of your module.
To inject component and services from different module. Can inject the module.
component.js
angular.module('anotherModule',[])
.component('formLogic',{
templateUrl: './templates/form-logic.html',
controller: function ($scope, formService){
}
});
service.js
angular.module('anotherModule')
.service('formService', function($http){
});
so no can use formService and formLogic from myApp module
like:
app.js
angular.module('myApp', ['anotherModule']) // injected `anotherModule` in `myApp` modele
mainController.js
angular.module('myApp').controller('MainCtrl', function($scope, formService) {
// can access `formService` from here
});
OR
you can use same module like:
var app = angular.module('myApp', []);
app.component('formLogic',{
templateUrl: './templates/form-logic.html',
controller: function ($scope, formService){
// ...
}
});
app.service('formService', function($http){
//.....
});
app.controller('MainCtrl', function($scope, formService) {
// can access `formService` from here
});
I have this controller A which I'm trying to inject in every other controller.
What controller A does is, it communicates with a factory (which does some authentication services, communicates with database)
My factory looks like this and I named it myFactoryServices.js and included the link to it in my index page.
(function() {
angular
.module('myApp.myFactoryServices', [])
.factory('FactoryService', ["$http", "$location", function($http, $location){
var my = this;
my.someFunction = function()
{
//communiate with backend and return data
}
return my;
}]);
})();
and my Controller A looks like this:
(function() {
angular
.module('myApp.ControlA', [])
.controller('ControllerA', function($scope,$routeParams, FactoryService) {
var my = this;
FactoryService.someFunction();
});
})();
And I am trying to inject this controller in every other controller, but it does not work. I am pretty new to this kind of programming, can anyone tell me where I made mistake?
This is how I tried injecting a controller into another.
(function() {
angular
.module('myApp.ControlB', [])
.factory('ControllerBService', function($http) {
var baseUrl = 'backendurl/';
return {
getInfo: function() {
return $http.get(baseUrl+ 'getInfo');
}
};
})
.controller('ControllerB', function($scope,$routeParams, ControllerBService,ControllerA) {
var my = this;
});
})();
No error is coming, and the controller is not getting injected as I am not able to use those factory services. is this the correct method?
First of all you cannot inject controller to another controller, and One simple solution would be, instead of having each angular modules for each components, declare a module and add the factory service to controllers as dependency.
Code:
var app = angular.module('myApp', []);
app.factory('FactoryService', ["$http", "$location", function($http, $location){
var my = this;
my.someFunction = function()
{
//communiate with backend and return data
}
return my;
}]);
app.controller('ControllerA', function($scope,$routeParams, FactoryService)
{
var my = this;
FactoryService.someFunction();
});
app.controller('ControllerB', function($scope,$routeParams, FactoryService)
{
var my = this;
FactoryService.someFunction();
});
Controllers are not injectable, because controller is not singleton. Controllers are constructor functions used to create instances of controllers. For example you can have multiple instances of one controller in your app:
angular.module('app', []);
angular
.module('app')
.controller('Example', function () {
this.x = Math.random();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="app">
First instance: <br>
<div ng-controller="Example as Ex1">
{{Ex1.x}}
</div>
Second instance: <br>
<div ng-controller="Example as Ex2">
{{Ex2.x}}
</div>
</div>
So if you want to share some behavior between controller you should use factory instead.
To inject a controller into another controller, use the $controller service.
app.controller('ControllerB', function($scope,$routeParams, $controller) {
var my = this;
$scope.ctrlA = $controller("ControllerA", {$scope: $scope});
});
The above example creates an instance of ControllerA as ctrlA with its $scope injected with the scope of the parent controller.
For more information, see AngularJS $controller Service API Reference.
I am trying to make a simple login page and click event on login button. I am able to display view. But in between I am getting this error on console:
Error: [ng:areq] http://errors.angularjs.org/1.3.13/ng/areq?p0=controllers%2FLoginCtrl&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:37:417
at Sb (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:50:510)
at tb (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:51:78)
at $get (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:106:331)
at c.controller.I.appendViewElement (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:387:3265)
at Object.c.factory._.create.H.render (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:385:16956)
at Object.c.factory._.create.H.init (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:385:16191)
at c.controller.I.render (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:387:2221)
at c.controller.I.register (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:387:1952)
Here is my code https://dl.dropbox.com/s/mq2vdmxmx5qbfdd/testapp.zip?dl=0
Please run index.html to get error
/*global define, require */
define(function (require) {
'use strict';
var controllers = angular.module('app.controllers', []);
controllers.controller('LoginCtrl', require('controllers/LoginCtrl'));
return controllers;
});
try to "execute" module , note the extra () parenthesis on the end of file
define(function () {
'use strict';
function ctrl($scope, $state) {
$scope.login = function () {
alert("--")
};
}
ctrl.$inject = ['$scope', '$state'];
return ctrl;
}());
I'm getting the below error while loading my web pages:
Argument 'channelsAppController' is not a function, got undefined
I have 2 different web pages and one Layout page which includes 2 different java-script files:
<script src ="/Scripts/Views2/Channel.js"></script>
<script src ="/Scripts/Views2/Channel_Create.js"></script>
Here is the begging of each scripts:
Channel.js
(function() {
var myApp;
myApp = window.angular.module("myApp", []);
myApp.controller("channelsAppController", function($scope, $http, $compile) {
Channel_create.js
(function() {
var myApp;
myApp = window.angular.module("myApp", []);
myApp.controller("channelCreateController", function($scope, $http, $compile) {
$scope.Channel = {
When I load either of the pages I get the error mentioned earlier.
If I comment out one of the scripts in the layout the page...the page that doesn't uses the script loads and doesn't generate an error.
Each page has their respective controller specified in the root div.
I'm trying to figure out whats causing the errors:
How can I include multiple javascript files in a layout page while using angular ?
Channel.js
(function() {
var myApp;
myApp = window.angular.module("myApp", []); //Module definition
myApp.controller("channelsAppController", function($scope, $http, $compile) {
Channel_create.js
(function() {
var myApp;
myApp = window.angular.module("myApp"); //Module retrieval.
myApp.controller("channelCreateController", function($scope, $http, $compile) {
$scope.Channel = {