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 = {
Related
I am having an error on this code. I don't know why I am using angularjs 1.7.x version
$(document).ready(function () {
$('#signupBtn-spinner').hide();
var app = angular.module('myApp', []);
$('#signupBtn').click(signup);
function signup() {
app.controller('signupController', ['$scope', '$http', function ($scope, $http) {
alert('hello')
}]);
}
})
I strongly recommend you to avoid to use jquery with Angular/js
If you want to implement signup/login logic, suggest you to use ui-router. Some example.
Also please read this great Josh David Miller's answer “Thinking in AngularJS” if I have a jQuery background
About your problem:
You get this error from ng-app.
Put var app = angular.module('myApp', []); out of $(document).ready
Angularjs is loaded and it does not see any module because it is still not ready.
var app = angular.module('myApp', []);
$(document).ready(function () {
$('#signupBtn-spinner').hide();
$('#signupBtn').click(signup);
function signup() {
app.controller('signupController', ['$scope', '$http', function ($scope, $http) {
alert('hello')
}]);
}
})
I have an app which uses a lot of different js files. When I compile the app normaly with gulp everything works well, but when I compile everything in one file to minify it, I get an error (Uncaught Error: [$injector:modulerr]).
app-55bb2aca73.js:4 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=Error%3A%20%…http%3A%2F%2Flocalhost%3A8080%2Fbuild%2Fjs%2Fapp-55bb2aca73.js%3A4%3A30075)
at app-55bb2aca73.js:4
...
Here is my gulpfile.js (use Laravels elexir plugin):
mix.scripts([
/*libs*/
'../../../node_modules/jquery/dist/jquery.slim.min.js',
'../../../node_modules/bootstrap/dist/js/bootstrap.min.js',
'../../../node_modules/angular/angular.min.js',
'../../../node_modules/angular-cookies/angular-cookies.min.js',
'../../../node_modules/pickadate/lib/compressed/picker.js',
'../../../node_modules/pickadate/lib/compressed/picker.date.js',
'../../../node_modules/pickadate/lib/compressed/picker.time.js',
'app.js',
'config/*.js',
'angular/controller/*.js'
], 'public/js/app.js');
Here the app.js:
var app = angular.module("app", ['ngCookies'], function ($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
For example here the begin of a controller:
app.controller('someCtrl', function ($scope, $window, $http, $cookies) {
Someone got any idea why this is not working in one file?
When you minify, the controller method names get stripped out. Need to include in this way to have a reference:
app.controller('someCtrl', ['$scope', '$window', '$http', '$cookies'
function ($scope, $window, $http, $cookies) {
// ...
}
]
More here: https://docs.angularjs.org/guide/di
This might be because the system angular uses for injecting dependencies according to the names of the variables passed as parameters. If you are minifying your files into a single one and variables are not keeping the same original name, you should inject the dependencies manually as follow:
var myApp = function ($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
}
myApp.$inject = ['$interpolateProvider'];
angular.module("app", ['ngCookies'], myApp);
... and in your controller:
app.controller('someCtrl', controlFn);
var controlFn = function ($scope, $window, $http, $cookies) {};
controlFn.$inject = ['$scope', '$window', '$http', '$cookies'];
Not really sure where I'm going wrong here. I'm trying to simply inject a service and use it in controller
app.js
var app = angular.module('myApp', [
'myApp.controllers.myCtrl',
'myApp.services.myService'
]);
js/controllers/myCtrl.js
var app = angular.module('myApp.controllers.myCtrl', []);
app.controller('homeController', function ($scope, MyService) {
...
});
js/services/myService.js
var app = angular.module('myApp.services.myService', []);
app.service("MyService", function ($http, $q) {
...
});
This results in the following error
Here you are trying to access myService service component of myApp.services.myService module in myApp.controllers.myCtrl module, without injecting the module will obviously going to get failed.
If you wanted to access the service in myApp.controllers.myCtrl module then you need to inject myApp.services.myService in the [](dependency array where you can all dependent module).
var app = angular.module('myApp.controllers.myCtrl', ['myApp.services.myService']);
By doing above line you do have all component(services) in myApp.controllers.myCtrl module.
js/controllers/myCtrl.js
var app = angular.module('myApp.controllers.myCtrl', ['myApp.services.myService']);
app.controller('homeController', function ($scope, MyService) {
...
});
Then not need to inject services in app.js again.
var app = angular.module('myApp', ['myApp.controllers.myCtrl']);
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.
I'm using plunker and I have a separate angular file app.js. I want to 'use strict' but I get 'angular' is not defined. Is there a way to avoid this error and keep app.js as a separate file? Here is my code app.js code
'use strict';
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
It is highly recommended to put the 'use strict'; statement inside of a function - source.
Just wrap all of your code in an anonymous function (which is the recommended way of doing it).
(function() {
"use strict";
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
})();
Sample plunker: http://plnkr.co/edit/ShbhkuN3MXTHzmdrL3c5?p=preview